Get started styling

1. You need to have Grunt installed, nodejs and Compass

2. Go to the theme folder theme/bb/ and do a npm install to build the grunt necessary files.

3. Then grunt to keep the css updated and javascript minified.

Reinstall grunt packages

sudo rm -rf node_modules && npm cache clean && npm i

Drupal 7 Starter Theme

Version: 3.2.0

Contributors:

Matt Banks ( @mattbanks / kernelcreativemedia.com / mattbanks.me )

Summary

Drupal 7 Starter Theme for use as a starting template for building custom themes. Uses Compass/SCSS, HTML5 Boilerplate 4 with Modernizr and Normalize.css, and Grunt for all tasks.

Usage

The theme is setup to use Grunt to compile Compass/SCSS, lint, concatenate and minify JavaScript (with source maps), optimize images, and LiveReload the browser (with extension), with flexibility to add any additional tasks via the Gruntfile. Alternatively, you can use CodeKit or whatever else you prefer to compile the SCSS and manage the JavaScript.

Rename folder to your theme name, rename .info file to your theme name, change the scss/style.scss intro block to your theme information. Open the theme directory in terminal and run npm install to pull in all Grunt dependencies. Run grunt to execute tasks. Code as you will. If you have the LiveReload browser extension, it will reload after any SCSS or JS changes. To optimize images, run grunt imagemin.

• Compile scss/style.scss to style.css (all paths defined in config.rb for Compass)
• Compile scss/editor-style.scss to editor-style.css
• Concatenate and minify all plugins in js/vender and js/source/plugins.js to js/plugins.min.js
• Minify js/source/main.js to js/main.min.js
• ??
• Profit

Deployment

The theme includes deployments via grunt-rsync. The Gruntfile includes setups for staging and production - edit your paths and host, then run grunt rsync:staging or grunt rsync:production to deploy your files via rsync.

Features

1. Normalized stylesheet for cross-browser compatibility using Normalize.css version 2 (IE8+ only)
2. Easy to customize
3. Flexible grid from Chris Coyier
4. Media Queries for mobile and tablets ready to populate
5. Compass & SCSS with plenty of mixins ready to go
6. Much much more

Suggested Modules

• Chaos Tools
• CKEditor
• Google Analytics
• IMCE
• jQuery Update
• Meta Tags
• Pathauto
• Token
• Transliteration
• Views
• Webform
• XML Sitemap

Changelog

Version 3.2.0

• update grunt dependencies
• update spacing in functions

Version 3.1

• tweak Gruntfile.js to fix LiveReload issues and generate source maps for both main.js and plugins.js
• update to normalize v2.1.2
• optimizations and tweaks here and there

Version 3.0

• reorganize code in assets folder for fonts, images, js and scss
• setup Gruntfile to use Grunt for all compiling, concatenation and minification
• add deployments via rsync
• update to normalize v2.1.0
• general code cleanup

Version 2.5.1

• Add grid column sizes I typically use, general code cleanup

Version 2.5

• Renamed jquery.functions.js to main.js
• Renamed _widgets.scss to _blocks.scss
• Add flexible grid SCSS
• Updated to HTML5 Boilerplate 4
• Updated to Normalize.css 2
• Updated to Modernizr 2.6.2
• Include @media bubbling mixins, via Chris Coyier
• Add GPL license info to style.scss
• Add border-box support for everything, including pseudo elements, because it makes the world a better place
• Other bug fixes and changes

Version 2.0

• added Compass and SCSS as preprocessor files
• upgraded modernizr to 2.5.2
• renamed script.js to jquery.functions.js
• theme .info file points to minified versions of plugins.js and jquery.functions.js
• tweak html.tpl.php using latest HTML5 Boilerplate
• use aside instead of div for sidebars in page.tpl.php

Version 1.0

• initial version

Credits

Without these projects, this Drupal Starter Theme wouldn't be where it is today.

• HTML5 Boilerplate
• Normalize.css
• SASS / SCSS
• Compass
• Grunt