me

def Blueprint to the Rescue

posted_by :Amos, :on => 'August 25th, 2008'

My biggest issue in web development has always been design, and keeping my css files in a state that is understandable. I always end up with a million classes and ids that are hard to keep up. Dealing with Internet Explorer and its "unique" way to do certain things can make everyone wish for standards.

With all this headache I've found my HeadOn with BlueprintCSS. With one set of classes and some forethought I can get a nice looking page that looks the same in all my browsers. I'd go into detail, but the tutorial is really all the jump start you need.

BlueprintCSS does keep me in a grid layout, but this constraint is easy to live with when I know that every browser is going to look like I expect.

If you're wishing all your browsers looked the same after a hard days work, BlueprintCSS might be the solution for you.

tags = %w( css )
{ |it| digg it }
self.add_to_delicious

end

def Progress Bars using css

posted_by :Amos, :on => 'December 6th, 2006'

I spend a little time trying to get css to make a progress bar for me. It took some thought and time, but everything worked out well. I thought I would put it here for everyone to see.

The CSS 


.prog-empty {
  width: 400px;
  height: 15px;
  background: #247;
  padding: 0;
  margin: 20px;
  border: 5px;
}

.prog-bar {
  height: 15px;
  background: #f70;
  padding: 0;
  margin: 0;
}

The html 


< div class="prog-empty">
  < div class="prog-bar" style="width: 63%">
  </div>
</div>

Now the width percentage needs to be replaced with a function. With the exact code from above I get something like:

I hope everyone can find this useful. Remember that you can use url("image.file") in place of the colors.

tags = %w( css )
{ |it| digg it }
self.add_to_delicious

end

end