Skip to content

Commit f9c282a

Browse files
phildionnephildionne
committed
Update readme
1 parent 147ccae commit f9c282a

File tree

1 file changed

+32
-84
lines changed

1 file changed

+32
-84
lines changed

‎readme.md

+32-84
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,62 @@
11
# Golden Bootstrap
2-
Golden Bootstrap is a bunch of [less](http://lesscss.org/) written css rules giving you the [divine](http://en.wikipedia.org/wiki/Sacred_geometry) power of using golden ratio sized columns with [Bootstrap](http://twitter.github.com/bootstrap).
2+
Golden Bootstrap is a tiny addon for [Bootstrap](http://getbootstrap.com/) giving you the [divine](http://en.wikipedia.org/wiki/Sacred_geometry) power of using golden ratio sized columns. Available both for [less](http://lesscss.org/) and [Sass]() CSS preprocessors.
33

4-
Friendly doc [right here](http://phildionne.github.com/golden-bootstrap).
4+
## Usage
5+
Include `golden-bootstrap.less` or `golden-bootstrap.scss` in `bootstrap.less` or `bootstrap.scss`, and that's it.
56

6-
## Getting started
7-
Include `golden-bootstrap.less` in `bootstrap.less`, compile and that's it.
8-
9-
```
10-
// Grid system and page structure
11-
...
12-
@import "golden-bootstrap/golden-bootstrap.less"; // Add support for Golden Bootstrap
13-
```
14-
15-
## How it works
16-
“Two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one” ([source](http://en.wikipedia.org/wiki/Golden_ratio)). Under the hood it looks like this:
17-
18-
```
19-
@goldenRatio: 1.6180339887498948482;
20-
@goldenLarge: 1/@goldenRatio;
21-
@goldenSmall: 1-@goldenLarge;
7+
```sass
8+
// Core CSS
9+
//...
10+
@import "golden-bootstrap/golden-bootstrap.scss"; // Add support for Golden Bootstrap
2211
```
23-
24-
Golden Bootstrap uses `@gridColumnWidth` and `@gridGutterWidth` values specified in bootstrap's `variables.less` to generate the grid system.
25-
26-
## Fixed
27-
Use Bootstrap's default fixed columns and nest a new `.row` with a set of `.golden-small` and `.golden-large` columns.
12+
Then, like you would do with any other Bootstrap default column, simply use a set of `.golden-sm` and `.golden-lg` columns:
2813

2914
```html
3015
<div class="row">
31-
<div class="span9">
32-
<div class="row">
33-
<div class="golden-small">...</div>
34-
<div class="golden-large">...</div>
35-
</div>
36-
</div>
16+
<div class="col-golden-sm">...</div>
17+
<div class="col-golden-lg">...</div>
3718
</div>
3819
```
3920

40-
Using Golden Bootstrap comes with a notable drawback: you can't nest any `.span*` in a `.golden-small` and `.golden-large` column.
41-
42-
### Fixed offsetting
43-
Add `.offset-golden-small` or `.offset-golden-large` to a `golden*` column to offset it by it's counterpart.
44-
4521
```html
4622
<div class="row">
47-
<div class="span9">
48-
<div class="row">
49-
<div class="golden-small offset-golden-large">...</div>
50-
</div>
51-
</div>
23+
<div class="col-golden-offset-sm">...</div>
5224
</div>
53-
```
54-
55-
---
5625

57-
## Fluid
58-
Keep your regular fluid grid scaffolding. To divide any `.span*` by the golden ratio, simply nest `.golden-small` and `.golden-large` under a `.row-fluid`.
26+
<div class="row">
27+
<div class="col-golden-offset-lg">...</div>
28+
</div>
5929

60-
```html
61-
<div class="row-fluid">
62-
<div class="span12">
63-
<div class="row-fluid">
64-
<div class="golden-small">...</div>
65-
<div class="golden-large">...</div>
30+
<form class="form-horizontal" role="form">
31+
<div class="form-group">
32+
<label class="col-golden-sm control-label">Email</label>
33+
<div class="col-golden-lg">
34+
<input type="email" class="form-control" placeholder="Email">
6635
</div>
6736
</div>
68-
</div>
37+
</form>
6938
```
7039

71-
### Fluid nesting
72-
You can nest any fluid column in `.golden-small` and `.golden-large`.
40+
## How it works
41+
“Two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one” ([source](http://en.wikipedia.org/wiki/Golden_ratio)). Under the hood it looks like this:
7342

74-
### Fluid offsetting
75-
Use `.offset-golden-small` or `.offset-golden-large` to offset any `golden*` column by its counterpart.
43+
```
44+
$golden-ratio: 1.6180339887498948482;
45+
$golden-lg: (1 / $golden-ratio);
46+
$golden-sm: (1 - $golden-lg);
47+
```
7648

77-
---
49+
Golden Bootstrap uses `$grid-gutter-width` values specified in bootstrap's `variables.scss` to generate the grid system.
7850

79-
## Forms
80-
Apply Golden Bootstrap's grid to standard form controls through `.controls` for stacked behavior.
8151

82-
```html
83-
<div class="controls">
84-
<input class="golden-small" type="text" placeholder=".golden-small">
85-
<input class="golden-large" type="text" placeholder=".golden-large">
86-
</div><!-- /.controls -->
87-
```
52+
## Responsive
8853

89-
Use `.controls-row` for inline behavior.
9054

91-
```html
92-
<div class="row">
93-
<div class="span9">
94-
<div class="controls controls-row">
95-
<input class="golden-small" type="text" placeholder=".golden-small">
96-
<input class="golden-large" type="text" placeholder=".golden-large">
97-
</div><!-- /.controls-row -->
98-
</div>
99-
</div><!-- /.row -->
100-
```
10155

102-
## Responsive
103-
Like Bootstrap, you have to add another file to support responsive behaviors. To do so, simply include `golden-bootstrap-responsive.less` in `responsive.less`, compile and you're done.
56+
## Versionning
10457

105-
```
106-
// GOLDEN BOOTSTRAP RESPONSIVE
107-
// ------------------
108-
@import "golden-bootstrap/golden-bootstrap-responsive.less";
109-
```
58+
Golden Bootstrap follows the same versionning than Bootstrap, see [versionning](https://github.com/twbs/bootstrap?source=c#versioning).
11059

111-
Golden Bootstrap uses `@gridColumnWidth768`, `@gridGutterWidth768`, `@gridColumnWidth1200` and `@gridGutterWidth1200` values specified in bootstrap's `variables.less` to adapt itself to mediaqueries.
11260

11361
---
11462

@@ -117,7 +65,7 @@ Golden Bootstrap uses `@gridColumnWidth768`, `@gridGutterWidth768`, `@gridColumn
11765

11866
# Copyright and license
11967

120-
Copyright 2012 Philippe Dionne
68+
Copyright 2014 Philippe Dionne
12169

12270
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
12371

0 commit comments

Comments
 (0)