Susy Tutorial

Posted by Derek Banas on Apr 29, 2015 in Ruby on Rails | 0 comments

Welcome to my Susy Tutorial. Susy is an awesome tool / framework we can use to build web grid frameworks. You define the settings for the grid and then easily place your elements using easy to understand commands. Here I’ll cover most everything you’ll need to start learning it today.

You’ll need to have Ruby installed and I have a video on Ruby here. Because I use Compass and Sass in this tutorial you may also like to learn more about both here.

If you like videos like this, it helps when you tell Google with a click here [googleplusone]

Code From the Video

Susy Installation Notes

1. Install what we need a. Install Ruby like I show here b. Use Ruby 2.2 : rvm use --default 2.2 c. Show Gems : gem list d. gem install compass --pre 1. Installs sass-3.4.13 & compass-1.1.0.alpha.3.gem e. Install Susy 2.2.2 : gem install susy f. gem install breakpoint g. gem install normalize h. gem outdated i. gem update j. Make sure you have 1. compass (1.1.0.alpha.3), sass (3.4.13), and susy (2.2.2) k. Specify the gems to use with bundler 1. gem install bundler 2. bundle init 3. Edit the Gemfile a. # A sample Gemfile source "https://rubygems.org" # gem "rails" gem 'compass', '~>1.1.0.alpha.3' gem 'sass', '3.4.13' gem 'susy', '2.2.2' gem 'breakpoint', '2.5.0' gem 'normalize', '0.0.3' # Using Bundler, you need to run `bundle exec compass watch` # instead of simply `compass watch` 4. bundle install 5. Execute Compass watch with : bundle exec compass watch 2. Setup Susy project a. sudo compass create susyex -r susy -u susy b. directory susyex/ directory susyex/sass/ directory susyex/stylesheets/ create susyex/config.rb create susyex/sass/_grids.scss create susyex/sass/style.scss write susyex/stylesheets/style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

1. Install what we need

a. Install Ruby like I show here

b. Use Ruby 2.2 : rvm use --default 2.2

c. Show Gems : gem list

d. gem install compass --pre

1. Installs sass-3.4.13 & compass-1.1.0.alpha.3.gem

e. Install Susy 2.2.2 : gem install susy

f. gem install breakpoint

g. gem install normalize

h. gem outdated

i. gem update

j. Make sure you have

1. compass (1.1.0.alpha.3), sass (3.4.13), and susy (2.2.2)

k. Specify the gems to use with bundler

1. gem install bundler

2. bundle init

3. Edit the Gemfile

a. # A sample Gemfile
source "https://rubygems.org"

# gem "rails"
gem 'compass', '~>1.1.0.alpha.3'
gem 'sass', '3.4.13'
gem 'susy', '2.2.2'
gem 'breakpoint', '2.5.0'
gem 'normalize', '0.0.3'

# Using Bundler, you need to run `bundle exec compass watch`
# instead of simply `compass watch`

4. bundle install

5. Execute Compass watch with : bundle exec compass watch

2. Setup Susy project

a. sudo compass create susyex -r susy -u susy

b. directory susyex/
directory susyex/sass/
directory susyex/stylesheets/
   create susyex/config.rb
   create susyex/sass/_grids.scss
   create susyex/sass/style.scss
     write susyex/stylesheets/style.css

config.rb

require 'susy'
require 'compass/import-once/activate'
require 'breakpoint'
# Require any additional compass plugins here.


# Set this to the root of your project when deployed:
http_path = "../"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

require 'susy'

require 'compass/import-once/activate'

require 'breakpoint'

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:

http_path = "../"

css_dir = "stylesheets"

sass_dir = "sass"

images_dir = "images"

javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):

output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:

relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:

# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this

# project again passing --syntax sass, or you can uncomment this:

# preferred_syntax = :sass

# and then run:

# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

_variables.scss

// Root unit that will define all other sizes
$main-font-size: 16px;

$red: #FF0000;
$white: #FFFFFF;
$gray: #808080;
$pink: #FFCBDB;
$brown: #964B00;
$orange: #FF7F00;
$yellow: #FFFF00;
$green: #00FF00;
$cyan: #00FFFF;
$blue: #0000FF;
$violet: #7F00FF;
$black: #000000;

// Root unit that will define all other sizes

$main-font-size: 16px;

$red: #FF0000;

$white: #FFFFFF;

$gray: #808080;

$pink: #FFCBDB;

$brown: #964B00;

$orange: #FF7F00;

$yellow: #FFFF00;

$green: #00FF00;

$cyan: #00FFFF;

$blue: #0000FF;

$violet: #7F00FF;

$black: #000000;

_layout.scss

html {
  font-size: $main-font-size;
}

// Use border-box so padding fits in elements width / height

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {

font-size: $main-font-size;

}

// Use border-box so padding fits in elements width / height

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

_grids.scss

// Requirements
// ============
@import "compass";
@import "susy";

// http://susy.readthedocs.org/en/latest/settings/

$susy: (
  // Number of columns in layout
  columns: 12,

  // Percentage width of gutters relative to columns
  // 1: Gutters are same size as columns
  gutters: 1,

  // fluid: Grids calculated as % relative to container
  // static: Grids calculated as multiple of column-width using em
  math: fluid,

  column-width: 40px, // false | value

  // float: float layout
  // isolate: Absolute positioning of floats
  output: float,

  // Where are gutters added to the layout
  // before | after | split | inside | inside-static (requires column-width)
  gutter-position: after,

  flow: ltr, // Element Flow Direction: ltr | rtl

  container: auto, // Absolute width or % or auto (100%)

  // How to align container relative to parent
  // left | center | right |
  // Create Side margins: <length> [*2]
  container-position: center,

  // Float direction of last element
  // from: Float to left
  // to: Float in opposite direction (Used for Fluid Layouts)
  last-flow: to,

  // content-box | border-box (Include padding in element width)
  global-box-sizing: border-box,

  // Used for debugging
  debug: (

    // show or hide grid images
    image: show,

    // Color of generated grid image
    color: rgba(#656, .25),

    // Show debug image as a background or overlay
    output: background,

    // Position of toggle to show and hide overlay option
    toggle: top right,
  ),
  use-custom: (

    // false: Output background image to CSS
    // true: Use provided background image for debugging
    background-image: true,

    // false: Output background options to CSS
    // true: Look for background-size, -origin and -clip
    background-options: false,

    // false: Susy outputs box-sizing
    // true: Look for existing box-sizing
    box-sizing: true, // look for custom bix sizing mixin

    // true: look for internal clearfix before using micro clearfix
    clearfix: false,

    // true: Look for rem mixin
    // rem is relative to the font size of the root element
    rem: true,
  )
);

// Easy Susy setup
// 12 Columns, Width of gutter 1, fluid layout,
// float layout,
// $susy: layout(12 1 fluid float outside);

// Grids for navigation
// Eliminates the gutter between the nav items
$nav_susy_layout: layout(12 0 fluid float inside);

// Requirements

// ============

@import "compass";

@import "susy";

// http://susy.readthedocs.org/en/latest/settings/

$susy: (

// Number of columns in layout

columns: 12,

// Percentage width of gutters relative to columns

// 1: Gutters are same size as columns

gutters: 1,

// fluid: Grids calculated as % relative to container

// static: Grids calculated as multiple of column-width using em

math: fluid,

column-width: 40px, // false | value

// float: float layout

// isolate: Absolute positioning of floats

output: float,

// Where are gutters added to the layout

// before | after | split | inside | inside-static (requires column-width)

gutter-position: after,

flow: ltr, // Element Flow Direction: ltr | rtl

container: auto, // Absolute width or % or auto (100%)

// How to align container relative to parent

// left | center | right |

// Create Side margins: <length> [*2]

container-position: center,

// Float direction of last element

// from: Float to left

// to: Float in opposite direction (Used for Fluid Layouts)

last-flow: to,

// content-box | border-box (Include padding in element width)

global-box-sizing: border-box,

// Used for debugging

debug: (

// show or hide grid images

image: show,

// Color of generated grid image

color: rgba(#656, .25),

// Show debug image as a background or overlay

output: background,

// Position of toggle to show and hide overlay option

toggle: top right,

use-custom: (

// false: Output background image to CSS

// true: Use provided background image for debugging

background-image: true,

// false: Output background options to CSS

// true: Look for background-size, -origin and -clip

background-options: false,

// false: Susy outputs box-sizing

// true: Look for existing box-sizing

box-sizing: true, // look for custom bix sizing mixin

// true: look for internal clearfix before using micro clearfix

clearfix: false,

// true: Look for rem mixin

// rem is relative to the font size of the root element

rem: true,

)

);

// Easy Susy setup

// 12 Columns, Width of gutter 1, fluid layout,

// float layout,

// $susy: layout(12 1 fluid float outside);

// Grids for navigation

// Eliminates the gutter between the nav items

$nav_susy_layout: layout(12 0 fluid float inside);

style.scss

@import "partials/normalize";
@import "partials/variables";
@import "partials/layout";
@import "partials/mixins";
@import "breakpoint";
@import "grids";

header {
  height: 100px;
  background: $blue;
  color: $white;
  margin-bottom: 10px;
  padding: 10px;
}

.wrapper {
  background: $white;
  margin: 0 auto;
  max-width: 900px;
}

nav {
  text-align: center;
  ul, li {
    padding: 0;
  }
  li {
    background: $gray;
  }
  a {
    text-decoration: none;
    color: $white;
    &:hover {
      color: $yellow;
    }
  }
}

.first-row {
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
}

.first-row .first{
  background: $yellow;
  height: 100%;
}

.first-row .second{
  height: 100%;
}

.first-row .second div{
  background: $orange;
  height: 100%;
}

.pic-gallery {
  div {
    background: $violet;
    height: 100%;
    margin-bottom: 10px;
    padding: 10px;
  }
}

.content-bar {
  div {
    background: $green;
    height: 100%;
    margin-bottom: 10px;
    padding: 10px;
  }
}

footer {
  height: 100px;
  background: $blue;
  color: $white;
  margin-top: 10px;
  padding: 10px;
  clear: both;
}

// Grid Stuff

header {
  // Span the entire area available and eliminates floating elements
  @include full;

  // Have the logo take up 1.35 columns
  // You can add wide or wider to take 1 or 2 gutters in space
  // span(wide 1.35)
  .logo {
    @include span(1.35);
    // Sass helpers for getting image size
    height: image-height("./images/nttlogo.png");
    width: image-width("./images/nttlogo.png");
  }

  // Start at the last 2 column point
  h1 {
    @include span(last 2);

    @include breakpoint((max-width 50em)){
      @include span(last 4);
    }
  }
}

.nav {
  @include full;
}

.wrapper {
  // Return the container that uses the layouts we defined
  // You could pass in a size container(800px)
  @include container;
}

// Have each nav li item take up 3 columns of the layout with
// gutters inside
.nav-item {
  @include span(3 of $nav_susy_layout);

  // You can add 1 column of margin:
  // margin-bottom: span(1);
}

.first-row {
  // No floating elements on the left or right
  clear: both;
  .first {
    @include span(first 4);
  }
  .second {

    // Place in last 8 spaces
    @include span(last 8);
    div:nth-child(1) {

      // Take up to columns starting at 1st of 8
      @include span(2 at 1 of 8);
    }
    div:nth-child(2) {
      @include span(2 at 3 of 8);
    }
    div:nth-child(3) {
      @include span(2 at 5 of 8);
    }
    div:nth-child(4) {
      @include span(2 at 7 of 8);

      // Break element to the next row
      // @include break();
    }
    div:nth-child(5) {
      @include span(last 2 of 8);
    }

  }
}

.pic-gallery {
  @include clearfix;

  // Define the padding by passing the number of columns
  padding: gutter(12);

  // Add padding on sides
  padding: 0 10px;
  div {

    // Take up 2 of every 12 for all 6 pics
    @include gallery(2 of 12);
  }

  div:nth-child(5) {

      // Make the element take up the last position
      @include last();
  }

  div:nth-child(1) {

      // Make the element take up the last position
      // Move over 1 column @include pre(1);
      // Move to the left 1 column with pull(1);
      // Move content 1 column @include prefix(1);
      // Move content left 1 column @include suffix(1);
  }

}

.content-bar {
  // Add padding on sides
  padding: 0 10px;

  // Return the size of a gutter
  margin-top: gutter();

  div:nth-child(1){
    @include span(6 of 12);

    // You can add a specifically sized gutter before, after,
    // inside, or split
    @include gutters(3em inside);

    @include breakpoint((max-width 40em)){
      @include span(12 of 12);
    }
  }
  div:nth-child(2){
    @include span(last 6 of 12);

    @include breakpoint((max-width 40em)){
      @include span(12 of 12);
    }

  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

@import "partials/normalize";

@import "partials/variables";

@import "partials/layout";

@import "partials/mixins";

@import "breakpoint";

@import "grids";

header {

height: 100px;

background: $blue;

color: $white;

margin-bottom: 10px;

padding: 10px;

}

.wrapper {

background: $white;

margin: 0 auto;

max-width: 900px;

}

nav {

text-align: center;

ul, li {

padding: 0;

}

li {

background: $gray;

}

a {

text-decoration: none;

color: $white;

&:hover {

color: $yellow;

}

.first-row {

height: 100px;

margin-bottom: 10px;

padding: 10px;

}

.first-row .first{

background: $yellow;

height: 100%;

}

.first-row .second{

height: 100%;

}

.first-row .second div{

background: $orange;

height: 100%;

}

.pic-gallery {

div {

background: $violet;

height: 100%;

margin-bottom: 10px;

padding: 10px;

}

.content-bar {

div {

background: $green;

height: 100%;

margin-bottom: 10px;

padding: 10px;

}

footer {

height: 100px;

background: $blue;

color: $white;

margin-top: 10px;

padding: 10px;

clear: both;

}

// Grid Stuff

header {

// Span the entire area available and eliminates floating elements

@include full;

// Have the logo take up 1.35 columns

// You can add wide or wider to take 1 or 2 gutters in space

// span(wide 1.35)

.logo {

@include span(1.35);

// Sass helpers for getting image size

height: image-height("./images/nttlogo.png");

width: image-width("./images/nttlogo.png");

}

// Start at the last 2 column point

h1 {

@include span(last 2);

@include breakpoint((max-width 50em)){

@include span(last 4);

}

.nav {

@include full;

}

.wrapper {

// Return the container that uses the layouts we defined

// You could pass in a size container(800px)

@include container;

}

// Have each nav li item take up 3 columns of the layout with

// gutters inside

.nav-item {

@include span(3 of $nav_susy_layout);

// You can add 1 column of margin:

// margin-bottom: span(1);

}

.first-row {

// No floating elements on the left or right

clear: both;

.first {

@include span(first 4);

}

.second {

// Place in last 8 spaces

@include span(last 8);

div:nth-child(1) {

// Take up to columns starting at 1st of 8

@include span(2 at 1 of 8);

}

div:nth-child(2) {

@include span(2 at 3 of 8);

}

div:nth-child(3) {

@include span(2 at 5 of 8);

}

div:nth-child(4) {

@include span(2 at 7 of 8);

// Break element to the next row

// @include break();

}

div:nth-child(5) {

@include span(last 2 of 8);

}

.pic-gallery {

@include clearfix;

// Define the padding by passing the number of columns

padding: gutter(12);

// Add padding on sides

padding: 0 10px;

div {

// Take up 2 of every 12 for all 6 pics

@include gallery(2 of 12);

}

div:nth-child(5) {

// Make the element take up the last position

@include last();

}

div:nth-child(1) {

// Make the element take up the last position

// Move over 1 column @include pre(1);

// Move to the left 1 column with pull(1);

// Move content 1 column @include prefix(1);

// Move content left 1 column @include suffix(1);

}

.content-bar {

// Add padding on sides

padding: 0 10px;

// Return the size of a gutter

margin-top: gutter();

div:nth-child(1){

@include span(6 of 12);

// You can add a specifically sized gutter before, after,

// inside, or split

@include gutters(3em inside);

@include breakpoint((max-width 40em)){

@include span(12 of 12);

}

div:nth-child(2){

@include span(last 6 of 12);

@include breakpoint((max-width 40em)){

@include span(12 of 12);

}

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Susy Tutorial</title>

  <link rel="stylesheet" href="stylesheets/style.css">

</head>
<body>

  <div class="wrapper">

    <header>
      <img src="./images/nttlogo.png" class="logo">
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li class="nav-item"><a href="#">Item 1</a></li>
        <li class="nav-item"><a href="#">Item 2</a></li>
        <li class="nav-item"><a href="#">Item 3</a></li>
        <li class="nav-item"><a href="#">Item 4</a></li>
      </ul>
    </nav>

    <div class="first-row">

      <div class="first">
        <h2>Col 1 Row 1</h2>
      </div>

      <div class="second">
        <div><h3>Col 2 Row 1</h3></div>
        <div><h3>Col 3 Row 1</h3></div>
        <div><h3>Col 4 Row 1</h3></div>
        <div><h3>Col 5 Row 1</h3></div>
      </div>

    </div>

    <div class="pic-gallery">
      <div><h3>Pic 1</h3></div>
      <div><h3>Pic 2</h3></div>
      <div><h3>Pic 3</h3></div>
      <div><h3>Pic 4</h3></div>
      <div><h3>Pic 5</h3></div>
    </div>

    <div class="content-bar">
      <div><h3>Content 1</h3></div>
      <div><h3>Content 2</h3></div>
    </div>

    <footer>
      <h1>Footer</h1>
    </footer>

  </div> <!-- End of Wrapper -->

</body>
</html>

<!DOCTYPE HTML>

<head>

<title>Susy Tutorial</title>

</head>

<body>

<h1>Header</h1>

</header>

<nav>

<ul>

</ul>

</nav>

</div>

</div>

</div>

<div><h3>Content 1</h3></div>

<div><h3>Content 2</h3></div>

</div>

<h1>Footer</h1>

</footer>

</div>

</body>

</html>

The _normalize.scss file used here, can be found in my Sass video tutorial.

	Facebook
	YouTube
	Twitter
	LinkedIn

Susy Tutorial

Leave a Reply Cancel reply