Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 08 2014

11:00

DevDocs: The Ultimate Work of Reference for Web Developers


  

Thibault Courouble is back. The philosopher and front-end developer from France created yet another useful web service for developers. His new project DevDocs has the potential to become the ultimate work of reference for anybody building web apps. DevDocs integrates a plethora of different documentations and equips them with a spanned search function. This is a very good idea…

August 12 2013

06:30

Getting Started with the Sass Preprocessor

Preprocessors are a popular way of simplifying and writing more manageable CSS, as well as making use of frameworks to write better CSS. Let’s take a look at the basics and learn how to create a fully loaded CSS3 button with gradients, shadows and transitions while making use of the Sass preprocessor and Compass framework to do all the hard work for us.

Wait, Prepro-wha?!

I guess if you’re new to this, the sound of ‘CSS Preprocessor’ is confusing! But rest assured, it’s nothing big to worry about. A CSS Preprocessor takes your CSS written in a specific file, compiles it, and writes out your CSS into a separate file. It helps for writing your CSS in a developer-friendly way, but can also help simplify and manage your CSS better.

CSS3 button made with Sass and Compass

In this tutorial we will be making a very simple button with 3 states, full of awesome CSS3 features like gradients, box shadows and transitions, while relying on the preprocessor to do the hard work for us. There are a few preprocessor languages out there, but I highly recommend using Sass and the popular framework built from it, Compass. Sass can be used to structure our CSS, while we can use Compass to beef up our styles and provide fallbacks.

View the CSS3 Button Demo

What you need and how to get started

The first thing to do is get a program to help compile your code, and while you could install everything by command line, it’s easier to keep control of it using a compiling application. I highly recommend trying out CodeKit for this tutorial, so grab a trial copy and we can get started.

Make a folder for our project, complete with a index.html file ready to put some code in. Next, enter CodeKit, go to the File menu and select ‘New Compass Project’. You will then be presented with a dialog box asking where your project folder is located and where to compile to, and make sure it is set to the following.

Compass Configuration

What we’ve set up is where our Sass files are located, where they compile to, and how Compass will write out the CSS. Here, I’ve set it to the expanded view so I can see how my CSS looks, while setting it to compressed will minify the CSS. It’s up to you how you want to organise your project. Compass will then create the project, as well as the location of our CSS and Sass folders.

Compass Configuration Result

Getting started with the Sass code

In our HTML file, all we need is some very simple code, and a link to our CSS file in the CSS folder of our project.

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>Simple CSS3 Button</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="container">

	<a class="button">Click Me!</a>

</div>
</body>
</html>

That’s all the HTML we need! Now, onto writing with Sass. Enter your preferred text editor, and make a new file, save it into the sass folder, and name it style.scss. We’re going to be writing everything out in SCSS, which Sass can also process, to keep things simple and SCSS isn’t as strict on the beginners. :-)

At the start of our file, we will write out a basic reset for the HTML, an import for Compass, and write out our colour variables for the button.

@import "compass";

//Simple Reset
body, div, a {
	margin: 0;
	padding: 0;
	border: 0;
}

a {text-decoration: none;}

a:focus {outline: 0;}

//Colour Variables
$button-colour: #2e6bc6;
$button-start: #37a0dc;
$button-stop: #2068a6;
$border: #163861;
$text-shadow: #06304b;

//Hover colours
$button-hover-colour: #2e7dc6;
$button-hover-start: #3f9ff0;
$button-hover-stop: #2874a9;
$focus-shadow: #0b3c5f;

//Main Styles
body {
	font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
	

At the top of the file, we’re calling on Compass to be included into the file so we can make use of some mixins for later. We’ve also written a simple reset, and we’ve made use of one feature already: variables. This allows use to store values we will constantly use in our CSS, including colours, font values, and more! Here, I’m using it to store the colours used on the button to simplify writing them out but also for re-use throughout the stylesheet.

Styling the Button


.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;
}
	

Onto styling that button! We’ll start off by applying the base styles to the a tag with the class of button. Here I’ve set the base styles for the button, and notice how I am making use of the variables from earlier.

Now, onto the fun part! Remember the Compass import placed at the beginning of the Stylesheet? Here we make use of it, as Compass has a mass library of built-in mixins, which include CSS3 prefixes for browsers that still need prefix support.

.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;

	//Compass Mixins
	@include background(
		$button-colour
		linear-gradient(top, $button-start 20%, $button-stop)
	);
	@include border-radius(3px);
	@include box-shadow(inset 0 1px 0 rgba(#fff, 0.8));
	@include transition(all 0.3s ease);
}
	

After the initial styling, we can include some mixins for the background colours, linear gradients, border radiuses and transitions. The best part is it will compile with only the necessary prefixes, and save us from writing them all! The class so far will compile into the following in the style.css file.

.button {
  width: 158px;
  height: 30px;
  margin: 120px auto;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  display: block;
  color: #fff;
  padding: 7px 0 0;
  border: 1px solid #163861;
  text-shadow: 0 -1px 0 #06304b;
  position: relative;
  background: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -moz-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
	

Writing Styles with Nested Elements

Another great feature of a Preprocessor like Sass is the ability to nest elements and appending classes with a parent element you’re styling. This is then compiled into the necessary CSS to make it work.

.button {
	...
	
	&:hover {
		@include background(
			$button-hover-colour
			linear-gradient(top, $button-hover-start 20%, $button-hover-stop)
		);
		@include box-shadow(inset 0 1px 1px rgba(#fff, 0.95));
	}
	
	&:active {
		@include background(
			linear-gradient(bottom, $button-start 20%, $button-stop)
		);
		text-shadow: 0 1px 0px $text-shadow;
		@include box-shadow(inset 0 2px 8px $focus-shadow);
	}
}
	

After the main button styles, we can nest the pseudo-class selectors for the element’s :hover and :active states, with the ampersand to tell Sass that it’s a nested class appended to the parent element. In the :hover state, we can add a little bit more emphasis to the gradient and inner shadow using Compass Mixins, while the :active state reverses the gradient and changes the box shadow to give the impression that the button is pushed in.

.button:hover {
  background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9));
  background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -o-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9);
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.button:active {
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: -webkit-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -moz-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -o-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: linear-gradient(bottom, #37a0dc 20%, #2068a6);
  text-shadow: 0 1px 0px #06304b;
  -webkit-box-shadow: inset 0 2px 8px #0b3c5f;
  -moz-box-shadow: inset 0 2px 8px #0b3c5f;
  box-shadow: inset 0 2px 8px #0b3c5f;
}
	

The above is what happens after the :active and :hover states are compiled by Sass; they are written as pseudo-class selectors to the parent element in valid CSS, as well as the desired CSS complete with fallbacks, completing our 3-state button.

CSS3 button made with Sass and Compass

View the final CSS3 Button Demo

The style.scss file and compiled Stylesheet

Full SCSS Stylesheet

This is all that is written in our whole style.scss file, as we have an organised file which is written simply, as well as carrying mixins and variables that do some of the work for us, which then compiles into the final style.css file Stylesheet.

Final CSS Stylesheet

Learning more about Preprocessors

Hopefully this hasn’t been too much of a headache, and has given you the ambition to write more in Sass and Compass, as well as try CSS Preprocessors. There are many great articles by CSS-Tricks, NetTuts, The Sass Way, and many more on the subject to help you on your way to write more efficient, simple and easier CSS.

Sponsored post
soup-sponsored
04:52

June 20 2013

20:44

Developing With Sass and Chrome DevTools

In this article we’ll take a look at how we can better integrate Chrome DevTools into our Sass development workflow.


Tutorial Sneak Peek!

Here’s a peek of what we’ll be doing in this tutorial via an animated GIF:

edit-sass

On the left is a terminal and the Sublime text editor, and on the right is Chrome. Changes to the .scss file are being persisted to disk, which is reflected in Sublime, the Sass watch command is generating a new version of a CSS file when it detects changes to the Sass file, which is in turn picked up by DevTools and reflected onto the page.


The Need for a Better Workflow

So what are we trying to solve here? Why would we want a better workflow? Well, let’s review an example of debugging some Sass-generated CSS, given the following .scss file, which contains:

$myColor: green;

body {
	.box {
		color: $myColor;
	}
}

And now the CSS, which is generated by the above Sass file, would look like this:

body .box {
  color: green; }

Now we just need a little bit of HTML to apply our styling to:

<div class="box">Hello</div>

Ok, so far so good. Now we want to start designing and developing our page using Chrome DevTools. First we inspect the div with a class of box by right clicking on it and selecting Inspect Element. Then we can check out the styles pane, which shows a green value for the color property, a note on the filename it’s contained within, along with the line number that the selector appears on. Now here’s where the problem lies – the processed CSS does not follow, line for line, what the source .scss file looks like, which can have a negative impact on our development workflow.

sublime-source-vs-output

In the image above, the left pane shows a source .scss file and the right side shows the processed version. (Note I’m using the SCSS bundle for syntax highlighting in Sublime Text)

dev-tools-regular-view

DevTools then provides a link to the file and line number of the selector, highlighted in red above, which unsurprisingly links to the processed file (image below). This now acts as a limitation for editing the file within DevTools as we can’t benefit from file saving. For example, if we persist changes to the processed file, they’ll just be overwritten when Sass next runs.

In fact, we don’t even have a clear indication of what the corresponding line number is – of course, practically speaking, our above example is very simple and we can very quickly understand what line maps to what, by looking at the code. However in a larger .scss file, things can get trickier.

sources-panel-regular

As you can see above, DevTools has no understanding of our .scss file, we can address this however by utilizing a DevTools and Sass workflow, which is what we’ll be looking at in this tutorial. To summarize, a lack of Sass support in the DevTools could mean:

  • We don’t immediately know the line number a selector and/or CSS property exists on, within our source file.
  • Persisting our CSS changes to the file system is pretty much out of the question.
  • Even simply viewing the .scss file in the sources panel is difficult as DevTools doesn’t recognize the extension as one which should be viewed.

Preparing for Sass Support

Chrome

Important: Sass support is an experimental feature. Please keep in mind that, while it has been around for a while now, things may change. If they do, we’ll do our best to update this article, accordingly.

Now let’s navigate to about:flags in the omnibox, then find Enable Developer Tools experiments, enable it and restart Chrome.

chrome-flags

The image below shows an experiments panel, you can reach this by clicking on the cogwheel at the bottom right corner of DevTools and clicking ‘Experiments‘, then check the box for Support for Sass.

dev-tools-experiments

After closing and opening DevTools, you can now go to the General menu item in the left sidebar of the settings window and navigate to the Sources section, from there, check ‘Enable source maps‘ and ‘Auto-reload CSS upon Sass save‘. The timeout can be left at the default value.

sass-support-dev-tools

Sass

This tutorial uses the latest version of Sass (3.3.0 at the current time of this writing) as there is some initial support for source maps. Here’s how you can install Sass using Rubygems:

gem install sass --pre
sass-gem

We now need to tell Sass to compile our .scss files, using the following command:

sass --watch --scss --sourcemap styles.scss:styles.css

From above, the styles.scss is your source file and the styles.css is the processed file, which your HTML page would use. Here’s how you would link in the processed .css file:

<link rel="stylesheet" type="text/css" href="styles.css">

If you see something similar to the image below in your terminal:

sass-command-line

…and you see a generated .map file, then, congratulations: Sass debugging is working! Here’s what those other command options are doing from the previous compile command:

  • --watch: Will watch for changes to the source .scss file and compile it as soon as it has detected a change.
  • --scss: Will display what style of Sass we are using.
  • --sourcemap: Will generate corresponding source map files.

Now, having an understanding of source maps isn’t critical to follow along, however it’s certainly something worth reading about as it’s intended to help the development process. See below for a few resources on source maps:


From Elements to Sources

elem-to-source

Assuming all went well, opening up your page where Sass support is enabled in DevTools should allow for Sass debugging. The first thing to note is that the filename will show the corresponding .scss source file, which is useful, in addition to that, the line number correctly reflects the line number in our source file.

elements-sass

Clicking on the filename will take you right to the sources panel with the line corresponding to the selector in question highlighted.

Note: You now have a viewable Sass file right in your browser with syntax highlighting!

sources-panel-sass

Ok, so finding the corresponding CSS selector from the Elements panel is cool, but what about CSS properties?

In the screenshot below, the Sources panel has highlighted the CSS property I was interested in, to get there I had Command-Clicked on the property from within the Elements panel. The fact that it has taken me to the line where the value was defined (rather than the line: property: $value;) is very powerful!

sources-property-sass

Note: Navigating to a CSS property in the sources panel from command clicking the property in the Elements panel is not specific to Sass, it can be achieved with regular CSS too.


Sass Editing With Persistent Changes

Editing a Sass file is not much different than editing a regular CSS file, one thing we will need to do however is ensure DevTools knows where the .scss file is located at on the file system. From within the Sources panel, the left hand sidebar should have a Sources pane which displays the .scss file, right click it and choose Save as, then overwrite the existing .scss source file.

sources-save-as-sass

Because we checked ‘Auto-reload CSS upon Sass save‘ and because Sass is running in the terminal with the watch flag, changes are made pretty quickly and the DevTools are able to show us those changes.

Even mixins work as expected, pasting the following, in an almost empty .scss file within the sources panel results in the correct CSS being generated, which DevTools is able to reload from within a second.

@mixin button {
    border: 2px solid green;
    display: inline-block;
    padding: 10px;
    border-radius: 4px;    
}

.box {
    @include button;   
}
mixin-sources

As you can see in the image above, the left hand side shows the .scss source file, which is what we would make changes to, the right hand side shows the generated .css file which DevTools has picked up changes from (almost immediately thanks to the watch flag in the terminal)


Sass Debugging at Fluent Conf

Paul Irish gave a great talk at Fluent which had lots of juicy information on the Chrome DevTools, but also the use of Sass. Skip ahead to 5:30 for the Sass information.


Summary

Let’s go over some of the main points discussed in this tutorial:

  • Sass capabilities in Chrome DevTools are a great way to view and modify Sass resources, although don’t forget to enable it in both about:flags and in the settings panel.
  • When using Sass and the Chrome DevTools in a project, you’re likely to have a more efficient workflow with viewing/editing the source file, rather than the generated file.
  • CSS properties in the elements panel can be Command-clicked, the file name displayed to the right of the selector is also clickable. Both will take you to the relevant portion in the sources panel.
  • Utilize the Sources panel’s editing capabilities by doing a ‘Save as‘ on the .scss file, future saves (Command+S) should overwrite the file.
  • Chrome Canary and the latest version of Sass 3.3.0 (due to Source maps) were used in this tutorial, be sure to try them out!

Interesting links

As you can see, the development workflow with Sass is not perfect, but it’s definitely a lot better than what it used to be. As time goes on, DevTools will provide a more streamlined workflow for editing CSS files and bugs will be fixed! Any issues you do find can be raised as a bug at crbug.com.

Thanks for reading this article!

March 28 2013

16:56

Guard is Your Best Friend

A common argument against using preprocessors, like Sass, is that they introduce too much complexity, and are difficult to get started with. Especially today, though, this couldn’t be further from the truth. In this episode, I’ll demonstrate my file monitoring tool of choice, Guard. I’ll think you’ll love it!


Screencast


Show Notes

  • Installed Gems:
    $ gem install guard
    $ gem install rb-fsevent
    $ gem install guard-sass
    $ gem install guard-coffeescript
    $ gem install guard-livereload
    $ gem install guard-concat
    $ gem install guard-uglify
    

    Alternatively, you can use multiple parameters when installing Gems: gem install guard guard-sass.

  • LiveReload Browser Extensions

July 14 2012

13:00

How to Build a Website Using Twitter Bootstrap and SASS – Part 2

This is the second part of my tutorial on How to Build a Website Using Twitter Bootstrap and SASS where we shall be customizing the Twitter Bootstrap-based web page using SASS. Just to set the context right, we will be starting out where we left off in the previous tutorial. If you haven’t seen it yet, please check it out and work through it. There you will learn how to setup your system for TBS, Ruby, and Compass.

In this tutorial we will be furnishing our webpage from the last tutorial using SASS. By the end of this tutorial you will be at the next level of developing beautiful websites and applications!

What we’ll be creating

Step 1: Creating a custom SASS file

Lets remember that we are using the same file set which we used in the first part of this tutorial. Also, please make sure all the setup guidelines are being followed. Primarily, the Compass compiler should be watching our entire folder to make sure all the changes in the SASS files are being converted to the relevant CSS file.

We can customize the above page in multiple ways:

  • We can edit the bootstrap native rules right away, making changes to ‘bootstrap.css’ according to our design
  • We can override the bootstrap rules using another stylesheet

The latter is always preferable (we discussed in the first part of the tutorial, that it’s always recommended to use a separate stylesheet file to override rules of any plugins or frameworks), because when it comes to multiple theming of the page, we just have to change the custom CSS file to another one in order to apply different skins to the layout. So lets create a SASS file (extension of a sass file is .scss) and place it in the ‘sass’ folder. Since the page talks about 1stwebdesigner, I’m naming it  ’1wd.scss’, and including it in the HTML. Also make sure you are including it after the line which includes all bootstrap styles. Our folder structure now looks like:

Step 2: Overriding the rules, using a mother hook

As a first step towards customization I always prefer adding a mother class to the body tag of the page, so that I can always group all the custom rules by referring to that class. So, lets start by giving the body tag of our HTML page a class – ‘fwd’. This helps us to maintain a first level of grouping in terms of selectors and makes sure we don’t override the bootstrap selectors directly.

Step 3: Customizing the layout

We will also be using a pinch of CSS3 in our styles. So lets include the CSS3 mixins in our .scss files so that we can make use of most of the CSS3 features easily using a single line of code.

Lets start with the header.

Here is a comparison of our current header and the customized one:

The key changes that we’ll be doing here are:

  1. Changing the main navigation items to
    • Coding
    • Freebies
    • Inspiration
    • Tutorials
    • Web Design
    • WordPress
  2. Insert the 1WD logo.
    The container ‘brand’ which contains the text ‘Project name’ should be styled in order to contain the logo. Lets add the logo image as a bg and hide the text using ‘text-indent’ and give a relevant height and width and a margin-top of 5px to position it uniformly vertically. The customized style for brand will now look like:
    .brand{
     text-indent:-999px;
     width:169px;
     height:26px;
     padding:0;
     margin:5px 0 0 0;
     background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/1wd-logo-rd.png)
     no-repeat center center;
    }
    
  3. Change the bg color and add a border to the header container (Refer to the code snippet added towards the end of 4th point)
    Lets style the container ‘nav-inner’ by adding a bg-color and a border.
  4. Style the nav items and add a border-radius.
    Navigation list items are under the container with class ‘nav’. We have to style the ‘a’ tag within the ‘li’ tag that comes under ‘nav’. Let’s add a border-radius of 5px (line number 11) using css3 mixin which (@include border-radius(5px) generates all the necessary browser specific rules to the CSS file being generated ) and relevant margin and padding along-with a hover bg-color to it (line no: 12. ‘&’ is added as a prefix to indicate the grouping of the selector that follows it. In this case, ‘&:hover’ associates the pseudo class – :hover to the parent selector, which is a.). With all the custom styles added, the navbar section styles looks like:
    .navbar{
     .navbar-inner{
      background:#eee;
      border-bottom:solid 1px #ccc;
      .nav{
       margin-left:20px;
       li{
        a{
         padding:5px;
         margin:5px 5px 0 0;
         @include border-radius(5px);
         &:hover{
          background:#000;
         };
        }
       }
      }
      .brand{
       text-indent:-999px;
       width:169px;
       height:26px;
       padding:0;
       margin:5px 0 0 0;
       background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/1wd-logo-rd.png)
       no-repeat center center;
      }
     }
    }
    

Next is the hero unit

Here is a comparison of our current hero-unit and the customized one:

The key changes that we’ll be doing here are (the final code for this section is given towards the end of this bulleted section):

  1. Change the bg colors of the container and the form within
    Lets style the container ‘hero-unit’ by adding a different bg color-#464646 , and a text color-#fff (line no:2 )
  2. Style the header text and the call for action button
    For the text ‘Welcome’ to be in a separate color, we will have to wrap it inside a tag. Lets add it within a span tag, style it, and let’s apply a text-shadow for the whole H1 header.(line no: 4 to 8)
  3. Style the form with the login fields
    Let’s add a border radius of 10px to the form using CSS3 mixin (line no: 15), a bg-color #>6d6b6b (line no: 16), and style the label and the input fields (line no. 17 to 30).
  4. The CSS code for the hero-unit now looks like:
    .hero-unit{
     background:#464646;
     color:#fff;
      h1{
       @include text-shadow(#000 1px 5px  10px);
       span{
        color:#F5821F;
       }
      }
      .btn-info{
       padding:15px;
       font-size:1.2em;
       }
       form{
       @include border-radius(10px);
       background:#6d6b6b;
       label{
        font-weight:bold;
        font-size:1.2em;
        &.checkbox{
        font-weight:normal;
        font-size:1em;
        color:#2d2d2d;
        }
       }
       input{
       background:#464646;
       border:solid 1px #545252;
       @include box-shadow(inset #2d2d2d 1px 0px 3px);
       color:#8b7b6c;
       }
      }
     }
    

Now comes the thumbnail section

Here is a comparison of our current thumbnail section and the customized one:

The key changes that we’ll be doing here are (the final code for this section is given towards the end of this bulleted section):

  1. Style the thumbnail containers and add relevant images
    Let’s style give a border-radius of 10px to the thumbnail container (line no: 2), and a bg-color (line no: 3).
  2. Positioning the caption of each thumbnails above the thumbnails.
    Let’s using positioning and absolutely position the caption on top of the thumbnails. To achieve this we will have to apply ‘position:relative’ to the parent tag of the caption (line no: 5), and then position the header (h5) accordingly so that it is appearing just on top of the thumbnail and in line with the bottom-line of the image, and also lets add a text shadow to it (line no: 8 to 13).
  3. The code for this section now looks like
    .thumbnail{
     @include border-radius(10px);
     background:#55626B;
     .caption{
      position:relative;
      color:#ccc9c9;
      h5{
       position:absolute;
       top:-19px;
       left:10px;
       font-size:2em;
       color:#fff;
       @include text-shadow(#000 1px 5px 10px);
      }
     }
    }
    

Finally the footer

I am just adding a custom pattern to the footer, add a border-radius and will be increasing the padding of the container to 20px. Please refer to the code of footer below:

footer{
 padding:20px;
 margin-top:30px;
 @include border-radius(10px 10px 0 0);
 color:#fff;
 background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/bg_header.jpg) repeat left top;
}

Finally after all the customization and coding, here is how our customized page looks:

This is just an intro to the power of SASS and TBS together. In the CSS file that we have used we can make use of variables effectively by storing color values in them and then importing the variable CSS to the main stylesheet at the beginning. With the complexity of each page, all the features of SASS can be leveraged in a much better way. Mixins, Extend, Variables and much more are in store for us to explore and implement.

Get started with this if you are planning to plunge into the world of SASS and wait for more to come your way. I’d appreciate your feedback on my approach and on this tutorial to help me improve!

June 03 2011

16:07

Quick Tip: Integrate Compass into an Existing CodeIgniter Project

Advertise here

I was recently asked about how to use Compass in an existing CodeIgniter project. It seems that the emailer was under the impression that Compass was made for Ruby and Rails. But that’s not the case at all!

Note that Ruby will need to be installed on your system in order for Compass to work correctly. It’s installed by default on a Mac. Otherwise, the easiest way to install the latest version of Ruby is with RVM. Refer here for detailed instructions.

Choose 720p for optimal viewing.
Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

Let us walk you through the process of getting started with Sass and Compass from scratch.

April 01 2011

22:36

Mastering Sass: Lesson 3


In this final lesson in our Sass mini-series, we’re going to review the excellent Compass stylesheet framework, why you should be using it, and how it connects to Sass.

March 24 2011

20:50

Mastering Sass: Lesson 2


In lesson one of our quick tip series, we learned how to install Sass, and how to use variables, nesting, and compression in our stylesheets. Today, we’ll review mixins and selector inheritance, which can provide us with a great deal of convenience and flexibility!

March 22 2011

01:03

Mastering Sass: Lesson 1


After numerous requests, we’re launching a 3-part quick tip video mini-series on mastering Sass. To begin, in this introductory eight-minute screencast, I’ll teach you how to install Sass, and then how to get started with the beginning functionality and options.


In the next lesson, we’ll take things a step further, and dig into mixins, Math operations, and add-ons! Stay tuned!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...