hagenburger

source: styles.scss

javascript-before:
  - http://code.jquery.com/jquery-1.11.1.min.js
  - /assets/angular-1.2.3.js
  - |
    $(function() {
      alert("Hello World!");
    }

hagenburger

# Functions

```
@colorfuncs
foo()
```

hagenburger

config.assets.precompile.clear
precompiled_extensions = %w(.html .css .js .png .gif .jpg .svg .woff .woff2 .eot .ttf)
config.assets.precompile.push(Proc.new { |path|
  File.extname(path).in?(precompiled_extensions) and not path =~ /^_|\/_/
})

hagenburger

[alias]
  ci = commit -pm
  last = log -1 HEAD
  st = status
  nb = checkout -b
  co = checkout
  cog = "!cog() { git checkout `git branch|grep $1`; }; cog"
  cp = cherry-pick
  amend = commit --amend -p -CHEAD
  rb = rebase

hagenburger

Adding CSS to the Style Guide

SCSS

@css:
.example {
  color: red;
}

hagenburger

%html
  %head
    = style_css
    = style_javascript
  = style_template :layout do
    = style_template :navigation, root_url: "/", items: [{ url: "/", text: "Home"}, { url: xyz_path(@abc), text: "XYZ" }])
    = style_template :cover, date: "...", location: "..."
    = style_template :team, items: data.team
    = style_template :footer, ...

hagenburger

$name: "world";

// works:
.#{$name} {
  test: test;
}

// fails:
.-#{$name} {
  test: test;

hagenburger

=sprite-image($file)
  background: sprite-image($file)
  height: image-height($file)
  width: image-width($file)


.star
  +sprite-image("icons/star.png")

hagenburger

/*
 * 4 new mixins for sprite support in lemonade:
 * 
 * (1) Sprite classes
 * (2) Sprite classes with dimensions
 * (3) Sprite classes generated from folder
 * (4) Sprite classes with dimensions generated from folder
 * 
 * Source at: http://github.com/hagenburger/lemonade/blob/master/stylesheets/lemonade.scss
 * Don't forget to `gem install lemonade`

hagenburger

run "cd #{release_path} && rake update_stylesheets"