@ou-imdt/css
Version:
The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.
56 lines (35 loc) • 1.33 kB
Markdown
# Breakpoints
<div class="warning card">
Under construction.
</div>
## In the VLE
```css
/* Styles should assume a screen size of 330px to start with and adjust as it increases */
/* Style adjustments and overrides can be added at the breakpoints that below */
/* Building like this from the get-go should minimise the number of breakpoint styles needed */
(min-width: 546px) {
/* Styles for anything larger 546, if needed */
}
(min-width: 768px) {
/* Styles for anything larger 768, if needed */
}
(min-width: 1076px) {
/* Styles for anything larger 1076, if needed */
}
```
## Apps
When building a widget that is a stand alone app that will not be embedded in the VLE you can consider using bootstraps approach.
```css
/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
/* Small devices (landscape phones, 576px and up) */
(min-width: 576px) { ... }
/* Medium devices (tablets, 768px and up) */
(min-width: 768px) { ... }
/* Large devices (desktops, 992px and up) */
(min-width: 992px) { ... }
/* X-Large devices (large desktops, 1200px and up) */
(min-width: 1200px) { ... }
/* XX-Large devices (larger desktops, 1400px and up) */
(min-width: 1400px) { ... }
```