Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Highlighted source code #7

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Highlighted source code #7

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbcd32a
Highlighted source code
Jan 30, 2013
b51b824
Update README.md
Jan 30, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 121 additions & 93 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<body>` 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.

<body class="responsive">
```html
<body class="responsive">
```

## SASS Variables

Expand All @@ -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.

<div class="container">
<div class="row">
<div class="span4">
</div>

<div class="span4">
</div>

<div class="span4">
</div>
</div>
```html
<div class="container">
<div class="row">
<div class="span4"></div>

<div class="span4"></div>

<div class="span4"></div>
</div>

</div>
```

## The Breakpoint

Expand All @@ -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 `<a>` and `<button>` elements.

<a class="button>Here's a button</a>

<button class="button>Here's another</button>
```html
<a class="button">Here's a button</a>

<button class="button">Here's another</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`.

<a class="button button-large">I’m a call to action!</a>
```html
<a class="button button-large">I’m a call to action!</a>
```

## Small buttons

Sometimes you need to fit buttons in a smaller space or de-emphasize them. Just append a class of `button-small`.

<a class="button button-small">I'm a small button</a>
```html
<a class="button button-small">I'm a small button</a>
```

## Pill buttons

Perfect for centered buttons or buttons that hang out by themselves. Just append a class of `button-pill`.

<a class="button button-pill">Take the red pill</a>
```html
<a class="button button-pill">Take the red pill</a>
```

## Button groups

These work great for toolbars, sub-navigation, toggling view options, etc.

<div class="button-group">
<a class="button">One if by land</a>
<a class="button">Two if by sea</a>
<a class="button">Three if by teleporter</a>
</div>
```html
<div class="button-group">
<a class="button">One if by land</a>

<a class="button">Two if by sea</a>

<a class="button">Three if by teleporter</a>
</div>
```

## 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.

<a class="button"><i class="icon"></i></a>

```html
<a class="button"><i class="icon"></i></a>
```

You can also prepend icons to button text. Icons will center themselves vertically.

<a class="button"><i class="icon icon-prepend"></i>I have an icon</a>
```html
<a class="button"><i class="icon icon-prepend"></i>I have an icon</a>
```

## Button icons with dividers

Sometimes, you want a divider between icon and button text

<button class="button has-icon-divider"><i class="icon icon-prepend"></i>I have a divided icon</button>
```html
<button class="button has-icon-divider"><i class="icon icon-prepend"></i>I have a divided icon</button>
```

## 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.

<div class="has-dropdown button-dropdown">
<a href="#" class="button" data-toggle="dropdown">I am another <span class="caret"></span></a>
<ul class="dropdown right">
<li><a href="#">Dropdown item one</a></li>
<li><a href="#">Here is another</a></li>
<li><a href="#">Wait, one more</a></li>
</ul>
</div>
```html
<div class="has-dropdown button-dropdown">
<a href="#" class="button" data-toggle="dropdown">I am another <span class="caret"></span></a>

<ul class="dropdown right">
<li><a href="#">Dropdown item one</a></li>

<li><a href="#">Here is another</a></li>

<li><a href="#">Wait, one more</a></li>
</ul>
</div>
```

## 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.

Expand Down Expand Up @@ -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).

<form>
<div class="field-group">
<label class="field-label">Email address</label>
```html
<form>
<div class="field-group">
<label class="field-label">Email address</label>

<div class="fields">
<input type="email" placeholder="[email protected]">
</div>
<div class="fields">
<input type="email" placeholder="[email protected]" />
</div>
</form>
</div>
</form>
```

## Labels left of fields

Putting labels to the left of fields is as simple as adding the `labels-left` class to your `<form>` 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.

<form class="labels-left">
```html
<form class="labels-left">
<div class="field-group">
<div class="row">
<div class="span3">
<label class="field-label">First name</label>
</div>

<div class="field-group">
<div class="row">

<div class="span3">
<label class="field-label">First name</label>
</div>

<div class="span9">
<div class="fields">
<input type="text">
</div>
<div class="span9">
<div class="fields">
<input type="text" />
</div>
</div>
</div>

</form>

</div>
</form>
```

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
Expand All @@ -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.

<div class="fields">
<input type="number">
<div class="field-instructions block">
This is a small 3 digit number on the back of your card.
</div>
</div>
```html
<div class="fields">
<input type="number" />

<div class="field-instructions block">This is a small 3 digit number on the back of your card.</div>
</div>
```

### Radio/checkbox lists

For lists containing multiple radio or checkbox options.

<div class="fields">
<ul class="radio-checkbox-list">
<li>
<label><input type="radio" name="example-radio">Product inquiry</label>
</li>
<li>
<label><input type="radio" name="example-radio">Product inquiry</label>
</li>
<li>
<label><input type="radio" name="example-radio">Here&rsquo;s a really, really long item that goes onto two lines</label>
</li>
</ul>
</div>
```html
<div class="fields">
<ul class="radio-checkbox-list">
<li><label><input type="radio" name="example-radio">Product inquiry</label></li>

<li><label><input type="radio" name="example-radio">Product inquiry</label></li>

<li><label><input type="radio" name="example-radio">Here&rsquo;s a really, really long item that goes onto two lines</label></li>
</ul>
</div>
```

### 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.

<div class="field-group error">
<label class="field-label">Last name</label>
<div class="fields">
<input type="text" />
<div class="error-message">You&rsquo;ve got some problems, man.</div>
</div>
</div>
```html
<div class="field-group error">
<label class="field-label">Last name</label>

<div class="fields">
<input type="text" />

<div class="error-message">You&rsquo;ve got some problems, man.</div>
</div>
</div>
```