drewbolles / gotham

Starter Drupal theme using Sass & Susy
9 stars 1 forks source link

Gotham starter Drupal theme

A modern Drupal 7 starter theme. Built with Sass and Susy. Meant to be a starting point that developers can build off. Applies the SMACSS architecture and tries to adhear to Drupal's new CSS best practices.

Requirements

Install

  1. Download Gotham, place in sites/all/themes of a Drupal 7 site
  2. Navigate to the asset folder $ cd ~/PATH/TO/DRUPAL/sites/all/themes/gotham/assets/src
  3. Run NPM install for gulp packages $ npm i
  4. Run bower install for bower packages $ bower install
  5. Run Gulp to ensure process are working $ gulp
  6. Happy buildling!

Using Susy

Susy is a layout toolset that will provide you with the ability to create your own grids - symmetric, asymmetric, and isolation out of the box. It's incredibly powerful and useful. You can create multiple grids, have nested grids, or no grids and Susy will do all the math for you.

In Gotham, there's a Susy section in the /base/_vars.scss file. It reads:

/// Base Susy variables for theme
$susy: (
  columns: 12,
  gutters: .25,
  container: $site-width,
  use-custom: (
    clearfix: true,
  ),
);

/// The layout for the primary columns. Uses isolate to push / pull
$main-layout: layout(12 .25 isolate);

So by default, any use of Susy's span mixin will base it's math off 12 columns with 1/4 of a column as a gutter. The main layout variable defines a slightly different grid we use for the sidebar and content regions of the site. Change these variables, or create new layout variables, as you see fit. Read more about Susy

SassDoc

The Sass architecture has been commented to integreate with SassDocs. Once Gulp has been run, SassDoc will generate a documentation of the Sass archtiecture on the fly. Please visit /path/to/drupal/sites/all/themes/gotham/assets/sassdoc in a browser.

Recommended starting modules

These are the modules I recommend as an extended core for site development.

drush dl views views_bulk_operations entity entitycache entityreference entity_view_mode inline_entity_form ds field_group token eck admin_menu ctools rules devel webform pathauto globalredirect admin_views imageapi_optimize module_filter