This repository has been archived by the owner. It is now read-only.
Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
css
img
js
Icon
LICENSE.txt
README.html
bower.json
humans.txt
ignore.txt
index.html

README.html

<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 &lt;body&gt; 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>