This repository has been archived by the owner on Jan 14, 2018. It is now read-only.
/
README.html
163 lines (112 loc) · 6.86 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<h1><a href="http://stuffandnonsense.co.uk/projects/rock-hammer/">Rock Hammer</a></h1>
<p><a href="http://stuffandnonsense.co.uk/projects/rock-hammer/">Rock Hammer</a> is dedicated to <a href="http://beardyscientist.com">Alex Clarke</a>, a real life geologist.</p>
<p>What’s Rock Hammer? It’s a curated project library for <a href="http://hammerformac.com">Hammer For Mac</a> designed and developed by <a href="http://stuffandnonsense.co.uk">Stuff and Nonsense</a> and friends. Rock Hammer contains baseline typography, styling for common HTML elements including images, forms and tables, as well as navigation, responsive modules and widgets. These are the foundation for every project we start. Rock Hammer can be used as a design/style template or pattern primer or as the foundation for developing a responsive website.</p>
<p>Clone the repo, <code>git clone git@github.com:malarkey/Rock-Hammer.git</code>, (whatever that means) or <a href="https://github.com/malarkey/rock-hammer/zipball/master">download the latest release</a>.</p>
<h2>1. Getting started with Rock Hammer</h2>
<p>Rock Hammer works with <a href="http://hammerformac.com">Hammer For Mac</a>. If you develop in Windows or you don’t (yet) use Hammer, skip to the section ‘Using Only the Build Folder‘ below.</p>
<p>For styling, Rock Hammer uses <a href="http://sass-lang.com">Sass</a>. Hammer For Mac compiles Sass into CSS so you won’t need the Terminal. In most cases, you’ll need to edit just three .scss files to get started:</p>
<h3>_imports.scss</h3>
<p>Configure which Sass partials you need for your individual project. We’ve included some of the most useful parts of Bootstrap, but if you don’t need styles for a carousel or a hero box, there’s no sense in including them. Comment out the partials you don’t need with // at the the beginning of the line on which that partial appears.</p>
<h3>lte-ie8.scss</h3>
<p>For versions of Microsoft Internet Explorer that didn’t implement CSS3 Media Queries, this file contains compiled styles from all stylesheets, including those inside Media Queries. These are served up using a completely configurable, conditional class to identify those styles and only apply them to Internet Explorer 8 and before. Use this file to also serve styles specifically to Internet Explorer 8 and before.</p>
<h3>_config.scss</h3>
<p>You’ll do most of your work in this config file; everything from setting typefaces and choosing colours to defining styles for HTML elements and widgets. Follow steps one to four for the broadest brushstrokes, then make finer strokes by defining styles for popular interface elements:</p>
<h3>1. NAVIGATION</h3>
<ul>
<li>Site navigation </li>
<li>Basic navbar </li>
<li>Breadcrumbs </li>
<li>Pagination</li>
<li>Pager</li>
</ul>
<h3>2. MODULES</h3>
<ul>
<li>Hero</li>
<li>Alerts</li>
<li>Wells</li>
</ul>
<h3>3. FORMS</h3>
<ul>
<li>Inputs</li>
<li>Help </li>
<li>Buttons</li>
</ul>
<h3>4. TABLES</h3>
<p>### 5. MISC</p>
<h2>2. Rock Hammer’s structure</h2>
<p>Rock Hammer includes Sass partials for the three components of ‘design atmosphere:’</p>
<p>2.1. <strong>Colour</strong>: Emotion and interaction vocabulary.</p>
<p>2.2. <strong>Typography</strong>: Typefaces, type treatments and white space.</p>
<p>2.3. <strong>Texture</strong>: Decorative elements, line-work, patterns and shapes.</p>
<p>2.4. <strong>Partials</strong>:</p>
<ul>
<li>Site-wide styles</li>
<li>Misc HTML elements</li>
<li>Placeholders for Modernizr classes</li>
<li>@2x images</li>
</ul>
<p>2.5. Utilities such as mixins, normalise and reset and print styles.</p>
<p>2.6. Layout for structural styles. Use it in combination with breakpoint files _bp2 – bp6 as required.</p>
<p>2.7. Speaking of breakpoints, there are six placeholder breakpoint values included. Use and change them as you need in conjunction with the media-query-bp mixin within your SASS selectors. The defaults are:</p>
<ul>
<li>$bp2 480px 30em </li>
<li>$bp3 600px 37.5em </li>
<li>$bp4 768px 48em </li>
<li>$bp5 992px 62em </li>
<li>$bp6 1382px 86.375em </li>
</ul>
<p>2.8. Matching HTML partials and Sass partials for forms, tables, navigation and other commonly used interface elements derived from Bootstrap. If there are Bootstrap components you use regularly, add them to the partials folder. Don’t forget to reference them from _imports.scss too. Certain Bootstrap plugins require JavaScript to work correctly, so ensure that the required JavaScript files are referenced correctly from the _scripts.html partial. There are a couple of dependencies with Bootstrap plugins, but these are explained in the comments found in _scripts.html.</p>
<p>2.9. Matching HTML partials and Sass partials for responsive navigation patterns. We’ve included three popular patterns but feel free to add more. Brad Frost’s <a href="http://bradfrost.github.com/this-is-responsive/patterns.html#navigation">Responsive Patterns</a> is a cracking place to start.</p>
<ul>
<li>_navigation-footer-anchor.scss</li>
<li>_navigation-left-nav-flyout.scss</li>
<li>_navigation-toggle.scss</li>
</ul>
<p>To use these navigation patterns: </p>
<ul>
<li>Copy the HTML from your chosen pattern into the <body> of a new template</li>
<li>Uncomment the pattern you’ve chosen in rock-hammer.scss</li>
<li>Uncomment the pattern you’ve chosen in _scripts.html</li>
</ul>
<h2>3. Using Only the Build Folder</h2>
<p>We built Rock Hammer to work with <a href="http://hammerformac.com">Hammer For Mac</a>. It’s great. You should try it. But if you develop on Windows or haven’t yet used Hammer:</p>
<ol>
<li>
<p>First, you’re weird. Nice. But weird. Sorry.</p>
</li>
<li>
<p>You can still use Rock Hammer’s compiled HTML, CSS and Javascript. It won‘t be as good as developing from the original Rock Hammer, but what are you going to do?</p>
</li>
</ol>
<h3>CSS Preprocessor Options</h3>
<ul>
<li>SCSS</li>
</ul>
<h2>Author</h2>
<p><strong>Andy Clarke</strong></p>
<ul>
<li>http://twitter.com/malarkey</li>
<li>http://github.com/malarkey</li>
<li>http://stuffandnonsense.co.uk</li>
</ul>
<h3>Default theme design</h3>
<p><strong>Sue Davies</strong></p>
<ul>
<li>http://twitter.com/suehayesdavies</li>
</ul>
<h3>Javascript</h3>
<p><strong>Aaron Allport</strong></p>
<ul>
<li>http://twitter.com/aaronallport</li>
<li>https://github.com/aaronallport</li>
<li>http://www.aaronallport.com</li>
</ul>
<h3>Components</h3>
<ol>
<li><a href="http://stuffandnonsense.co.uk/projects/320andup">320 and Up</a></li>
<li><a href="http://twitter.github.com/bootstrap">Bootstrap</a></li>
<li><a href="http://jquery.com">jQuery</a></li>
<li><a href="http://modernizr.com">Modernizr</a></li>
<li><a href="http://bradfrost.github.com/this-is-responsive/patterns.html">Responsive Patterns</a></li>
<li><a href="http://selectivizr.com">Selectivizr</a></li>
</ol>