Front-End Web Stuff

Profiling CSS for fun and profit. Optimization notes.

Fri, 06 Jan 2012 15:26:29 -0600

Profiling CSS for fun and profit. Optimization notes. :

This guy used Opera’s experimental “style profiler” to optimize a one-page. This tool shows the parsing time of CSS selector matching, document reflow and repaint.

Read the Notes section to get to the real meat of this article.

Responsive Data Tables

Thu, 15 Dec 2011 10:04:05 -0600

Responsive Data Tables:

I AM IN LOVE. This is the coolest tricks I have seen in a long time. This technique shows how to apply media-queries to tables so your data displays nicely.

Simple Styles for 's

Fri, 02 Dec 2011 10:08:05 -0600

Simple Styles for 's:

A bunch of examples for styling

’s. Uses a lot of pseudo code (::before and ::after) and css3 gradients.

HTML Ipsum

Thu, 01 Dec 2011 10:11:05 -0600

HTML Ipsum:

Ipsum text already wrapped in HTML elements.

Icon Font

Tue, 29 Nov 2011 10:26:05 -0600

Icon Font:

An example site showing the coolness of icon fonts.

Ultimate CSS Gradient Generator

Mon, 28 Nov 2011 15:14:33 -0600

Ultimate CSS Gradient Generator:

This is pretty useful since making a gradient cross-browser can be time consuming. This will give you a fall-back color, the code for the various vendor prefixes and the filter code for IE6-9.

Wrapping Long URLs and Text Content with CSS

Fri, 14 Oct 2011 15:16:10 -0500

Wrapping Long URLs and Text Content with CSS:

I refer to this all the time when I need to wrap text that is too long for its parent container.

Styling HTML Lists with CSS: Techniques and Resources

Fri, 14 Oct 2011 15:14:16 -0500

Styling HTML Lists with CSS: Techniques and Resources:

This really helped me when I was first trying to figure out how to style HTML lists. It is a couple years old but still a good resource

Current HTML5 Working Spec

Fri, 14 Oct 2011 15:04:47 -0500

Current HTML5 Working Spec

Mo’ robust paragraph indenting

Fri, 14 Oct 2011 15:03:00 -0500

Mo’ robust paragraph indenting:

Some examples on formatting paragraphs.

Less Css for .NET

Tue, 11 Oct 2011 14:50:16 -0500

Less Css for .NET:

I am using this in a test project right now. It is really easy to install and is rather fun to play with. There is even an option to have it minimize your CSS for you.

Here is a detailed tutorial to install dotlesscss in your project:
http://tedgustaf.com/en/blog/2010/261/setup-dotless-in-aspnet-project/

New HTML elements and surrogate DIVs

Tue, 04 Oct 2011 09:59:00 -0500

New HTML elements and surrogate DIVs:

This is an interesting idea that I just came across today. The idea is to use the HTML5 elements (i.e.

) and instead of using a javascript shim you place a

with a classname inside the element.

Here is what the code would look like:

...

There is also the option of nesting the the elements, as descriped here.

If I had to support old browsers with javascript turned off, I might think about doing this but I really dislike writting junk HTML. I tend to use a javascript shim or modernizr even with the issues they cause.

Scalable and Modular Architecture for CSS

Mon, 03 Oct 2011 16:59:00 -0500

Scalable and Modular Architecture for CSS:

A way to organize your CSS for larger sites. I am not sure if I will use this but it does make me think about how to do this.

I am thinking that I will try this on the next small site that I work on.

CSS3 Please!

Wed, 07 Sep 2011 14:21:29 -0500

CSS3 Please!:

This site is really handy to figure out these CSS3 properties:

border-radius
box-shadow
gradient
rbga
transition
text-shadow
@font-face
box-columns

This is an open source project, so if you want to contribute, you can do so here

A look at the HTML5 section element and headers

Wed, 07 Sep 2011 11:13:00 -0500

A look at the HTML5 section element and headers:

I am always trying to figure out if I should use a header and format it differently because of the way the design is or if it makes more sense to use another element. It would help if every designer I worked with understood the DOM and would give me consistent header designs but I can’t always push back on something that seems so trivial.

This article really helped me figure out a tactic that I can use to style the various headers I have scattered around.

CSS3 Transparent Borders

Thu, 01 Sep 2011 13:42:00 -0500

CSS3 Transparent Borders:

Have a design that needs your border to be transparent? This tells you how to do it.

You use it this way:

#transparentborder {
   background: white;
   border: 20px solid rgba(0,0,0,0.3);
   background-clip: padding-box;
}

background-clip has three options:

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

Read the article to see how each of these work.

RGBA Backgrounds

Thu, 01 Sep 2011 12:30:00 -0500

RGBA Backgrounds:

How to use RBGA background crossbrowers (In IE too!)

Javascript polyfill for Media Queries in IE6-8

Mon, 29 Aug 2011 15:22:00 -0500

Javascript polyfill for Media Queries in IE6-8:

css3-mediaqueries-js is a javascript polyfill to make media queries work in older verisons of browsers.

Micro Clearfix Hack

Mon, 29 Aug 2011 11:47:00 -0500

Micro Clearfix Hack:

A way to clear floats that doesn’t require extra markup.

Media Queries for Standard Devices

Mon, 29 Aug 2011 11:24:00 -0500

Media Queries for Standard Devices:

Handy reference for creating Media Queries for different devices.

What I am finding the most useful is this one:

@media screen and (max-width : 480px) {

/* CSS Here */

}

I like this because it will apply the styles to the landscape view on a mobile device. We’ll see if I like it in another day when I start testing this design.