diff --git a/README.md b/README.md index 2b75ee1..88407a1 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,9 @@ Helium uses a nestable grid based on fluid-width columns, based largely off the By default, Helium uses a fixed-width layout. However, making it responsive is as simple as adding a class of `responsive` to the `` element of your page. Responsive design is by its nature rather resource-intensive, so I built Helium to allow you to toggle responsive behavior on a per page basis so you can build out responsive pages as time and budgets permit. You can also use the `responsive` class as a hook to target only responsive pages with your SCSS. - +```html + +``` ## SASS Variables @@ -42,19 +44,17 @@ If you are clever with your math, you can ensure that the column widths are roun The markup for building a grid in Helium is very lightweight and should look familiar to you if you've ever used ZURB Foundation, 960gs or Bootstrap. Keep in mind that the sum total of the `spanX` elements in a row must not exceed the value set for the `$column-count` variable in `config.scss`. The markup below would be appropriate for a 12 column grid. -
-
-
-
- -
-
- -
-
-
+```html +
+
+
+ +
+ +
- +
+``` ## The Breakpoint @@ -70,81 +70,106 @@ Buttons are a big component of any UI. Helium tries to include many common butto A clean, uniform button style for all kinds of UI tasks. Keep in mind that you can use the `button` class on both `` and ` +```html +Here's a button + +``` + ## Large buttons Often times, you want your primary call to action button to be larger than other UI buttons. Just append an additional class of `button-large`. - I’m a call to action! +```html +I’m a call to action! +``` ## Small buttons Sometimes you need to fit buttons in a smaller space or de-emphasize them. Just append a class of `button-small`. - I'm a small button +```html +I'm a small button +``` ## Pill buttons Perfect for centered buttons or buttons that hang out by themselves. Just append a class of `button-pill`. - Take the red pill +```html +Take the red pill +``` ## Button groups These work great for toolbars, sub-navigation, toggling view options, etc. -
- One if by land - Two if by sea - Three if by teleporter -
+```html +
+ One if by land + + Two if by sea + + Three if by teleporter +
+``` ## Buttons with icons It’s easy to add an icon of your choice to your buttons. In this case, the icon is the only thing in the button. - - + +```html + +``` You can also prepend icons to button text. Icons will center themselves vertically. - I have an icon +```html +I have an icon +``` ## Button icons with dividers Sometimes, you want a divider between icon and button text - +```html + +``` ## Buttons with dropdowns Adding a nicely-styled dropdown menu to a button is dead easy. The markup for the dropdown itself is identical to that used on the navbar. -
- I am another - -
+```html +
+ I am another + + +
+``` ## Custom buttons Perhaps the most powerful component of the buttons module in Helium is the ability for you to create custom-styled buttons by just four arguments to a SASS mixin. - &.button-facebook { - @include button-custom( - $theme: $button-theme, - $background-color: $facebook-blue, - $text-color: #fff, - $reversed: true - ); - } +```css +&.button-facebook { + @include button-custom( + $theme: $button-theme, + $background-color: $facebook-blue, + $text-color: #fff, + $reversed: true + ); +} +``` You can see in the example above that we call the `button-custom` mixin and pass four arguments. @@ -172,39 +197,40 @@ Forms in Helium are build to be responsive-ready from the start. Two common desi Forms in Helium are split into `field-group` elements which consist of a `field-label` and its accompanying `fields`, plus any help or error text that may appear based on validation (more on that later). -
-
- +```html + +
+ -
- -
+
+
- +
+ +``` ## Labels left of fields Putting labels to the left of fields is as simple as adding the `labels-left` class to your `
` and then incorporating the Helium grid markup. In the example below, I've wrapped the `field-labels` with a `span3` and the `fields` with a `span9` but you can adjust those to compensate for longer or shorter label text. - +```html + +
+
+
+ +
-
-
- -
- -
- -
-
- -
+
+
+
- - - +
+ +``` + In the same manner as the rest of the fluid grid, the "labels left of fields" form style will collapse into a traditional "labels on top of fields" design when the viewport width drops below the `$responsive-breakpoint` (767px by default). ## Additional form styles @@ -215,40 +241,42 @@ Helium comes with a suite of additional form styles to make your life easier. This is useful for additional, clarifying instructions that won't fit in the label. -
- - -
- This is a small 3 digit number on the back of your card. -
-
+```html +
+ + +
This is a small 3 digit number on the back of your card.
+
+``` ### Radio/checkbox lists For lists containing multiple radio or checkbox options. -
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
+```html +
+
    +
    • + +
    • + +
    • +
+
+``` ### Error messages As you can see below, we've appended a class of `error` to the `field-group` and added a new object with a class of `error-message` directly after the input. -
- -
- -
You’ve got some problems, man.
-
-
\ No newline at end of file +```html +
+ + +
+ + +
You’ve got some problems, man.
+
+
+```