Wulf's Frontend

A starting point for Wulf's projects(Front End).

Getting started

Please follow each step:

Standalone compilation

Requires ruby, node.js and bundler: gem install bundler

Install dependencies:

  • bundle install
  • npm install
  • bower install

Then run make or make watch to compile CSS into css/

Use with your asset pipeline

Just drop the stylesheets directory into your usual stylesheets path (note the dependencies in Gemfile, package.json & bower.json).

Hologram - quick start

hologram init
=> This will create hologram_config.yml, _header.html, & _footer.html files. Tweak the config as needed.
If you see 'Warning: Cowardly refusing to overwrite existing hologram_config.yml', remove the existing hologram_config.yml & tweak the source on the config.

On the doc_assets/_header.html, update "<link rel="stylesheet" href="./your_stylesheet_here.css">"

If you want to run Hologram manually, you can exclude guard-hologram and run hologram instead. For more in depth information, go to Hologram's git page

Guard hologram

After installation for Guard hologram is finished, you can type guard init on terminal & to start the watch, type bundle exec guard

Sample Guardfile

guard "hologram", config_path: "hologram.yml" do

Modules ~ Information from Ben Smithett

Modules are the core of Style's architecture. A module:

  • Is defined in its own file (eg modules/_my_module.sass)
  • Is isolated, reusable & disposable.
  • Has no knowledge of its context (i.e. doesn't depend on styles from a particular parent element - it can be rendered anywhere)
  • Minimises its own depth of applicability so that it can safely contain other modules
  • Has no context-specific dimensions. Read Objects in Space for more on this.

Simple module

Here's what a simple module, /stylesheets/modules/_simple_widget.sass, might look like:

  color: goldenrod

Complex module

Here's a slightly more complex module, /stylesheets/modules/_comment.sass:

  color: fuchsia

  // State is applied with a second class...
    background: url(spinner.gif)

  // ...or with a data attribute
    background: url(spinner.gif)

// A modified comment
  @extend .comment
  font-weight: bold

// A submodule (some module that *must* be a child of .comment)
// Whatever is inside a submodule can usually be extracted out into its own module.
// In this case, .comment__avatar is a container for a separate .avatar module.
  margin-left: 20px
  width: 100px

Media queries

Media queries in CSS are for chumps. Use metaquery for mobile-first responsive modules:

  color: floralwhite

  .breakpoint-tablet &
    color: plum

  .breakpoint-desktop &
    color: burlywood


Style comes with a .grid module. It's just a Susy container. When you put modules inside a .grid, you can use Susy's functions & mixins to align your module to the grid.

There are a lot, but the main one you'll use is span:

  +span(3 of 12)

  +span(last 9 of 12)

See the included .page module for a responsive example.


Style is released under the MIT License