Scaffold styles, variables and structure for Bourbon/Neat projects.

StartMeUp is made to work alongside a CSS reset; not replace one. The suggested reset is Normalize.

Requirements

  • Sass 3.0+
  • Bourbon 2.0+
  • Neat
  • Ruby 1.9.3+ (required to install StartMeUp from the command line)

Installation

  1. Install the StartMeUp gem using the RubyGems package manager:
  gem install startmeup

  1. Install Bourbon (required) and Neat (optional).

  2. Install the StartMeUp library into the current directory by running the following command at the command-line. If you’re using Ruby on Rails, run the command in app/assets/stylesheets:

  startmeup install

A base directory will be generated which contains all of the StartMeUp files.

  1. Import StartMeUp after Bourbon in your application.css.sass or main manifest file. All additional stylesheets should be imported below StartMeUp.
  @import bourbon
  @import base/base
  1. When using Neat, uncomment the following line in _base.sass:
  @import grid-settings

And import Neat after StartMeUp in your application.css.sass or main manifest file:

  @import bourbon
  @import base/base
  @import neat

  // All other imports

If you want to use Neat functions in StartMeUp, you can @import grid-settings before Neat, remove @import grid-settings from _base.sass and import the rest of StartMeUp after. For example:

  @import bourbon
  @import base/grid-settings
  @import neat
  @import base/base

  // All other imports

Using StartMeUp

Sass structure & default style

The StartMeUp directory should contain styles for all the basic elements used throughout the project. Customise StartMeUp for your site as you see fit.

Variables

This houses all variables that are used, or will be used, in more than one file in your site. Variable names in StartMeUp that are used outside of the variables file start with $base to indicate that they are the most basic variables.

Grid settings

Variables specifically created for Neat resets and breakpoints. To be used, these need to be imported separately from the rest of your base file above Neat in your main stylesheet. Otherwise just remove the file.

Extra media query mixins, and Omega Reset mixin are included.

Typography

All type is based on $base-font-size which is set to 1em (16px) by default. The spacing around type is based on $base-line-height so as to keep a semi-baseline grid. All sizes are scaled up or down by a factor of 0.25. Modular Scale is used throughout for harmonious sizes.

Lists

All lists have stripped out styles. No bullets, no left padding. To add back the expected browser default styles add @extend %default-ul; or @extend %default-ol; to the <ul> or <ol> respectively. A utility class .bulleted will add bullets back in to lists.

Forms

Adds basic styles all form elements. The variables at the top of the file all inherit from the variables file but make it really easy to be overridden.

Buttons

Basic style for button and input[type="submit"]. Base button styles can be changed by modifying the %button extend in base/extends/_button.sass. Some utilty classes such as .small, .large, .destructive and .wide are included.

Panel

A simple pullout box style can be added with .panel.

Styleguide

Helper declarations for a styleguide page (seperate gem to be developed).

Flash

Basic Rails flash styles.

Credits

StartMeUp is a wholesale ripoff of Bitters by Thoughtbot. I made it to learn how to make a gem.

Bitters is maintained and funded by thoughtbot, inc.