Rock Hammer is dedicated to Alex Clarke, a real life geologist.
What’s Rock Hammer? It’s a curated project library for Hammer For Mac designed and developed by Stuff and Nonsense 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.
Clone the repo, git clone git@github.com:malarkey/Rock-Hammer.git, (whatever that means) or download the latest release.
Rock Hammer works with Hammer For Mac. If you develop in Windows or you don’t (yet) use Hammer, skip to the section ‘Using Only the Build Folder‘ below.
For styling, Rock Hammer uses Sass. 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:
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 //
For versions of Microsoft Internet Explorer that didn’t implement CSS3 Media Queries, this file contains compiled styles from all stylesheets inside Media Queries. Use this file to also serve styles specifically to Internet Explorer 8 and before. We’re looking into a more streamlined Sass solution. One that doesn’t require a degree in geology.
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:
- Site navigation
- Basic navbar
- Breadcrumbs
- Pagination
- Pager
- Hero
- Alerts
- Wells
- Inputs
- Help
- Buttons
Rock Hammer includes Sass partials for the three components of ‘design atmosphere:’
2.1. Colour: Emotion and interaction vocabulary.
2.2. Typography: Typefaces, type treatments and white space.
2.3. Texture: Decorative elements, line-work, patterns and shapes.
2.4. Partials:
- Site-wide styles
- Misc HTML elements
- Placeholders for Modernizr classes
- @2x images
2.5. Utilities such as mixins, normalise and reset and print styles.
2.6. Layout for structural styles. Use it in combination with breakpoint files _bp2 – bp6 as required.
2.7. Speaking of breakpoints, there are six placeholder breakpoint files included. Use them as you need. The defaults are:
- $bp2 480px 30em
- $bp3 600px 37.5em
- $bp4 768px 48em
- $bp5 992px 62em
- $bp6 1382px 86.375em
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 rock-hammer.scss too.
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 Responsive Patterns is a cracking place to start.
- _navigation-footer-anchor.scss
- _navigation-left-nav-flyout.scss
- _navigation-toggle.scss
To use these navigation patterns:
- Copy the HTML from your chosen pattern into the of a new template
- Uncomment the pattern you’ve chosen in rock-hammer.scss
We built Rock Hammer to work with Hammer For Mac. It’s great. You should try it. But if you develop on Windows or haven’t yet used Hammer:
-
First, you’re weird. Nice. But weird. Sorry.
-
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?
- SCSS
Andy Clarke
Sue Davies
Aaron Allport