What is Golden?
Golden is a CSS framework built using the Golden ratio. It can be used independently, or incorporated into other CSS frameworks like Twitter Bootstrap.
The Golden ratio has been found uncoincidentally frequently in nature and math. As a result of its apparent significance and pleasing aesthetic qualities, it has been used by humans in art and design for thousands of years.
Getting Started
1. Download Golden Download minified Golden
You can also clone the source via Github.
2. Include Golden
Include Golden in your project. You can copy the basic template below to get started fast.
Example
Hello, world!
<!DOCTYPE html>
<html>
<head>
<title>Golden Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Golden -->
<link href="css/golden.min.css" rel="stylesheet">
</head>
<body class="golden">
<h1>Hello, world!</h1>
</body>
</html>
The .golden class can be moved to apply the Golden styles selectively.
Example
<div>Stuff inside here is not Golden</div>
<div class="golden">Stuff inside here is Golden!</div>
The .golden-typography class can be used seperately of the .golden class to only apply Golden typography.
Example
<div class="golden-typography">
Stuff inside here will have Golden typography and that's it!
</div>
3. Be Golden
Code! Check out the docs to see what's possible.
Customize Golden
Before digging into the Golden source, it's important to understand how Golden is put together. Golden's architecture makes it easy to customize Golden for a new project, or include Golden in an existing project.
Understanding Golden
Golden is comprised of two parts, a Bootstrap core and a custom set of Golden modules. This is reflected in the Golden file structure.
golden/
golden/
├── golden.less
├── bootstrap/
│ └── Bootstrap modules
└── golden/
└── Golden modules
Inside the /bootstrap directory is a clean copy of Twitter Bootstrap. All of Golden's revisions to Bootstrap are done by overriding variables, and all of Golden's extensions to Bootstrap are done in external Golden modules. This helps preserve modularity and makes incorporating Golden into a pre-existing Bootstrap project much simpler.
Golden overrides Bootstrap variables with Golden variables that are themselves based on Bootstrap variables. This is done so that Golden's overriding styles can be rooted under the .golden class and then selectively applied within a pre-existing project. If you want Golden's styles to be applied globally you can eliminate unnecessary code by removing the .golden wrapper.
golden.less
// Include Bootstrap variables
@import "./bootstrap/variables.less";
// Include modules that are unaffected by Golden
// ...
// Include Golden variables
@import "./golden/variables.less";
// Include Golden modules
// ...
// Include Golden Bootstrap overrides under .golden
// to prevent clashing with pre-existing styles
.golden {
@import "./golden/bootstrap-variable-overrides.less";
// Include Bootstrap modules
// ...
}
Customizing Golden
Customizing Golden is as simple as customizing Bootstrap. The first step is to edit the variables defined in bootstrap/variables.less. The following example changes the base font size from the default 14px to a slightly larger 16px.
bootstrap/variables.less
// ...
// @font-size-base: 14px;
@font-size-base: 16px;
// ...
The second step is to add the Bootstrap modules you want as is to the bootstrap/ directory and include them in golden-bootstrap.less. The default version of Golden only includes a subset of the Bootstrap modules, but more can be added from the Bootstrap source. The following example adds the Bootstrap alerts.less module to Golden.
golden-bootstrap.less
// ...
@import "./bootstrap/alerts.less";
// ...
The final step is to recompile Golden.
Terminal
# Uncompressed
$ lessc golden.less golden.css
# Compressed
$ lessc --yui-compress golden.less golden.min.css
Including Golden
If you're trying to include Golden in a project that already includes Bootstrap then include the Golden variables and Golden modules after your variables.less file. If you also want the Golden Bootstrap overrides then additionally include golden/bootstrap-variable-overrides.less before you include any Bootstrap modules.
your-custom-styles.less
@import "./your-custom-variables.less";
@import "./golden/variables.less";
@import "./golden/mixins.less";
@import "./golden/grid.less";
@import "./golden/content.less";
// Include your custom modules
// ...
@import "./golden/bootstrap-variable-overrides.less";
// Include Bootstrap modules
// ...
If you're trying to include Golden in a project that does not already include Bootstrap then everything is the same except you have in include bootstrap/variables.less first and you don't need the Golden Bootstrap overrides.
your-custom-styles.less
@import "./bootstrap/variables.less";
@import "./your-custom-variables.less";
@import "./golden/variables.less";
@import "./golden/mixins.less";
@import "./golden/grid.less";
@import "./golden/content.less";
// Include your custom modules
// ...
Grid System golden/grid.less
Golden extends the Bootstrap grid system you're already comfortable with by adding containers and columns with proportions based on the Golden ratio. Note that the Golden grid system is fully compatible and non-destructive towards the Bootstrap grid system.
The Golden grid system follows a predictable and intuitive naming convention for classes, .golden-[element]-[screen-size]-[element-size]. Golden uses the existing Bootstrap screen sizes, xs, sm, md, and lg, to set responsive breakpoints for resizing content. Golden uses two new element sizes, wide and narrow, whose widths are related by the Golden ratio. To see the Golden grid system in action you will need to resize your browser.
Containers .golden-container
The Golden container is a centered div with a golden relationship between it's width and left and right margins. It also incorporates media queries to resize for different devices.
Example
<div class="golden-container">...</div>
The Golden container can be customized by changing the class to something in the form of .golden-container-[screen-size]-[container-size]. On devices smaller than the given screen-size, the Golden container will extend to 100% of the available width.
The following example will create a wide Golden container on sm devices and above. On xs devices the container will have a width of 100%.
Example
<div class="golden-container-sm-wide">...</div>
The Golden container customization classes can be combined for even greater expressiveness.
The following example will create a wide Golden container on sm and md devices, and a narrow Golden container on lg devices and above. On xs devices the container will have a width of 100%.
Example
<div class="golden-container-sm-wide golden-container-lg-narrow">...</div>
Columns .golden-col
Golden adds two new columns, wide and narrow, whose relative widths are related by the Golden ratio. The two types of columns are meant to be used together, so a wide columns and a narrow column will always add up to 100% of the available width. Similar to Bootstrap columns, the Golden columns will collapse at smaller screen sizes.
The following example shows two Golden columns that combine to take up 100% of the available width, and collapse on screen sizes smaller than md.
Example
<div class="golden-col-sm-wide">...</div>
<div class="golden-col-sm-narrow">...</div>
Golden column classes can be mixed and matches for increased expressiveness.
The following example will collapse on xs devices, have a wide column first on sm devices, and have a narrow column first md devices and above.
Example
<div class="golden-col-sm-wide golden-col-md-narrow">...</div>
<div class="golden-col-sm-narrow golden-col-md-wide">...</div>
Golden columns can be safely nested within one another.
The following example shows a second wide and narrow Golden column nested within the first wide Golden column.
Example
<div class="golden-col-sm-wide">
<div class="golden-col-md-wide">...</div>
<div class="golden-col-md-narrow">...</div>
</div>
<div class="golden-col-sm-narrow">...</div>
Golden columns also play well with Bootstrap's columns.
The following example shows a wide and narrow Golden column nested within a Bootstrap column.
Example
<div class="col-sm-6">
<div class="golden-col-md-wide">...</div>
<div class="golden-col-md-narrow">...</div>
</div>
<div class="col-sm-6">...</div>
Colors
Greys
Golden provides a gray scale with proportions of pure white and pure black based on the Golden ratio. To access the Golden gray variables you must include golden/variables.less in your project.
Example
@import "./golden/variables.less";
.golden-gray-background {
background-color: @golden-gray;
}
...
Typography bootstrap/type.less
The Golden typography is derived from the @font-size-base variable in bootstrap/variables.less. By default this font size is 14px. Golden uses this value to create custom line heights and widths that are re-used in other components for margin and padding.
Due to the importance of typography, it can be accessed independently from the rest of the Golden framework through the .golden-typography class.
Much of the Golden typography was inspired from a brilliant blog post which I suggest reading if you want to understand the math in greater detail.
Additionally, the Golden typography utilizes the Golden colored gray scale. The default text color is a dark shade of gray related to both pure white and pure black by the Golden ratio.
Headings and Subheadings
Golden typography includes all HTML headings, and a small tag for creating subheadings. Each heading is related to the base font size by progressively larger powers of the Golden ratio. Each subheading is related to it's heading by the Golden ratio. Additionally, the color of each subheading is related to the color of its heading by the Golden ratio.
Example
Golden h1 Subheading
Golden h2 Subheading
Golden h3 Subheading
Golden h4 Subheading
Golden h5 Subheading
Golden h6 Subheading
<h1>Golden h1 <small>Subheading</small></h1>
<h2>Golden h2 <small>Subheading</small></h2>
<h3>Golden h3 <small>Subheading</small></h3>
<h4>Golden h4 <small>Subheading</small></h4>
<h5>Golden h5 <small>Subheading</small></h5>
<h6>Golden h6 <small>Subheading</small></h6>
Paragraphs
Golden's default font-size is 14px and default line-height is 1.618. This is applied to each element with the .golden class, and all paragraphs. Additionally, all paragraphs receive a bottom margin of half their computed line-height, which is 11px by default.
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis auctor vestibulum. Maecenas suscipit vehicula magna nec rutrum. Proin eleifend tellus nec nunc interdum, nec varius ipsum eleifend. In tincidunt felis a felis porta eleifend id at enim. Aenean eu arcu adipiscing, aliquet turpis facilisis, scelerisque dui. Vestibulum sed nisl eu elit fringilla dictum in eget neque.
Etiam et vestibulum quam. Maecenas ullamcorper mollis neque eget eleifend. Donec pulvinar eros sed lorem dignissim, sit amet luctus sapien gravida. Sed commodo ullamcorper elit, id cursus velit feugiat eget. Praesent a purus at dolor porttitor pellentesque. Sed eros libero, vehicula eget magna vitae, fermentum vehicula nisi.
<p>...</p>
Golden also provides some useful modifier classes. Make text stand out by adding the .lead class to increase the font-size by a multiple of the Golden ratio. Add indentation by adding the .full-indent or .half-indent class. The size of the indentation is based on the Golden ratio.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis auctor vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis auctor vestibulum.
<p class="lead">...</p>
<p class="full-indent">...</p>
<p class="half-indent">...</p>
Content golden/content.less
Golden also provides a .golden-content class which sets an ideal line width based on the base font size and line height.
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis auctor vestibulum. Maecenas suscipit vehicula magna nec rutrum. Proin eleifend tellus nec nunc interdum, nec varius ipsum eleifend. In tincidunt felis a felis porta eleifend id at enim. Aenean eu arcu adipiscing, aliquet turpis facilisis, scelerisque dui. Vestibulum sed nisl eu elit fringilla dictum in eget neque.
Etiam et vestibulum quam. Maecenas ullamcorper mollis neque eget eleifend. Donec pulvinar eros sed lorem dignissim, sit amet luctus sapien gravida. Sed commodo ullamcorper elit, id cursus velit feugiat eget. Praesent a purus at dolor porttitor pellentesque. Sed eros libero, vehicula eget magna vitae, fermentum vehicula nisi.
<p class="golden-content">...</p>
This ideal line width can be applied using columns by adding the .columns-* class. Note that these columns collapse when the containing element isn't wide enough to support them. You may have to resize your browser to see them.
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis auctor vestibulum. Maecenas suscipit vehicula magna nec rutrum. Proin eleifend tellus nec nunc interdum, nec varius ipsum eleifend. In tincidunt felis a felis porta eleifend id at enim. Aenean eu arcu adipiscing, aliquet turpis facilisis, scelerisque dui. Vestibulum sed nisl eu elit fringilla dictum in eget neque. Etiam et vestibulum quam. Maecenas ullamcorper mollis neque eget eleifend. Donec pulvinar eros sed lorem dignissim, sit amet luctus sapien gravida. Sed commodo ullamcorper elit, id cursus velit feugiat eget. Praesent a purus at dolor porttitor pellentesque. Sed eros libero, vehicula eget magna vitae, fermentum vehicula nisi. Maecenas tristique nec dolor quis mollis. Integer dictum a elit non placerat. Duis dignissim nulla est, sed ullamcorper tortor feugiat id. Aliquam erat justo, sodales eget ipsum non, consectetur adipiscing risus. Maecenas facilisis porttitor nulla a pharetra. Suspendisse eu turpis odio. Cras pulvinar nisl est, ac suscipit felis congue vel. Donec eget imperdiet arcu, quis sollicitudin erat. Suspendisse a dui nec mauris ullamcorper viverra id ac massa. Integer aliquet aliquam lacus, non laoreet leo congue a. Fusce vitae metus risus. Nulla ullamcorper nisi at venenatis mollis. Aenean at odio vulputate, consequat velit at, dictum dui. Aenean ut tincidunt nunc.
<p class="golden-content columns-2">...</p>
Typographical Elements
Golden includes all the other typographical elements that Bootstrap includes, but without any additional customizations beyond what's already been discussed. These elements will, for the most part, inherit the base font size, line height, and Golden gray scale. They will also have an added margin-bottom based on the line height, to help keep adjacent elements nicely spaced out.
The following are some examples of the Bootstrap typographical elements that Golden includes. See Twitter Bootstrap for a full list of supported elements, more documentation, and examples.
Code bootstrap/code.less
Golden includes Bootstrap's classes for styling code.
Example
Wrap inline snippets of code with <code>.
<code>...</code>
Example
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<pre>...</pre>
List Groups bootstrap/list-group.less
Golden includes Bootstrap's specially styled .list-group class.
Example
<ul class="list-group">
<li class="list-group-item">Apples</li>
<li class="list-group-item">...</li>
</ul>
Tables bootstrap/tables.less
Golden includes Bootstrap's styled tables.
Example
| Framework | Framework | Creator | Test | Test Test |
|---|---|---|---|---|
| 1 | Bootstrap | Test | Test Test | |
| 2 | Golden | Joe | Test | Test Test |
| 3 | Other | The bro | Test | Test Test |
<table class="table table-hover">...</table>
Forms bootstrap/forms.less
Golden includes Bootstrap's forms, and incorporates the Golden typography by lightly skinning the sizing, spacing, and coloring. I've included a basic example to give you a general idea of how it looks, but I would suggest reading Twitter Bootstrap for more documentation and examples.
Example
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">...</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Golden forms play well with Golden columns.
Example
<div class="golden-col-xs-wide">
<input type="text" class="form-control" placeholder="...">
</div>
<div class="golden-col-xs-narrow">
<input type="text" class="form-control" placeholder="...">
</div>
Buttons bootstrap/buttons.less
Golden includes button styles that incorporate the Golden ratio. The text within each button is related to the base font size by multiples of the Golden ratio. The text within each button is also related to the overall height of the button by the Golden ratio. Finally, the relative heights of each size of button are related by the Golden ratio.
Example
<button type="button" class="btn btn-primary btn-lg">...</button>
<button type="button" class="btn btn-default btn-lg">...</button>
<button type="button" class="btn btn-primary">...</button>
<button type="button" class="btn btn-default">...</button>
<button type="button" class="btn btn-primary btn-sm">...</button>
<button type="button" class="btn btn-default btn-sm">...</button>
<button type="button" class="btn btn-primary btn-xs">...</button>
<button type="button" class="btn btn-default btn-xs">...</button>
Golden buttons also play well with Golden columns.
Example
<div class="golden-col-xs-wide">
<button type="button" class="btn btn-primary btn-lg btn-block">...</button>
</div>
<div class="golden-col-xs-narrow">
<button type="button" class="btn btn-default btn-lg btn-block">...</button>
</div>
Components
For convenience, Golden includes some Bootstrap components.
Panels bootstrap/panels.less
Golden's .panel applies a basic border and padding.
Example
<div class="panel panel-default">
<div class="panel-heading">
Panel Heading
</div>
<div class="panel-body">
Panel Body
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
Wells bootstrap/wells.less
Golden's .well applies an inset effect.
Example
<div class="well">
Well
</div>
Mixins golden/mixins.less
Golden comes packaged with some useful mixins for incorporating the Golden ratio into your own designs.
Golden Rectangle
The Golden rectangle is a rectangle whose width and height are related by the Golden ratio. Make Golden rectangles with the .make-golden-rectangle mixin. The first argument specifies the long side of the Golden rectangle and the second argument specifies the length of the long side.
The following example shows two Golden rectangles, the first based on a starting width and the second based on a starting height.
Example
// in your-custom-styles.less
.golden-rectangle-example1 {
.make-golden-rectangle(width; 200px);
}
.golden-rectangle-example2 {
.make-golden-rectangle(height; 200px);
}
Golden Images
Golden images is a wrapper that crops images into having Golden proportions. Make Golden images with the .make-golden-image mixin. The first two arguments are the same as the Golden rectangle. The third and fourth argument specify the top and left offsets used for positioning the image.
The following example shows three 300x300 px images cropped to be different sized Golden images.
Example
// in your-custom-styles.less
.golden-image-example1 {
.make-golden-image(width; 200px; -50px; -87px);
}
.golden-image-example2 {
.make-golden-image(width; 100px; -82px; -119px);
}
.golden-image-example3 {
.make-golden-image(width; 50px; -82px; -134px);
}