Build tools

` tag. Never use multiple `
` tags. * Items in list form should always be in `

`, `
`, or `

`. Never use a set of `

` or `

`. * Every form input that has text attached should utilize a `` tag. **Especially radio or checkbox elements.** @@ -94,7 +95,7 @@ Make use of ``, ``, ``, and `` tags (and `scope` attrib -## CSS +## SCSS ### Spacing @@ -108,7 +109,7 @@ Make use of ``, ``, ``, and `` tags (and `scope` attrib ### Formatting -* Use hex color codes `#000` unless using `rgba()`. +* Use hex color codes `#000` unless using `rgba()` in raw CSS (SCSS' `rgba()` function is overloaded to accept hex colors as a param, e.g., `rgba(#000, .5)`). * Use `//` for comment blocks (instead of `/* */`). * Avoid specifying units for zero values, e.g., `margin: 0;` instead of `margin: 0px;`. * Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values. diff --git a/docs/layout.md b/docs/layout.md index d16a66fc79..560fbfc38d 100644 --- a/docs/layout.md +++ b/docs/layout.md @@ -26,6 +26,8 @@ The container applies `width: 980px;` and uses horizontal `margin`s to center it ## Grid +### How it works + The grid is pretty standard—you create rows with `.columns` and individual columns with a column class and fraction class. Here's how it works: - Add a `.container` to encapsulate everything and provide ample horizontal gutter space. @@ -33,6 +35,8 @@ The grid is pretty standard—you create rows with `.columns` and individual col - Add your columns with individual `

`s. - Add your fractional width classes to set the width of the columns (e.g., `.one-fourth`). +### Demo + In practice, your columns will look like the example below. {% example html %} @@ -74,3 +78,15 @@ In practice, your columns will look like the example below.

{% endexample %} + +### Centered + +Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class. + +{% example html %} +

+

+ .one-half +

+

+{% endexample %} \ No newline at end of file diff --git a/docs/nav.md b/docs/nav.md index ec3770cf4e..71ef7e9075 100644 --- a/docs/nav.md +++ b/docs/nav.md @@ -47,7 +47,7 @@ There are a few subcomponents and add-ons that work well with the menu, includin {% endexample %} -You can also add optional headings to a menu. Feel free to use nearly semantic element with the `.menu-heading` class, including inline elements, headings, and more. +You can also add optional headings to a menu. Feel free to use nearly any semantic element with the `.menu-heading` class, including inline elements, headings, and more. {% example html %}