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
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
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 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 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
1 2 3 4 5 6 7 8 9 10 11 |
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
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
// 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
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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
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 63 |
<!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