Posts tagged as:

css

In preparing to show off SASS, I found the Compass system, which uses SASS and organizes your stylesheets in a unique way. In this tutorial, I walk you though installing compass, installing the 960 grid system, and organizing your SASS stylesheets in an intelligent way.

One note, I couldn’t remember the URL for the 960 grid system. It’s http://960.gs

Download 158.5 MB
Download (iPod & iPhone) 97.3 MB

{ 11 comments }

What is HAML?

HAML is a markup language. It’s specifically designed to replace the HTML + ERB combination typically used in Ruby applications to render web pages.

Why I like HAML

HAML is nice for several reasons, all revolving around how its files are structured.

First, it’s indentation driven. I have run into a few issues with indentation, but for the most part, it’s pretty clear which parts of the page are within other parts of the page. I’ve never been a fan of whitespace delimited code, but in this case, it’s kind of nice.

Second, adding a class or id to an element on your page is as simple as #id or .class rather than class=”class” or id=”id”. It’s not just about saving typing. I actually find it easier to read.

Third, HAML includes SASS. SASS, or syntactically awesome stylesheets, give you a lot of features like storing your colors, sizes, and other common settings in variables, nesting styles, and inheritance. This saves you a TON of copying and pasting in your stylesheets. You can say $chadfowlerpink instead of #993366. (Click here if you’re wondering about Chad Fowler pink.)

Finally, you don’t have to declare your div tags. This is particularly useful because most layout these days is done using div tags and css attached to your classes and ids. So, instead of <div class=”…”> all over the place, you see .class1.class2.class3#id.

Sounds Great! Why Wouldn’t I Use It?

HAML use really boils down to the people involved. I’ve worked with several designers who work very well in HTML and CSS. I’ve also worked with several developer who have never programmed with HAML. These are the two types of people you need to consider when choosing HAML. Collaborators and maintainers.

Is it worth forcing collaborators like designers to undergo the learning curve to learn to use HAML? HAML comes with an HTML converter. Is it worth the extra step if they’re not going to learn HAML? Weighing the collaborators’ learning curve against the increase in productivity you’re likely to see as a developer is worth considering.

As for maintainers, keep in mind that you’re not likely to be the programmer building this project forever. Are you making it more difficult for your employer or client to find someone who can pick up their application and continue to work on it? Are you adding to the training required for new employees? (I don’t find this to be too much of a problem with new developers.)

HAML doesn’t have a steep learning curve, so in most cases, using it is worth it. But these are questions to keep in mind.

Where do I get HAML?

You can find out more about HAML at http://haml-lang.com/. To install it, just
gem install haml

{ 1 comment }


Want to know the basics of CSS? Watch this screencast and learn everything you should know as a web developer. We’ll cover the basics which include colors, borders, padding, margins, lists, fonts, backgrounds, tables, links and floats. This is a very basic screencast, so if you are already familiar with these topics, this might be just a review for you.
Download 98.1 MB
Download (iphone & ipod) 51.5 MB

{ 2 comments }

In this screencast we’ll cover using variables, mixins and operations with LESS while building the header for the our Flitter front end.

In this screencast we’ll cover using variables, mixins and operations with LESS while building the header for the Flitter front end.
Download 89.1
Download (iphone & ipod) 50.4

{ 0 comments }


In this screencast we’ll cover the basics of setting up a LESS file to compile into CSS as we provide an HTML front end to Flitter, a Ruby on Rails Twitter clone.
Download 55.1 MB
Download (iphone & ipod) 30 MB

{ 2 comments }


In this screencast we’ll cover aligning floated elements on an HTML page using jQuery, the jQuery Masonry plugin and CSS.
Download 83 MB
Download (iphone & ipod) 55 MB

{ 2 comments }

We’re almost done! The remaining screencasts are already recorded, but not edited yet. To speed things up, I split it up into 3 or 4 screencasts. This one shows how to make the site look and feel like Twitter and also populates the right side column content. A bit of CSS, lots of Rails, and more of my ramblings 😀
Download 210 MB
Download (iphone & ipod) 90 MB

{ 0 comments }


Don’t want to take the time to create a layout for your new Ruby on Rails application? Don’t worry. Use the Themes plugin! In this screencast, I show you how to easily add a layout with built-in menus to your existing Rails application using only 1 line of code.
Download 142.9 MB
Download (iphone & ipod) 46.7 MB

{ 0 comments }


In this screencast, we continue our challenge of creating a Twitter clone called ‘Flitter’ using Ruby on Rails. We learn how to use jQuery to create a countdown for the text area box. We also set up adding and removing friends via the interface. Oh… you hear my baby cry and my sister-in-law call. Fun stuff 😀
Download 399 MB
Download (iphone & ipod) 119 MB

{ 0 comments }


Now that we have a backbone to our ‘Flitter’ application, we learn how to create the front end and tie it all together. In this screencast, I cover a lot of CSS and getting your site to look good. I apologize for it lasting 1 hour, but I decided it’s better than chopping it up.
Download 412 MB
Download (iphone & ipod) 133 MB

{ 0 comments }