- Let's get to it! The most important thing to get right with the inuitcss framework is the layout, and it's quite simple. Put the 'layout' class on your parent element, and then bestow the corresponding 'layout__item' class on all direct descendants. There are minor variations on this, for example if you enable the We Got Coders wrapper you can prefix 'layout' with 'lap-and-up-' or 'palm-' to correspond to inuitcss' baked-in media queries, and there are BEM modifiers such as '--tiny' or '--huge' which control the size of the guttering. That's the first half of controlling layout with inuitcss, the second half is setting the width of your DOM elements. Again, you can prefix the class names with the inuitcss device aliases for responsive behaviour, but here if you enable the We Got Coders wrapper you will have the choice to use class names such as 'seven-twentieths' or 'one-half' (though the original 1/4, 15/17 or one-of-four, fifteen-of-seventeen syntaxes remain available if you prefer). And that's it! The rest is just fine-tuning. There are responsive spacing classes that follow the same conventions regarding device aliases such as 'pl0', 'palm-mb--', or 'desk-pt++' which are available as soon as you activate them in the usual way. -
++ Lorem ipsum dolor sit amet, ius id fabulas invenire consectetuer, vidit dicat apeirian vim ne. Et assum aliquid sadipscing duo, te melius aliquando mea, legimus posidonium appellantur sit ad. No nam ceteros persecuti efficiendi, has ut ferri feugait corpora. Sit ea assum exerci suavitate. Te commune vituperatoribus has, sea vocibus propriae argumentum ea. -
- Note 1. In the three examples of layout given below examples 1 and 3 are standard implementations of inuitcss using 'layout' and 'layout--flush' respectively, whereas example 2 uses the 'layout__item--center' class that also inherits from any of the 'layout' variants but instead of guttering with a padding-right they gutter with half of the same on each side to achieve a true centring of the content. -
+ Facilisi consetetur ad vix, eum velit graecis vivendum at. Ex purto magna delicata eos, partiendo maluisset nec eu. Probo consectetuer te vim, ne partiendo deseruisse reprehendunt sea, eum no eros numquam dissentiunt. Graece deserunt ei vel, an est alia volumus reprimique. Per at affert labitur platonem, nam no vitae dissentias complectitur, sit et primis eripuit vivendum. -- Note 2. Because all layout__items have 'border-box' set for their box-sizing, paddings will push inward on content and therefore should generally be favoured over margins for adjusting horizontal spacing because this will not damage the column structure. -
+ Ei duo quem labores, ullum percipitur qui ea. Tale impetus persius vim ea. An cum probatus deterruisset. Eos cu commodo sapientem persequeris. Cu vim veniam graeci feugait, ei putant voluptatum sed. Sed graeco explicari et. -- The remainder of this demo page has two purposes. First, to demonstrate good layout practices in context - take a look at this page on different devices! And second, to give some vanilla examples of the various other components that the inuitcss framework offers. For exhaustive detail on any part of the framework presented here, please take a look at our docs. -
+ Mea ad putent electram intellegebat. Tollit conceptam ad pro. Eos porro eligendi pertinax ei, his unum vitae altera et. Odio officiis deserunt eam an. Vix vero graeci eu, mel diam simul facilisi id. + + Ad vitae congue suscipiantur cum, id malis eloquentiam mea. Sed omnis interesset ea, nec doming accumsan consectetuer no. In has falli scripta denique, cum tota iudicabit ea. Rebum perpetua no per, ea quot adhuc veniam mel, his ex impetus expetendis. + + ++ Lorem ipsum dolor sit amet, ius id fabulas invenire consectetuer, vidit dicat apeirian vim ne. Et assum aliquid sadipscing duo, te melius aliquando mea, legimus posidonium appellantur sit ad. No nam ceteros persecuti efficiendi, has ut ferri feugait corpora. Sit ea assum exerci suavitate. Te commune vituperatoribus has, sea vocibus propriae argumentum ea. + + Facilisi consetetur ad vix, eum velit graecis vivendum at. Ex purto magna delicata eos, partiendo maluisset nec eu. Probo consectetuer te vim, ne partiendo deseruisse reprehendunt sea, eum no eros numquam dissentiunt. Graece deserunt ei vel, an est alia volumus reprimique. Per at affert labitur platonem, nam no vitae dissentias complectitur, sit et primis eripuit vivendum. + + Ei duo quem labores, ullum percipitur qui ea. Tale impetus persius vim ea. An cum probatus deterruisset. Eos cu commodo sapientem persequeris. Cu vim veniam graeci feugait, ei putant voluptatum sed. Sed graeco explicari et. + + Mea ad putent electram intellegebat. Tollit conceptam ad pro. Eos porro eligendi pertinax ei, his unum vitae altera et. Odio officiis deserunt eam an. Vix vero graeci eu, mel diam simul facilisi id. + + Ad vitae congue suscipiantur cum, id malis eloquentiam mea. Sed omnis interesset ea, nec doming accumsan consectetuer no. In has falli scripta denique, cum tota iudicabit ea. Rebum perpetua no per, ea quot adhuc veniam mel, his ex impetus expetendis. +