johnpolacek.github.io - johnpolacek.github.io/simple-grid

Simple Grid

Johnpolacek.github.io Spined HTML

Simple Grid Simple Grid A simple, easy-to-use 12-column responsive grid with some nice features. Built with Simple Grid Generator. grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 grid-1 m-grid-2 s-grid-3 Features Responsive Overrides Set the default grid width, then override at variegated screen widths with breakpoint prefixes. Offset classes work this way moreover <div class="grid-3 offset-4 m-grid-6 s-grid-12"> <!-- Translates to: - Quarter width by default - Half width at the medium breakpoint - Full width at the small breakpoint --> <div class="grid-4 offset-6 s-grid-12 s-offset-0"> <!-- Translates to: - Third width, offset to right half of the page - Full width at the small breakpoint, no offset --> Padding & Margin Classes For quick, easy layouts, use the grid to set resulting padding and margin on all your elements (top, bottom, left, right, horizontal, vertical, all). By default, there are 3 levels of padding/margin you can wield (or none). /* For example... */ .pad-0 { padding: 0; } .pad-1 { padding: 0.25em; } .pad-1-sides { padding-left: 0.5em; padding-right: 0.5em; } .pad-3-bottom { padding-bottom: 2em; } .marg-3-vert { margin-top: 1em; margin-bottom: 1em; } Breakpoint prefixes can moreover be used to hands make layout adjustments for variegated screen widths. <div class="pad-1 m-pad-1 s-pad-0"> Setting Up Do any of the following: Simply put the contents of grid.min.css into your stylesheet If you have a CSS build process with minification and concatenation, include grid.css in your configuration. If using SASS, include the contents of the /sass directory in your project. Read unelevated fo customization options. Examples Resize your browser window to view breakpoint layout changes. Padding pad-0 pad-1 pad-2 pad-3 pad-2-sides pad-2-vert pad-2-top pad-2-bottom pad-2-left pad-2-right Responsive Padding pad-3 m-pad-2 s-pad-1 Nesting grid-4 grid-4 grid-4 Responsive Nesting grid-3 m-grid-6 s-grid-12 grid-3 m-grid-6 s-grid-12 grid-3 m-grid-6 s-grid-12 grid-3 m-grid-6 s-grid-12 Complex Responsive Nesting grid-3 s-grid-12 grid-12 l-grid-6 grid-12 l-grid-6 grid-12 l-grid-6 grid-12 l-grid-6 grid-12 l-grid-6 grid-12 l-grid-6 grid-12 l-grid-6 grid-12 l-grid-6 grid-8 m-grid-9 s-grid-12 l-offset-1 grid-12 grid-6 m-grid-12 grid-6 m-grid-12 grid-6 m-grid-12 grid-6 m-grid-12 grid-12 grid-6 m-grid-3 s-grid-3 grid-6 m-grid-3 s-grid-3 grid-6 m-grid-3 s-grid-3 grid-6 m-grid-3 s-grid-3 Offsets grid-4 offset-2 grid-4 offset-4 grid-4 offset-6 Responsive Offsets grid-4 offset-8 m-grid-6 m-offset-6 s-grid-12 s-offset-0 Equal Height Responsive Grid Containers With grid-flex grid-12 m-grid-6 l-grid-4 Deleniti, fuga laboriosam fugit inventore soluta architecto. Beatae est earum laborum totam! grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci maiores labore voluptatum doloremque asperiores eos sit, quam inventore fuga esse. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, fugiat. grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero at est facere a distinctio nisi eum, minus neque nam commodi. grid-12 m-grid-6 l-grid-4 Deleniti, fuga laboriosam fugit inventore soluta architecto. Beatae est earum laborum totam! grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci maiores labore voluptatum doloremque asperiores eos sit, quam inventore fuga esse. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, fugiat. grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero at est facere a distinctio nisi eum, minus neque nam commodi. Without grid-flex grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci maiores labore voluptatum doloremque asperiores eos sit, quam inventore fuga esse. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, fugiat. grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero at est facere a distinctio nisi eum, minus neque nam commodi. grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci maiores labore voluptatum doloremque asperiores eos sit, quam inventore fuga esse. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, fugiat. grid-12 m-grid-6 l-grid-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero at est facere a distinctio nisi eum, minus neque nam commodi. Customize With Sass If you are familiar with Sass, you can use the Simple Grid Generator mixin to set your own values for: Number of Columns Switch to a 18-column or 24-column grid instead. Breakpoint Prefixing Change breakpoints, or add more. (e.g. xs-, xl-, etc.) Padding & Margin Classes Add more, take some away. Set the values however you like, px or em. Use only padding (no margin) or just remove them altogether. For increasingly information, go to the Simple Grid Generator Project Page. License Author & copyright (c) 2015: John Polacek, Dual MIT & GPL license