A simple HTML & SCSS rapid prototyping toolkit for responsive web design by @adamwhitcroft.
Visit the Proto website for detailed documentation and usage examples.
--
For complete usage examples, refer to the Proto website.
| Class | Description |
|---|---|
| block | Apply to just about everything |
| center | Centers an element within its parent |
| grid | Defines an element that contains children using a grid system |
| hundred | Sets a width of 100% on an element |
| ninety | Sets a width of 90% on an element |
| eighty | Sets a width of 80% on an element |
| seventyfive | Sets a width of 75% on an element |
| seventy | Sets a width of 70% on an element |
| sixtysix | Sets a width of 66.666% on an element |
| sixty | Sets a width of 60% on an element |
| fifty | Sets a width of 50% on an element |
| forty | Sets a width of 40% on an element |
| thirtythree | Sets a width of 33.333% on an element |
| thirty | Sets a width of 30% on an element |
| twentyfive | Sets a width of 25% on an element |
| twenty | Sets a width of 20% on an element |
| ten | Sets a width of 10% on an element |
| desktop | Defines an element that will only be visible on desktops |
| tablet | Defines an element that will only be visible on tablets |
| phone | Defines an element that will only be visible on phones |
| not-desktop | Defines an element that will be visible on everything but desktops |
| not-tablet | Defines an element that will be visible on everything but tablets |
| not-phone | Defines an element that will be visible on everything but phones |
| -demo | Visually demonstrates that an element will be hidden without hiding it |
| -to- | Defines a change in an element's size depending on the viewport |