Write less to support all screens
Indicate which percentage of the available screen should occupy each element using LESS mixins such as .mw-ui-one-half or .mw-ui-two-thirds.
Set a different percentage for each screen you want to support. The .mw-ui-one-third(@palm) mixin makes an element occupy ⅓ on a small mobile device. The .mw-ui-one-third(@palm,@desk) will do the same but applied for both palm and desk sizes. The initial breakpoints (@palm, @lap, @portable, and @desk) can be easilly extended.
It's based on LESS to keep the HTML free from grid classes. You can adjust any property beyond layout (font-size, images, etc.) when being responsive for each sceen size. Use @media @palm {…} to define any propert chane for mobile.
For example, the following LESS code makes sections to occupy ⅓ by default, but to expand to the whole width on a mobile device using also a bigger font:
section {
.mw-ui-one-third;
.mw-ui-one-whole(@palm);
@media @palm {
font-size: 2.2em;
}
}
Responsive visibility mixins such as .mw-ui-hidden(@palm,@desk) are also included to show/hide elements on certain screen sizes:
You are on a palm-sizedlap-sizeddesk-sized device.
You can check the project at Github or download it.
Use this quick codepen to experiment with the grid system!
More exampes and detailed documentation will be added in the future. Meanwhile, some relevant files to take a look at:
@media @palm {...}.