Ruby on Rails

Susy Tutorial

Leave a comment

Susy TutorialWelcome 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

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

_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;

_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;
}

_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);

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);
    }

  }
}

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>

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

Leave a Reply

Your email address will not be published. Required fields are marked *