A responsive CSS framework on a baseline grid

Wow! It’s been too long since I’ve published a post. Sorry guys, but I’ve been working on a few new projects. The first of them is the AnonAnon CSS Framework. Does the world need another CSS framework? Probably not, but mine has a few cool features that you won’t find elsewhere. Here’s a list:

• Minimal design and lightweight code
• Responsive for mobile
• Built on a baseline typographic grid
• Includes jQuery UI elements
• 10 column, fluid grid

To learn more or download, please head over to anonanon.org.

Facebook Page Framework

Enter the 520 Grid System. The developer describes the framework as an “HTML/CSS Framework made for Facebook Page Developers and Narrow Website Templates Lovers”. Here’s a list of features:

• 520 Grid System is 520px wide including 16px left and right margin around container.
• It is based on 12 grids with 16px gutters with it; 12 is nice number that can be divided with 2, 3, 4 or 6 to get inline rows with equal width.
• Built-in text, table, and form styles coming soon.

View Demo on Facebook | Download for Free

Running your programs

I’m going to start with the very basics here. Below you’ll find some useful tips on starting out with Ruby. I work on a MAC, so all my references will be to working on one. If you are working on a MAC, running Snow Leopard, Ruby is already installed for you. Score! If you are running a local server like MAMP (and I suggest you do), in your htdocs directory create a new ruby directory; feel free to call it whatever you want.

A note here, you don’t need to be running a local server for this to work, I just like to keep all my web files there.

Creating your first program

Ok let’s create our first program. Open Terminal, navigate to your Ruby directory and create and open a new file called lesson01.rb. All Ruby files us the .rb file extension. Once the file is open, let’s write our program. Enter the below code:

puts 'yowza'

Save the file and exit. To run the program type ruby lesson01.rb into Terminal and hit enter. You’re program should run and return the value yowza. That’s it, you’ve run your first Ruby program.

You can use single or double quotes in Ruby when defining a string. However, the common best practice is to use single quotes.

puts is a command for inserting a string. It stands for put string. check this out for more info on strings. Now that might not be very fancy, but it gives you a basic place to start.

Comments

There’s a couple of ways to use comments in Ruby. The first is to use a # symbol for single line quotes. For a block of text, use =begin comment here =end. Note, that is case sensitive. See below for an example.

#this is a commented out single line of text

=begin
this is a commented out
block of copy that spans
multiple lines
=end

Returning Values

In Ruby almost all values will be returned as true. If you want a value returned false, you must use one of these two keywords: false or nil.

Numbers

In Ruby, numbers without decimal points are integers. Numbers with decimal points are called floats. All the standard operators apply: + addition, – subtraction, * multiplication, and / division. If you divide two numbers that result in a number with a decimal, Ruby will round down to the nearest integer. For example 3 / 2 would return 1, not 1.5. To try out some of this in practice, create a new file called lesson02.rb and enter the below code:

puts 2 + 2
puts 10 - 5
puts 10 * 10
puts 10 / 8

Save the file and exit. Now run it in terminal by entering ruby lesson02.rb. Your output should be 4, 5, 100, and 1. Note how 10 / 8 is actually 1.25, but it is rounded down to the nearest integer, which is 1.

At this point, I’ll stop for day one. Hopefully that was clear and simple. If you have any questions, please feel free to leave a comment.

Ruby vs Python vs PHP

At work we run a couple websites using the python/django combo. I actually quite like django and recently read the Django: Visual QuickPro Guide. Although, I’m a django fan, I wasn’t totally sold on python and the extra sensitive syntax.

As far as PHP goes, I have some experience with WordPress theme design but PHP has never really sank in for me. I also recently finished reading Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Website, which is an excellent read for beginners. However, it didn’t really sell me on PHP after reading. It made PHP feel overly complicated and challenging to learn.

What really made my mind up was, the free web-based book Learn to Program, by Chris Pine. This is an amazing online resource. Chris starts from the very basics and talks about programming in general. He then moves into the Ruby language and does a great job of helping the absolute beginner along. If you are interested in programming or Ruby, I would definitely recommend checking it out.

Next steps

Once I finally decided that Ruby was the language I wanted to concentrate on, I started to look for additional online resources. One of the better ones I found was rubylearning.org. They have a ton of free content, but they also offer some cheap online courses. I enrolled myself in the Core Ruby Programming course that only set me back $15. The class started this week and runs till the December. As I’m going through it, I’ll post some status updates and maybe even some tutorials.

Final thoughts

The Ruby versus Python argument is a sensitive one. At the end of the day, both languages are great and it’s more about personal preference. I decided to go with Ruby because programers actually refer to it as really fun to work with. Also, I’m a newb when it comes to this type of programming, and Ruby looks like it is a little easier to learn. What’s your opinion? Feel free to leave a comment below.

In the past, you would’ve had to use javascript or another scripting technique to achieve this formatting. However, this method allows for pure CSS3 code to get the zebra-striping to work. The one small downside is the fact that it is only supported by CSS3 browsers.

Work around for older browsers

This method is a little code heavier, but it will work in all browsers. First things first, we need to create some styles for the alternate table rows. Check out the example:

tr.alt {
 background: color: #ccc;
}

Here’s where the code heavy portion of the technique comes into play. You need to insert the alt class on every even <tr> tag in your table, as shown below:

<table>
 <tr>
  <td>a row</td>
 </tr>
 <tr class="alt">
  <td>another row</td>
 </tr>
 <tr>
  <td>a third row</td>
 </tr>
 <tr class="alt">
  <td>a fourth row</td>
 </tr>
</table>

That’s it, that’s all, you can view a demo here. If you want the lighter CSS3 version, check it out at: csswizadry.com.

Developer’s Description

“jQPad is an iPad web development framework which makes iPad compatible websites easy! It uses jQuery and some awesome CSS techniques. Its very easily theme-able and also has some features which makes life for iPad development so much easier!”

View Demo | Download

Download The Source Files

Small Icon With Body Copy

This is one of the most commonly messed up use of icons you’ll see out there. The web designer will simply insert the icon image code right before the text. I’d highly recommend against using this technique. Here’s an example of it:

<img src="icon.gif" />My text here

Why does this suck? Because you have no control over the positioning of the icon. A better practice would be to wrap the the text in a <span> tag and set the icon as the background image. Also, this technique works the best when the height of the icon matches the height of the text. Therefore, go with a 16px x 16px icon. We can adjust the vertical positioning of the background image/icon if need be. Here’s what the code looks like:

CSS

.icon {
 background: url(icon.png) 0 0 no-repeat;
 display: block;
 height: 16px;
 line-height: 16px;
 padding-left: 20px;
 margin-right: 10px;
}

HTML

<span class="icon">Icon text goes here</span>

Here’s What It Should Look Like

The Code Explained

• We set the background property to our icon image.
• The position is set 0 0, you shouldn’t have to tweak this, as long as your icon height matches your text height.
• We display it as a block so the whole icon is shown.
• The height is set to the height of our icon.
• line-height forces the text to align vertically with the icon.
• We pad the class left 20px to leave space for the icon.
• Then we add a margin of 10px right to create some space between the icon and the icon text.

That’s it, now your icon will always appear vertically centered to your text. As well, it will have the same spacing between the icon and the icon text.

You can easily apply this same technique to larger icons that are combined with larger icon text. Simply tweak the height, line-height, padding, and margin to match your new icon and text sizes.

Large Icon With Body Copy

Using a larger sized icon with body copy is quite similar to the above technique. We simply need to tweak some of our property values to work with the bigger icon. Let’s assume the size our larger icon is 48px x 48px. Here’s what the code looks like:

CSS

.icon-big {
 background: url(icon-big.png) 0 0 no-repeat;
 display: block;
 height: 48px;
 line-height: 48px;
 padding-left: 50px;
 margin-right: 10px;
}

HTML

<span class="big-icon">Icon text goes here</span>

Here’s What It Looks Like

The Code Explained

• We’ve increased the height of the class to be 48px, so it matches the height of our larger icon.
• We’ve also added a line-height of 48px. This will force the our text to center vertically in the layout.
• I’ve also increased our padding-left to 50px to leave enough room for the width of the new icon.

It’s that easy. But what about links? Read on for an explanation of making the icon and text work as a link.

Adding A Link

There are two ways we can do this. The first would be making the copy a link and leaving the icon an image. The second way would be to make the icon and copy all part of the link. It’s actually quite easy, it simply depends on where you place your link tag. See below for the two examples:

Only The Copy Is A Link

<span class="icon"><a href="#">link copy here</a></span>

The Icon and Copy Are Both A Part Of The Same Link

<a href="#"><span class="icon">link copy here</span></a>

That’s it, that’s all. This is a fairly simple technique, but it gives you way better control of the positioning of your icons. If you have any questions, please leave a comment.

View The Demo

Download The Source Files

What’s Your Question? Hit Me!

Feel free to ask anything CSS3 related. There are no stupid questions, so don’t feel intimidated to ask something you think might have a simple answer. Chances are, someone else has the same question. Simply post your question in the comments below, and I’ll reply asap.