0.0.16 • Published 10 months ago
grail-css v0.0.16
Grail Site Layouts using CSS
Elements
The constituent elements of a layout correspond to the semantic elements commonly used on most websites. It is recommended, but not required, to match the classname with the HTML element for proper semantics (e.g., <main class="main">). The following are the recommended elements and their corresponding classes:
<html class="html"><body class="body"><nav class="nav"><aside class="aside"><footer class="footer">
Inner containers
It is recommended to nest inner elements within each of the main elements on the page.
Principles
- Consistent elements and containers are used in all layouts to keep things simple and manageable.
- Layouts are toggled only by changing the class on the containing element, typically the
htmltag. - No elements are removed on any screen resolution. If you want to change the position or remove a layout, you can do so with your custom styles.
- This package does not include a CSS reset, so you will need to include your own.
Layouts
- Single - a stacked layout on all screen sizes.
- Twin - a layout with two equally sized content containers (main, aside).
- Standard - a layout with one large centered container (main), and smaller left-hand (nav) and right-hand (aside) containers on desktop screens.