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

January 06 2014


Summernote: Powerful WYSIWYG-Editor for Bootstrap 3


Today I stumbled upon a fresh JavaScript, which I think you will like, too. This little tool helps you integrate a feature-rich WYSIWYG editor into your next Bootstrap project. And it is entirely free. Summernote – say hi – is under ambitious development and bound to reach version 1 in the course of the next few weeks. You need not wait, though, as Summernote is perfectly ready for prime time just yet.

October 23 2013


Babylon.GameFX: This Framework Helps You Build HTML5 WebGL Games Faster than Fast


David Catuhe has recently released a simple & powerfull WebGL 3D engine named Babylon.JS. Which is a complete JavaScript framework for building 3D games with HTML 5 and WebGL. As this was great in itself, we decided to carry the concept even further and built a framework on top of that. This is our story…

Sponsored post

August 12 2013


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>

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

<div id="container">

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


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(
		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(
			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.

September 09 2011


An Introduction To LESS, And Comparison To Sass

Advertisement in An Introduction To LESS, And Comparison To Sass
 in An Introduction To LESS, And Comparison To Sass  in An Introduction To LESS, And Comparison To Sass  in An Introduction To LESS, And Comparison To Sass

I’ve been using LESS religiously ever since I stumbled upon it months ago. CSS was never really a problem for me, in and of itself, but I was intrigued by the idea of using variables to create something along the lines of a color palette for my websites and themes. Having a color palette with a fixed number of options to choose from helps prevent me from going color crazy and deviating from a chosen style.

Less-sass1 in An Introduction To LESS, And Comparison To Sass

As it turns out, LESS — and Sass for that matter — are so much more than that. LESS and Sass share a lot of similarities in syntax, including the following:

  • Mixins – Classes for classes.
  • Parametric mixins – Classes to which you can pass parameters, like functions.
  • Nested Rules – Classes within classes, which cut down on repetitive code.
  • Operations – Math within CSS.
  • Color functions – Edit your colors.
  • Namespaces – Groups of styles that can be called by references.
  • Scope – Make local changes to styles.
  • JavaScript evaluation – JavaScript expressions evaluated in CSS.

The main difference between LESS and Sass is the way in which they are processed. LESS is a JavaScript library and is, therefore, processed client-side.

Sass, on the other hand, runs on Ruby and is processed server-side. A lot of developers might not choose LESS because of the additional time needed for the JavaScript engine to process the code and output the modified CSS to the browser. There are a few ways around this. The way I get around it is to use LESS only during the development process. Once I’m finished, I copy and paste the LESS output into a minifier and then into a separate CSS file to be included in place of the LESS files. Another option is to use to compile and minify your LESS files. Both options will minimize the footprint of your styles, as well as avoid any problems that might result from the client’s browser not running JavaScript. While this is not likely, it’s always a possibility.

LESS Is More


Including LESS in something that you’re building is about as easy as it gets:

  1. Go get yourself a copy of less.js;
  2. Create a file to put your styles in, such as style.less;
  3. Add the following code to your HTML’s <head>:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Note the rel attribute of the link. You are required to append the /less to the end of the value in order for LESS to work. You are also required to include the script immediately after the link to the style sheet. If you’re using HTML5 syntax, and I can’t imagine why you wouldn’t be, you can leave out the type="text/css" and the type="text/javascript".

There’s also a server-side version of LESS. The easiest way to install LESS on the server is with Node Package Manager (NPM).


If you’re a developer, variables are one of your best friends. In the event that you’ll be using information repeatedly (in this case, a color), setting it to a variable makes sense. This way, you guarantee yourself consistency and probably less scrolling about looking for a hex value to copy and paste. You can even do some fun little adding and subtracting of hex values that you want to render. Take this example:

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

If we apply these styles to three divs, we can see the gradated effect created by adding and subtracting the hex values to and from the original blue:

Blue-gradient in An Introduction To LESS, And Comparison To Sass

The transition from @light_blue to @blue to @dark_blue.

The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.


On occasion, we might create a style that’s intended to be used repeatedly throughout the style sheet. Nothing is stopping you from applying multiple classes to the elements in the HTML, but you could also do this without ever leaving your style sheet, using LESS. To illustrate this, I have pasted some sample code that one might use to style two elements on the page.

.border {
border-top: 1px dotted #333;
} {
background: #eee;
} {
background: #ccc;

This will give you something similar to what you would get if you had gone back to the HTML file and added the .bordered class to the two elements there — except you’ve done it without leaving the style sheet. And it works just as well:

Bordered-elements in An Introduction To LESS, And Comparison To Sass

Both the article and the unordered list share the border style.

With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.

@mixin border {
border-top: 1px dotted #333;
} {
background: #eee;
@include border;
} {
background: #ccc;
@include border;

Parametric Mixins

Like having functions in your CSS (*swoon*), these can be immensely useful for those seemingly redundant tasks of modern-day CSS. The best and most useful example of their use relates to the many vendor prefixes that we struggle with during this transition from CSS2 to CSS3. Nettuts+ has a wonderful webcast and article by Jeffrey Way, with details on including a file consisting entirely of useful parametric mixins that cover most of your favorite CSS3 properties in the respective vendor prefixes. For example, a simple mixin to handle rounded corners in their various forms:

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;

In this case, the .border-radius class has a default radius of 3 pixels, but you can pass whatever value you like to get a rounded corner of that radius. Something like .border-radius(10px) will round the corners by 10 pixels.

The syntax in Sass is very similar to that of LESS. Just use the $ for variables, and call the mixins with the @mixin and @include method mentioned earlier.

Selector Inheritance

Here’s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format.

.menu {
	border: 1px solid #ddd;

.footer {
	@extend .menu;

/* will render like so: */
.menu, .footer {
	border: 1px solid #ddd;

Nested Rules

Nesting classes and ids in CSS can be one of the only methods to keep your styles from interfering with and from being interfered with any other styles that may be added along the way. But this can get very messy. Using a selector like #site-body .post .post-header h2 is unappealing and takes up a lot of unnecessary space. With LESS, you can nest ids, classes and elements as you go. Using the example above, you could do something like this:

#site-body { …

    .post { …

        .post-header { …

            h2 { … }

            a { …

            	&:visited { … }
            	&:hover { … }

The above code is essentially the same as the ugly selector in the previous paragraph, but it’s much easier to read and understand, and it takes up much less space. You can also refer in element styles to their pseudo-elements by using the &, which in this case functions similar to this in JavaScript.


This is about what you would expect: using fixed numbers or variables to perform mathematical operations in your styles.

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

For the record, I am aware that I could have also divided by four to get the @quarter_page variable, but I wanted to illustrate that the parentheses rule from the “order of operations” also applies. Parentheses are also required if you’re going to perform operations within compound properties; for example, border: (@width / 2) solid #000.

Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units. Sass can work with unrecognized units of measurement and print them out. This feature was apparently introduced in an attempt to future-proof the library against changes made by the W3C.

/* Sass */
2in + 3cm + 2pc = 3.514in

/* LESS */
2in + 3cm + 2pc = Error

Color Functions

Earlier, I mentioned how LESS helps me stick to a color scheme in my coding process. One of the parts that contributes to this the most is the color function. Suppose you use a standard blue throughout your styles, and you want to use this color for a gradated “Submit” button in a form. You could go into Photoshop or another editor to get the hex value for a slightly lighter or darker shade than the blue for the gradient. Or you could just use a color function in LESS.

@blue: #369;

.submit {
    padding: 5px 10px;
    border: 1px solid @blue;
    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);

The lighten function literally lightens the color by a percentage value. In this case, it will lighten the base blue by 10%. This method enables us to change the color of gradated elements and any other elements with that color simply by changing the base color itself. This could prove immensely helpful in theming. Plus, if you used a parametric function, like the ones listed above, you could alleviate some of that browser-prefix tedium with something as simple as .linear-gradient(lighten(@blue), @blue, 100%);.

Either way, you get an effect that’s rather nice:

Button-submit in An Introduction To LESS, And Comparison To Sass

Our nicely gradated, variable-based “Submit” button.

There are a lot of other color functions for darkening and saturating colors and even spinning the color wheel to other colors. I recommend trying them out to see what you can come up with.

Sass seems to have a lot more color options — not that I would need them all. Lighten and darken are the only ones that I see myself using often. For more detail, Nex3 has an in-depth article on the topic.

Conditionals and Control

This is rather nifty, and another thing not provided by LESS. With Sass, you have the ability to use if { } else { } conditional statements, as well as for { } loops. It supports and, or and not, as well as the <, >, <=, >= and == operators.

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;

/* Sample Sass "for" loop */
@for $i from 1px to 10px {
  .border-#{i} {
    border: $i solid blue;


Namespaces can be used to add another level of organization to our CSS, by allowing us to create groups of commonly used styles and then pick from them along the way. For instance, if we created a group of styles called defaults, we could pull from this group when we come across an element that needs it.

#defaults {
	.nav_list () {
		list-style: none;
		margin: 0; padding: 0;
	.button () { … }
	.quote () { … }

Later, in our code, if we come across a ul element within a nav element, we would know that we’ll need our default style. So, we can simply call it, and it will be applied.

nav ul {
	#defaults > .nav_list;


Scoping is standard throughout programming and thus standard in LESS. If you define a variable at the root level of your style sheet, it will be available and consistent throughout the document. If, however, you redefine the variable from within a selector such as an id or class, then it will be available — with the new value — only within that selector.

@color: #00c; /* blue */

#header {
	@color: #c00; /* red */

	border: 1px solid @color; /* will have a red border */

#footer {
	border: 1px solid @color; /* will have a blue border */

Because we’ve restated the variable within the #header selector, the value for that variable will be different and will apply only within that selector. Anything before or after it will retain the value of the original statement.

Scope is handled a little differently in Sass. In the above code, when the @color variable is changed to red, it will be interpreted as such from that point on within the code.


This part is pretty basic. Two types of comments are valid in LESS. The standard CSS comment, /* comment */, is valid and will get passed through the processing and outputted. Single-line comments, // comment, work as well but will not get passed and outputted and, as a result, are “silent.”


Importing is pretty standard, too. The standard @import: 'classes.less'; works just fine. If, however, you’re importing another LESS file, then the file extension is optional, so @import 'classes'; would work as well. If you want to import something without LESS processing it, you can use the .css extension (for example, @import: 'reset.css';).

String Interpolation

String values can also be used in variables and called within styles via @{name}.

@base_url = '';
background-image: url("@{base_url}/images/background.png");


There will be times when you need to include a value that is not valid CSS syntax or that LESS doesn’t recognize. More often than not, it will be some crazy Microsoft hack. To avoid throwing errors and breaking LESS, you will need to escape them.

.class {
	filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";

/* Will actually be outputted like this: */
.class {
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);

JavaScript Evaluation

This is one of my favorite parts of LESS: using Javascript in style sheets — simply brilliant. You can use expressions and also reference aspects of the environment using backticks.

@string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */

/* You can also use the previously mentioned interpolation: */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */

/* Here we access part of the document */
@height = `document.body.clientHeight`;

Output Formatting

Whereas LESS has no output settings, Sass provides four output versions: nested, compact, compressed and expanded.

Final Thoughts

These two libraries share a lot of basics. Both of them are fantastic tools for designers who code, and they can also help developers work more efficiently and quickly. If you’re a fan of Ruby or HAML, then Sass might be right up your ally. For me, being a PHP and JavaScript geek, I tend to lean towards LESS for its ease of inclusion and access to JavaScript’s expressions and document attributes. I doubt that I’ve even come close to truly grasping the possibilities of programming in my style sheets, but I am intent on trying. If you’ve been using either, or both, of these in your work, I’d love to hear more about it and see some of your results. Tips, tricks and corrections are, of course, always welcome as well.


© Jeremy Hixon for Smashing Magazine, 2011.

October 22 2010


How to Create a Layout Manager with CodeIgniter: New Premium Tutorial

This Premium video, and companion article will teach you how to create a simple, yet powerful library to handle layouts in the popular CodeIgniter framework. The library you’ll create will allow you to maximize your efficiency, save time and code, modularize your views and even your Javascript and CSS files.

The basic functionality of this library will be very simple. We’ll take the contents of a view, render them with the appropriate data, then take the rendered content and assign it to a variable. Now, we’ll render the layout itself, and replace a part of the layout with the contents of this variable. Simple, but powerful enough.

The idea is to mimic the calls to $this->load->view(). When we call this method, we pass the name (and location) of our view, and then an array of data that will be accessible from the view. Here’s an example:

function method($url_param)
  $this->load->view('controller_views/method_view', array('url_param' => $url_param));

The above code will take the file system/application/views/controller_views/method_view.php, pass it the url_param variable, and then send it to the browser. Here’s where we come in. We will not send the content to the browser yet. Instead, we’ll send it to the layout, then to the browser. But how do we do that?

…Become a Premium member to follow along with this screencast/article and find out!

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

September 07 2010


CodeIgniter from Scratch: Displaying & Sorting Tabular Data

In today’s video tutorial, we are going to use CodeIgniter to pull information from a database and display it in a sortable table structure. This is a quite common task, especially inside admin areas, for displaying database records. We’ll be utilizing a few different utilities, such as the active records library and pagination.

Catch Up

Day 16: Displaying & Sorting Tabular Data

Day 16: Displaying & Sorting Tabular Data

Thanks for watching! Any questions/thoughts?

December 17 2009


Tools of the Trade: Web Development Frameworks that the Pros Use

New web development frameworks, promising rapid development and easy deployment, are sprouting out at a more rapid pace than you can keep up. In the last article, we looked at the various factors you’d have to consider when deciding on a framework. Today, we are going to look at the various frameworks available for each facet of web development.

In this current day and age, pushing out a finished, polished application well before your competitor is key. Coding everything from scratch, excluding even the mundane things, can be extremely time consuming and makes the developer spend time reinventing the wheel, time which would rather be spent implementing new features or tightening up the code base. This is where web development frameworks come in.

Today, we are going to take a look at the various options you have when choosing a web development framework. We are going to cover every type of framework, right from server side frameworks down to JavaScript animation frameworks. Intrigued? Let’s go take a look!

Server Side Frameworks

Server side frameworks are the one doing almost all the heavy lifting behind the application. They handle almost every aspect of the application right from URL handling to database access. You have a variety of options for each platform. For the sake of brevity, we’ll look at only the most popular ones today.


Tutorial Image

CakePHP is a very popular PHP framework inspired by Ruby on Rails and lets you develop, maintain and deploy applications with ease.

This framework makes use of the MVC pattern and has a lot of must have features including ORM, scaffolding and URL routing. The built in libraries are pretty expansive and include helpers for generating RSS feeds and HTML elements.

There is little to no configuration needed to get it up running and has an excellent community and detailed documentation behind it.


Tutorial Image

CodeIgniter is a PHP framework built on the tenets of simplicity, speed and a small footprint and as such is among the smallest PHP libraries in terms of the total footprint.

Among the frameworks which are built on the MVC pattern, CI is the easiest to learn. If you are a beginner PHP programmer, CodeIgniter would be the best place to start with.

Since it aspires to be as small as possible, the libraries aren’t as full fledged as Cake but the extremely thorough documentation and the very friendly community more than make up for it.


Tutorial Image

Kohana is a fork of CodeIgniter intended to work only with PHP 5. Kohana is completely community driven and every modification is thoroughly discussed and vetted with in the community.

All the positive aspects of CI carry over here except that the documentation can be relatively lacking. However it has a thriving community behind it you can turn to if you run into errors.


Tutorial Image

Zend framework is more of a glue framework in that things aren’t as tightly coupled as in other frameworks like RoR or CakePHP. As such it also gives you a lot more control.

This framework boasts of one of the most complete collection of utility classes to leverage in your application. But since this is a collection of classes than a proper framework, you’ll be looking at lots of configuration to make it work. If you are thinking of starting off as a PHP programmer, this isn’t the first framework you should try.

Having said that, it has excellent documentation and a very large community behind it.


Tutorial Image

Symfony is yet another very popular, feature packed PHP framework. It provides a solid core and ships with a number of third party libraries to fill in the blanks.

This is marketed primarily as an enterprise framework and has solid documentation and a thriving community to help you.


Tutorial Image

ASP.NET allows you to leverage the MVC pattern through ASP.NET MVC. It lets developers use the accepted MVC pattern in their applications. Or if you chose to, you can completely ignore MVC and use the way you’d normally want to.

It ships with a very impressive set of features including libraries for code generation. It also has very thorough documentation and a welcoming community behind it.

Ruby on Rails

Tutorial Image

Ruby on Rails is a framework for the Ruby platform and was created by David Hansson whilst creating Basecamp for 37Signals. Ruby on Rails has gained incredible growth ever since it was released.

RoR uses the MVC pattern and provides a number of features including a complete ORM, scaffolding and URL rewriting. Ruby, by default, uses Prototype as it’s JavaScript library.

Ruby’s incredible growth can be attributed to ease of development and rich feature set. Configuration is generally minimal to nothing. It has good documentation and a growing community.


Tutorial Image

Django is a web development framework based on Python and is amongst the most robust one on the Python platform.

Django ships with an extensive library containing tools for caching, serialization, authentication. It even provides a simple administrative interface based on your models and controllers. Its URL rewriting mechanism is a little different in that it uses regular expression to resolve which controller it needs to use.

It has extremely thorough documentation to back it up along with a helpful, polite community. A beginner Python programmer will take to Django very easily.


Similar to Zend, this is a very loosely coupled framework which glues a number of third party libraries to provide functionality.

In Pylons, each and every aspect can be switched out with the one you like. Everything from it templating language to its ORM can be switched out with minimal fuss.

With respect to features, it depends directly on the individual components you pick for your project. Documentation can be relatively lacking and the community is a little smaller too.


Tutorial Image

Similar to Kohana and CodeIgniter, Turbogears is built on top of Pylons. It shares the same pros and cons as Pylons.

As with Pylons, every component of the framework can be replaced with one of your own choosing. Currently it only uses Pylons for its controller component.

JavaScript Frameworks

JavaScript frameworks work almost exclusively on the browser side. A typical framework lets you navigate the DOM easier, manipulate its contents right up to AJAX integration. There are a couple of widget libraries too which let you use specific user interface elements in your application instead of creating them from scratch.


Tutorial Image

jQuery is an extremely popular library which focuses primarily on DOM manipulation. It has an extensive API encompassing a range of functionalities from DOM traversal to AJAX support.

It has very good documentation with a plethora of tutorials, screencasts, references and books for you to go through. The community is pretty large and very helpful.

If you are new to JavaScript and need to get started as quickly as possible, jQuery is an excellent choice.


Tutorial Image

Prototype is among the oldest JS libraries and as such is very mature and stable. It ships with Ruby on Rails and as part of the standard OS X installation.

It provides a clear API for all of the functionality it exposes and has clear documentation to back it all up. Prototype also provides various methods through which you can write clean class based code. Prototype handles everything from DOM manipulation to AJAX to providing a number of utility methods.


Tutorial Image

Mootools presents itself as the ideal solution for the intermediate to advanced programmer. It focuses on JavaScript as a language and extends on it as much as possible.

It provides a robust class creation system just like Prototype and just like the others, it provides a coherent API for all the functionality it provides.

The documentation can be pretty lacking at times but the active community more than makes up for it.

Yahoo UI

Tutorial Image

Yahoo UI library is a Swiss army kind of a library in that it provides a complete set of features and widgets letting you build the application you want to build. It is built by the developers at Yahoo itself.

In YUI, the core library contains all the essential elements including DOM traversal and CSS manipulation while the utilities and widgets are optional and are available separately.

YUI has the most thorough documentation among JavaScript and is easy to get started with.


Tutorial Image

Dojo is yet another JS toolkit which provides everything that you’d expect from a modern JS library including a selector engine, AJAX integration and so on.

It also provides a set of rich interface elements and a number of advanced features like persistent connections and offline storage. Dojo has very thorough documentation and a thriving community.

CSS Frameworks

CSS frameworks, when properly used, let you cut down on development time by cutting down on oft repeated declarations and styling.

CSS frameworks can be a pretty polarizing topic among the development community but you owe it to yourself to give it a try.


Tutorial Image

The 960 grid system intends to ease your workflow without complicating things. There are 12 and 16 columns versions for added choices.

It provides a CSS generator to further cut down on your development time. It also has pre made templates for use in popular software including Photoshop, Fireworks, Illustrator and Expression Design.


Tutorial Image

YAML, Yet Another Multi column Layout, is a CSS framework which lets you create robust column based and/or grid based layout based on web standards.

It also has a nifty tool for creating YAML CSS code. The documentation is pretty thorough and the community, helpful.


Tutorial Image

Blueprint is a CSS framework which intends to reduce the time you spending mulling over grids and padding. It makes use of a solid grid, support for typography and print support.

It features wiki based documentation and bug tracking. It boasts an active community where you can post your queries.

YUI Grids

Tutorial Image

Yet another Yahoo products on the list. YUI Grids offers support for multiple widths, fluid layouts, flexible element placement and more.

As with the YUI JS library, each part of this is thoroughly documented with plenty of examples, sample code and screen casts


Tutorial Image

Elastic is a very simple framework with support for fixed, liquid and elastic layouts.

Elastic has a growing community and pretty decent documentation.

JS Animation Frameworks

Recently, specialized JS animation libraries have been popping up with the sole purpose of providing easier way to animate user interfaces. Let’s a look at the most popular ones.

Scripty 2 and

Tutorial Image

Scripty and are based on Prototype and provide a way to seamlessly animate content as well as provide a number of user interface elements to use in our applications.


Tutorial Image

fx is a standalone JS library which focuses exclusively on animation. As such it lets you animate each and every CSS property along a set time line.

It has decent documentation and is extremely small at less than 4 kb.


Tutorial Image

gx is a cross browser framework which again focuses exclusively on animation. It has a number of extremely impressive features including easing, delayed animation and predefined animation rules.

Since it is relatively new, the documentation is a little lacking and the community is hard to find. But it is extremely impressive and definitely warrants a try.


Tutorial Image

Processing.js is built on the canvas element and written by John Resig. It lets you draw elements and then manipulate them on the canvas element.

Since it is a port of Processing for the JS language, it shares most of its advantages including robust support animation capability and shape support.


Tutorial Image

jsAnim is yet another animation library which lets you create very impressive animations. The example on the front page itself is a wonderful example of what can be done with it.

It weights in at a hefty 25 kilobytes compared to 3.7 for fx but packs a lot of features. The documentation is pretty straight forward and should give you a good idea of the basics.


Tutorial Image

Raphael is a tiny library which lets you work with vector elements on your web page. It uses SVG or VML as needed to generate its graphics.

It’s extremely robust and produces extremely impressive results. A look through the demo pages gives you an idea of what it is capable of.

The documentation is pretty thorough and the discussion group is pretty active too.


And we are done! We looked at all the choices you have when you need to choose a web development framework. We looked at all types of frameworks right from humongous server side frameworks to nimble JS animation frameworks. Hopefully, this has been useful to you and you found it interesting.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.


November 17 2009


Exploring PHP Frameworks: CodeIgniter

I thought I would share with you my experience of PHP frameworks, and in particular a framework called CodeIgniter which I have been using a lot recently. A PHP framework is a platform which enables developers to quickly build web applications without having to re-invent the wheel every time they want to, for example, insert data securely in to a database. This article looks at CodeIgniter (, an open-source PHP framework which in my opinion is fantastic.

The need for a framework

I am an English web developer who has been in the business for over 10 years. I started my business when I was just 17 and started coding in PHP when I was 21. I built my first PHP web application, which was a search engine for musicians, completely from scratch in 2003. It has since become a major success and I still proud of it, though when I look at the code I would love to re-build it knowing what I know today.

After working for many clients and after looking to try to develop my own ideas I soon realised that I was spending a lot of time re-producing the same code snippets on different sites. For example, by 2004-2005 I had written my own database interaction class as well as other functions which made life a lot easier when building websites, for example a function that formatted dates nicely.

This effectively was my own framework, but it suffered from not being very well organised and not very efficient. What I really needed was a tidy way of structuring my code, for example being able to separate my database interaction files from my view files which just dealt with logic (if statements) and the HTML. I had to wait a few years for the right solution.

Making those little ideas become a reality

I often get ideas for websites, some crazy and some simple. Most of them got written down and forgotten about because of the time required to build the ideas in to fully functioning websites. That was all until I discovered CodeIgniter in 2008. CodeIgniter in their own words: “is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you’re a developer who lives in the real world of shared hosting accounts and clients with deadlines, and if you’re tired of ponderously large and thoroughly undocumented frameworks.”
In other words it’s a solution that provides most of, if not all of the tools you need to build your ideas in to websites. After downloading CodeIgniter, looking at their demo tutorials and actually having a play with it myself, I was very impressed indeed and realised I could make my ideas become a reality in very little time.

What about the other frameworks?

Before I jump in to my own opinions about how wonderful CodeIgniter is, let’s take a moment to explore the other frameworks out there. I am aware that there will be developers reading this who do not share my views and believe that the framework they use is best for them. I need to just point out that my findings and experiences of the different PHP frameworks have lead me to believe that CodeIgniter is best for me in my situation, but might not necessarily be the best for you in your situation.

Other PHP frameworks I have come across are:

Symfony is a very powerful framework with functions for practically everything. I worked at an agency that used this framework and though I delved into it a little bit, I never fully could understand it (also the manual for Symfony was very big and heavy!). However it was just right for the website that it powered and I know that a lot of big and well known websites use Symfony. Symfony isn’t that easy to install and does have a steep learning curve.

CakePHP, as far as I’m aware is very similar to CodeIgniter, so is easy to install and well documented. I have to say I haven’t tried CakePHP but would recommend you look also at this open-source framework as well as CodeIgniter if you want to make some comparisons between the two.

Zend in their own words, “is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase”. Zend is rather complicated and expects you to know quite a bit about coding, so is perfect for people who understood the previous sentence. Howerful Zend is also very powerful, widely used and supported by a large community.

Take also a look at this post: Best PHP Frameworks to build quickly complex web applications

Designers who are also developers

I don’t claim to be a hardcore PHP programmer and know plenty of programmers who are total experts in PHP. I would say that I’m more of a designer who became a developer. As a result of that I sometimes struggle trying to understand something like Zend or Symfony, as you found out above. What I needed was a framework that really explained everything clearly to me, was built specifically for people like me but also had a large community of users in the same boat as me.

I found CodeIgniter had all of these things. The minute I first landed on their website I knew that they had designed their framework with people like me in mind. After downloading and playing with CodeIgniter on my local machine I began to read their documentation and was worried that was where it would all end, but instead I found the documentation on their website really easy to understand and very clearly laid out.

I had soon built an idea that had been running around in my head in to a fully functional website, with user login, avatar upload, questions and answers submission and a very basic CMS. I built that entire website in a weekend, thanks to CodeIgniter. Every time I got stuck I simply searched the community forums, or asked a question and got a response very quickly, and that was only when I couldn’t find the answer I was looking for in the documentation, which was quite a rare occurence.

Tidy code makes all the difference

Tidy code, but also code you can re-use makes all the difference. CodeIgniter uses something called “MVC” which stands for “Model – View – Controller”. The idea behind this is you can separate your database functions (”model”), from your view files which contain your HTML (”view”), and link the two together (”controller”).

By using this practice your code is tidy and re-usable. For example, when building my questions & answers website I could simply just copy and paste the database call which selected all my users, rename the table name in a single line of code, then I would instantly have another function which selected all the questions. By using their “Active Record” class, you can easily put a ‘where statement’ in which only selects records from a certain category, for example.

After building one of my ideas in an entire website in just 3 days, I quickly found my dusty book of other old ideas and realised I could build these in to websites in very little time. How exciting!

Just have fun!

I suggest you download CodeIgniter, install it and have a play. Even if you don’t know much about PHP or programming I can guarantee that you will soon pick up enough of the basics that you will have a basic blog up and running in very little time, providing you follow their tutorials and documentation carefully.

Who knows, you might even end up putting your PHP developer that you hire in at a very expensive rate out of a job! Then again, if we all stick to what we are really good at doing, maybe not – but you can still have a lot of fun trying!

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.
No Soup for you

Don't be the product, buy the product!

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