Even more minor fixes and improvements:
The main goal of chassis.css is to give designers a grid system and typography sizing, without any styling. That's it. This is meant for true customization and expansion.
At just 4.51 KB minified, chassis.css has a lot of room to add your own touch. No bloat or extras; Just the bare necessities.
Built mobile-first, chassis.css is based on a 1200px responsive grid system and utlizes contemporary standards for typography accross all devices.
$ npm install chassis-cssThe chassis.css grid system works off of a standard 12-column layout. Just type give a div a class of .col-# where # is a number between 1 and 12, and you're ready to go! The grid will keep its layout until the screen reaches a phone size (<767px), and then it will make all columns full-width.
<div class="container">
<div class="row">
<div class="col-12">...</div>
</div>
<div class="row">
<div class="col-11">...</div>
<div class="col-1">...</div>
</div>
<div class="row">
<div class="col-10">...</div>
<div class="col-2">...</div>
</div>
<div class="row">
<div class="col-9">...</div>
<div class="col-3">...</div>
</div>
<div class="row">
<div class="col-8">...</div>
<div class="col-4">...</div>
</div>
<div class="row">
<div class="col-7">...</div>
<div class="col-5">...</div>
</div>
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
</div>Rows can even be nested within columns, allowing for complex and versatile layouts within your project.
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-4">...</div>
<div class="col-4">...</div>
<div class="col-4">...</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-12">...</div>
</div>
</div>
</div>
</div>
</div>
</div>In addition to the grid system, chassis.css comes with offset classes to align columns however you'd like. To use a column offset, just tack on an .offset-# class onto a column where # is a number between 1 and 11. As with before, the styling of a column offset will stay until it reaches phone size, and then the column will be full width with no offset.
<div class="container">
<div class="row">
<div class="col-4">...</div>
<div class="col-4 offset-4">...</div>
</div>
<div class="row">
<div class="col-3 offset-3">...</div>
<div class="col-3 offset-3">...</div>
</div>
<div class="row">
<div class="col-6 offset-3">...</div>
</div>
</div>Chassis.css comes with a bunch of helper classes to show or hide elements depending on the size of the screen. Only want to show something on mobile? Tack on a class of .sm-show to it and your set. Want to have something only be hidden on tablet devices? Tack on a class of .md-hide to it. It's that simple! Resize your screen to see the below example in action.
<div class="container">
<div class="row">
<div class="col-12 xs-show">...</div>
<div class="col-12 sm-show">...</div>
<div class="col-12 md-show">...</div>
<div class="col-12 lg-show">...</div>
</div>
</div>Chassis.css has a standard .sr-only class that allows you hide code visibly, but still allow for it to be picked up by source readers.
<div class="container">
<div class="row">
<div class="col-12">
<i class="fa fa-check"><span class="sr-only">[Check Icon]</span>...</i>
</div>
</div>
</div>Chassis.css includes pull and push classes to help you arrange columns in whatever order you like. These classes will switch the order up until the mobile media-query.
<div class="container">
<div class="row">
<div class="col-9 push-3">...</div>
<div class="col-3 pull-9">...</div>
</div>
</div>Also included in chassis.css are helper classes to float elements left or right, as well as align text (left, center, right, or justified). Pretty awesome stuff.
<div class="container">
<div class="row">
<div class="col-6 text-center">...</div>
<div class="col-3 float-right text-right">...</div>
</div>
</div>There are two simple, intuitive list helper classes:
<div class="col-6">
<ul class="list-unstyled">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
<div class="col-6">
<ul class="list-inline">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>Last but not least, chassis.css includes some useful margin/padding helper classes for you to adjust elements exactly how you like. These helper classes are based on the common 15px spacing used throughout the framework, and work in full and double sizes for both top and bottom.