the responsive concept

Today's challenge of a webdesign is the adaptivity to many different devices: desktop-monitor, TV, tablets, smartphones, mobiles. That footstep has been taken on and you can solve the problem with media-queries and fluid-layouts. But the problem we run into when using media-queries traditionally is that a mobile device first has to download all the desktop styles and then gets its own specific styles. That blows up the code, decreases speed. To avoid this, Andy Clarke thought about a new way serving with a mobile-first concept.

In MODX-Boilerplate

In MODX-Boilerplate I wanted to have this concept since it was made public some months ago. But as it's a huge step of changes it finally is in release of MODX-Boilerplate v2. Here I provide the common concept when you use the style.css file and then the specific device-media-queries. So if you don't want to know how to use mobile-first concept you can use the common way. If you want to follow the responsive-concept (320up), you now include by default the core.css which contains the basic normalize.css and some tweaks and then start with the smallest device media-query:

`

`

This proof of concept has been adopted for the fluid 1140px grid-layout. Be aware that the 978px grid-layout is currently not adopted to that concept. So isn't inuit.css.