My laptop is a Pentium M @ 1.2 ghz w/512mb RAM. My desktop is an AMD64 @ 2.2 w/1.5gb RAM.

WTF.

… and don’t get me started on when I had HH running on my laptop. It was totally useless for just about anything useful. Not even running XFCE could save the day.

That said, I’m downloading Linux Mint with high hopes — but not expecting miracles, as it’s based on Ubuntu.

SASS Blueprint Grid

Mix-ins is by far my favorite new feature in SASS 2.0. Now you can write chunks of reusable code:

=clearfix
  display: inline-block
  &:after
    content: "."
    height: 0
    clear: both
    visibility: hidden
  * html &
    height: 1px

… And place it within whatever rule you like

#sidebar
  +clearfix
  border: 1px solid black

Talk about leaner, meaner and more productive. Holy crap!

I’ll be rejiggering the SASS grid generator in SASS 2.0 in the next few weeks. I also have a new SASS project underway for when I have more time, SASS 2.0 will play an integral part in making it all work… without tipping my hand too much, it involves color schemes.

Please refer to Blueprint CSS for instructions and tutorials on how to use the grid.

Feel free to download, use, distribute and modify my work as you like.

[dm]2[/dm]

If you go to the non-www westernunion.com, it does not load. It just sits there and eventually times out at the DNS level without sending a 404 message. This is by far one of the worst cases of poor canonicalization I’ve ever seen. Obviously it’s not hurting their ranking, but still — I would be horribly embarrassed if I was the website manager.

I guess I should stop bashing MS, they’re really trying to dig themselves out of the hole. Vista really didn’t help, but if you ignore the glaring mar, they’re pushing out some pretty darn cool applications. So I will begrudgingly give a hat tip to Microsoft, after years of sucktitude, they are finally coming around.

The right tools for the right job, I suppose. *grumble*

It was a natural progression to go to Microsoft OneNote as audio recording is one of its main features. I can put as many ideas on one ‘page’ as I like, which is especially useful to me as I might come up with several variations on the same theme in one setting. I do this quite often.

OneNote also has text-within-image recognition and indexing, though I’m wondering how Evernote and OneNote stack up against each other on that front. Evernote was able to recognize handwriting fairly easily, and while I haven’t done any comparison, the demo of text recognition in OneNote only shows computer fonts being recognized, which doesn’t impress me.

I’m not sure whether I will switch over entirely or keep using Evernote for textual notes and to-dos etc. I’d much rather keep all my notes in one place, but seriously… Evernote rocks the kazbah as far as search and tags.

He’s been in the NICU since he was born with some respiratory problems. He was on oxygen and was breathing too fast. Now it’s the morning of May 4th and he’s off the oxygen and doing much better. He’s still in the NICU, we’re in there with him as often as we can be. He’s such a beautiful baby boy. I will post pictures as soon as I have them. He does this one-eye-open pirate face that is so freaking awesome.

God dammit, why can’t I stick with one CMS for longer than a month before getting bored?

If you just want to see the end result, here are two beautiful 8-column grids generated entirely using SASS arithmetic:

Fixed: 8 columns 100px wide with 10px margins
Fluid: 8 columns 12% wide with 0.5% margins

Also, if you haven’t the foggiest notion what SASS is (”… now there’s a frood who really knows where his towel is.”) you should probably read up on Hampton Catlin’s site about HAML and SASS.

To start things off, I looked around the net for what was already available on the subject. I already knew about Blueprint, though I had never really worked with it, and I learned about the YUI CSS grids toolkit.

Both of these CSS frameworks are very powerful. Personally, I don’t need that much power for this proof of concept, and it probably would have taken more time to adapt one of the frameworks into SASS than it would to program something from the ground up. So instead I just whipped out my text editor and started hacking.

First, the markup. I decided this would be an 8 column grid, so I started out with 2 columns at 4 grid columns wide.

#grid
  .block.col-4
    %p
      %span 4 col
      Lorem ipsum
  .block.col-4.last
    %p
      %span 4 col
      Lorem ipsum
  %div.clear  
  .block.col-2
    %p
      %span 2 col
      Lorem ipsum
  .block.col-2
    %p
      %span 2 col
      Lorem ipsum
  .block.col-2
    %p
      %span 2 col
      Lorem ipsum
  .block.col-2.last
    %p
      %span 2 col
      Lorem ipsum
  %div.clear  

At first I just wanted to get the measurements right, so I slapped together some static SASS with measurements like so:

#grid
  :width 870px
  :margin 0 auto

.block
  :float left
  :border
    :top 3px solid black
  :margin
    :right 10px
    :bottom = 10px
  p
    :text-align justify
    :margin 5px 0
    span
      :display block
      :float left
      :font-weight bold
      :font-size 200%
      :text-transform uppercase
      :padding
        :right 10px

// Columns
.col-1
  :width = 100px
.col-2
  :width = 210px
.col-3
  :width = 320px
.col-4
  :width = 430px
.col-5
  :width = 540px
.col-6
  :width = 650px
.col-7
  :width = 760px
.col-8
  :width = 870px
  :margin
    :right 0

// Last column must not have a right margin
.last
  :margin
    :right 0

// Clear floats
div.clear
  :clear both
  :height 0
  :line-height 0
  :font-size 1px

So now I have the basics of a static grid. Now let’s add some SASS magic. First, the arithmetic to generate a grid:

// SASS attack!
!columns = 8
!grid_width = 100px
!grid_margin = 10px
!grid_size = !grid_width * !columns + (!grid_margin * (!columns – 1))

Now that we have our grid generator, let’s use these constants to assign rules to the grid.

// Grid container
#grid
  :width = !grid_size

// Columns
.col-1
  :width = !grid_width
.col-2
  :width = !grid_width * 2 + !grid_margin
.col-3
  :width = !grid_width * 3 + (!grid_margin * 2)
.col-4
  :width = !grid_width * 4 + (!grid_margin * 3)
.col-5
  :width = !grid_width * 5 + (!grid_margin * 4)
.col-6
  :width = !grid_width * 6 + (!grid_margin * 5)
.col-7
  :width = !grid_width * 7 + (!grid_margin * 6)
.col-8
  :width = !grid_width * 8 + (!grid_margin * 7)

And viola! We have a functioning grid. You can now easily change the entire grid by changing the parameters of the !grid_width and !grid_margin constants. Here are two examples:

Fixed: 8 columns 100px wide with 10px margins
Fluid: 8 columns 12% wide with 0.5% margins

You can easily use this model to generate grids of any number of columns with any width and margin, using any measurement type you prefer (px, em, or percentages). Hope you find this useful, there is plenty of room for improvement. If you improve upon it, let me know.