guardian/frontend — pull request #5750 by austinh7 (2014-08-27 16:07:33+00:00)
Title: Buttons!

This creates a couple of mixins and also uses Hologram to document the styles in a style guide via the comments.

The buttons styles have been designed and are in the Standard Design Elements doc https://docs.google.com/a/guardian.co.uk/presentation/d/11dBEV-MXhS6fb6ycAtKf3LijUfOSgxv2GnOGlVebPOE/edit#slide=id.g36b89224a_11

I've set up three styles so far, (primary, secondary and tertiary) - colours defined by design guide, and four sizes, (large, medium, small and xsmall), defaults to medium.

At the moment I have used the .button class as it's not used, (we use .btn).

To use it create a link with class "button" + button--[importance] + button--[size]

```
Link to somewhere
```

This creates a button with text link.

Icons can be added to either left or right of the text in the normal way but need a class of i-left or i-right.

```
Link to somewhere
```

We can have simple icon only buttons as well by having the link as above and the icon having a class of i-only added.

```

```

Also if we want custom colours we can;

```
.button--austin {
@include button-colour(red, green, yellow);
}
```

Screen shot from Hologram styleguide;

![screen shot 2014-08-27 at 16 59 14](https://cloud.githubusercontent.com/assets/1303616/4062865/3d2f131e-2e03-11e4-94e7-46af65b938d4.png)

Doing this has highlighted some issues around icon naming, icon sizing and icon colours.

Expecting some discussion around this so if a pull request isn't the right place just say!