Rock Hammer
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.
1. Getting started with Rock Hammer
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:
_imports.scss
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.
lte-ie8.scss
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.
_config.scss
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:
1. NAVIGATION
- Site navigation
- Basic navbar
- Breadcrumbs
- Pagination
- Pager
2. MODULES
- Hero
- Alerts
- Wells
3. FORMS
- Inputs
- Help
- Buttons
4. TABLES
5. MISC
2. Rock Hammerâs structure
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 values included. Use and change them as you need in conjunction with the media-query-bp mixin within your SASS selectors. 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 _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.
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
- Uncomment the pattern youâve chosen in _scripts.html
3. Using Only the Build Folder
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?
CSS Preprocessor Options
- SCSS
Author
Andy Clarke
Default theme design
Sue Davies
Javascript
Aaron Allport