Try Tuts+ Premium, Get Cash Back!
SASS and Compass for Web Designers: The Header
videos

SASS and Compass for Web Designers: The Header

Tutorial Details
  • Topic: SASS and Compass, CSS
  • Difficulty: Beginner
  • Screencast duration: 16 mins

Final Product What You'll Be Creating

This entry is part 4 of 6 in the series SASS and Compass for Web Designers

We’re going to continue building our Creative Portfolio web page with SASS and Compass. On this occasion, we’ll turn our attention to the header area, the primary navigation and some featured images.


Watch Screencast

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Series Navigation<< SASS and Compass for Web Designers: Grids and SpritesSASS and Compass for Web Designers: Finishing Off >>

Norris is PureMellow on Themeforest
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Hamid

    really thx for the last part even when it was few to late:-)

    cya in the next screencast Norris on:-)

    Regard
    Hamid.

  • dj

    Amazing what a preprocessor will do when you are skilled with it. BTW – you do know that many of your edits somehow were not clipped at the correct spot and duplicated wording?

    • http://www.themer.me Norris
      Author

      I didn’t notice. I will run through the video to re-check :)

  • Hamid

    hey norris m8, as you said in the last movie you hope to see us in the part 5 of the series right? so what’s about that–> “This entry is part 4 of 4 in the series SASS and Compass for Web Designers”

    • http://www.themer.me Norris
      Author

      Don’t worry, that’s just how Tuts+ network works. Because this is the latest video. When Part 5 is going to be released, this video will be turn into part 4/5 :)

  • http://www.snaptin.com Ian Yates

    Congrats on the new Premium course Norris! For those who want to know more about Maintainable CSS With Sass and Compass, go and check it out!

  • Pingback: Tweet-Parade (no.27 Jun & Jul 2012) | gonzoblog.nl

  • Marco

    Thanks for the tutorial. How can I add SCSS syntax highlighting in Sublime Text? I’m using the default theme.

    • http://www.themer.me Norris
      Author

      https://github.com/n00ge/sublime-text-haml-sass (For Sass, Haml)
      https://github.com/techpeace/SCSS.tmbundle (for SCSS)

      Or if you have the Bundle installer, you can use that and just install the same packages.
      Hope this helps :)

      • Marco

        Thanks it works. Just one more thing. How can I transform blankwork or my own grid into flexible grid? Because each time i try to add % after variable, or into some function i get syntax error. I can’t figure out how to make it work.

        example:

        $columns: 12;
        $gutter: 20px;
        $column: 60px;
        $container: ($columns * $gutter - $gutter) + $columns * $column;
        @function column-width($col-value) {
        	@return (($col-value * $gutter - $gutter) + $col-value * $column) / $container * 100;
        }
        .col1 {
        	width: column-width(1)%;
        }
        .col3 {
        	width: column-width(3)%;
        }
        .col4 {
        	width: column-width(4)%;
        }
        .col1, .col2, .col3, .col4 {
        	margin-left: $gutter;
        	float: left;
        	background: $white;
        }
        .container {
        	max-width: $container;
        	margin: 0 auto;
        }
        .wrapper {
        	margin-left: -$gutter;
        	background: red;
        }
        
        • http://www.themer.me Norris
          Author

          Change:

          $columns: 12;
          $gutter: 20px;
          $column: 60px;

          to for example (make sure the math adds up to 100%, or whatever you need)

          $columns: 10;
          $gutter: 2%;
          $column: 8%;

  • Pingback: Tweet-Parade (no.27 Jun & Jul 2012) - gonzoblog.nl

  • Taty

    Hey Norris: great series here, learning a ton. Would you mind sharing the color scheme and font you using on ST2? Thanks!

    • http://www.themer.me Norris
      Author

      Not sure about the font (haven’t modified that I think), but the color scheme is a modified version of Espresso Soda. Get it here: https://github.com/buymeasoda/soda-theme/

  • Jindra Stanek

    Hi Norris, thanks for brilliant and eye opening tutorials. I’m still struggling and getting on with CSS as my all life was print design, but now is time to convert :) and Compass is just makes life more easier. While learning from your tutorial I got stuck on header with spr-sprite “logo”. I have no idea, it looks so simple, but there is no logo instead of H1 on my website. Can I send you here, please, my code?