For those who don’t know of the concept, OOCSS stands for Object Oriented CSS — @stubornella can explain it better than me on the GitHub repo: https://github.com/stubbornella/oocss/wiki

I had previously considered this sort of approach to only be suitable for prototyping frameworks, such as Zurb Foundation. I was originally hesitant of the presentation naming of the classes (I was never a fan of presentational grids to begin with) but I have understood that this approach is much easier to understand when multiple people are working on a project, without any documentation.

The idea of potentially using multiple classes for each element struck me as bloating the file, but it makes sense.

So, my concerns:

Grids. Name them how you like: “.size2of3, .col1″ but they work. If it were using those, or using “#primary” I know which I’d go with now.

The idea in the past has been that we could restyle #primary and change the width, padding, everything. But when has that happened? Restyling a website with JUST CSS?

I like presentation grids now.

The next thing, whether to go presentational on anything else? Colours, sizes? In some previous projects I used classes like “.orange”. This I feel is wrong. I now define primary, secondary and tertiary colours. Not only does this keep a sense of order through the whole project, but if you change the brand, the colours can change with no HTML amends (sounds a bit contradictory I know).

The next thing. Responsive. I’ve been a massive advocate of responsive, but the issue I have with presentational grids is that they no longer make sense when you want to change the view.

Some systems decide to revert to a 1 column approach. Whilst this might be OK for mobile, the tablet could be different. Zurb actually have phone class names that you can use. e.g. (“.size2of5 .phone1of1 .tablet1of2″) but that seems to require a lot of extra thinking, and extra bloat that is unnecessary.

I’m still thinking about this one. It also doesn’t cater for the ‘mobile first’ approach.

So, there are lots of things to think about, but I do feel like it is the way to go.

Want to know more. Well, follow @csswizardry and @stubornella and check out the following pages:

• https://github.com/stubbornella/oocss/wiki
• http://vimeo.com/44773888
• http://oocss.org/

In this post I’m going to be talking about box styling – any CSS effects that can be implemented on all 4 sides of an element. This can include:

• padding
• margins
• borders

There are 4 different ways of ways of applying styles to the sides of an element. The most conventional is the longest version which styles the sides clockwise from top, right, bottom and left. You can remember this as TrouBLe. This method allows you to set a different style on all 4 sides.

element{padding: [top] [right] [bottom] [left]}

Using 3 figures allows you to style the top, with left and right at the same time, followed by the bottom. This is useful if you require the same size on the left and right, but a different size for top and bottom.

element{padding: [top] [left/right] [bottom]}

Styling both the top and bottom, and the left and right sides can be done using 2 figures. This can be used when the top and bottom sizes are the same and the left and right sizes are the same.

element{padding: [top/bottom] [left/right]}

The last possibility is where all sides have the same size declaration. This can be achieved by using just one value.

element{padding: [top/bottom/left/right]}

Bonus Tip

When using 0 as a value, it doesn’t matter whether it is a pixel, em or any other measure so whenever using 0, just declare it on its own.

The design called for centerally aligned list item links, and there could be 3, 4, 5 or more links. Initially I was stumped as to how to create this effect. I had considered a left margin to create the illusion of centre aligning for each possible number, but I knew there was a better way. I’m always aiming for a solution that works in the older browsers too, and this includes IE6. I don’t know why I do it to myself, especially as it apparently only has less than a 5% market share nowadays.

The Example

I’ll cut to the chase; here is the HTML and CSS.

https://paulrandall.com/experimental/centre-ul/

So How Does It Work?

On the UL, I am centre aligning the text, effectively making all the content aligning this way. That’s the real key to it, second only to display:inline on the LI, because a float will push everything to the left.

Below is all the CSS you need


ul{text-align:center;}
li{display:inline;}


Simples!

It is inevitable then that these new and shiny capabilities will catch a web designer’s eye (especially after years of browser constraints) but are we turning our eagerness to use the latest styling techniques into a world of monotonous and similar designs?

A Screenshot Showing Some Modern Design Trends

It’s worth saying that there are some great sites being produced at the minute. Something I hope to write about in a future post.

I’m a Magpie Designer Too!

This post isn’t without a sense of irony, i’m all too well aware of as this site features many of the effects i’m talking about. I’m clearly a magpie designer too!

In a years time things will probably calm down when “the next thing” arrives, whatever it is.

My experiment uses a top left, top right, bottom left and bottom right png gradient on the HTML element, with a repeating png overlay on the BODY.

As I firmly believe that you should make your design look at least acceptable in Internet Explorer 6, I have used Modernizr, a JavaScript library that allows you to take advantage of emerging web technologies.

It’s the first time I have used it and I can see the huge potential of it. This system uses feature detection to add classes to the HTML document, allowing you to progressively enhance your websites.

In this example, I have been using multiplebgs, which allowed me to use the CSS3 technology only on sites that supported it. That allowed me to use a fallback JPG image for browsers that don’t.

Here is the CSS code:


html.multiplebgs{
background-color: #141414;

background-position: top left, top right,
bottom left, bottom right;
}
body{background: url('fallback-bg.jpg') repeat; height:100%; width:100%;}
.multiplebgs body{background: url('body-bg.png');}


See the Example

https://paulrandall.com/experimental/css3-backgrounds/

If you have used multiple backgrounds before i’d love you to leave a comment and link to an example.

So I decided to create a ‘Kitchen Sink’ of markup and basic styling, using some content from the great HTML-Ipsum.com plus a few extra bits.

If you don’t currently use something like this already, I do urge to add it to your next new website, because even if you don’t include a table, or list at the moment, you (or your client via WYSIWYG) may do in the future.

The document is actually HTML5 and UTF-8, but you can copy and paste the HTML/CSS however you like. I also tend to add a reset style inside a global stylesheet to save downloading two documents. I’d love hear how you layout or comment your CSS and whether you split them into different files such as layout and typography too.

Open kitchensink.htm

Note: If you have any additional code or CSS which you think should go into the document, add a comment below. Thanks.

Previously, I have used IE7/ IE6 specific style sheets with completely new backgrounds, each 1px to the left or right of the original to compensate, but I decided to do some digging and found this blog post:

http://www.sohtanaka.com/web-design/1px-background-alignment-bug/

One of the comments I came across suggested a very simple alternative to multiple stylesheets and images, and is the version I used in my recent design:

html{background: #242424 url('../img/background.gif') repeat-y center; margin-left: -.1px; /*1px shifting hack*/}

A simple use of a margin allows the same image to be used for all browsers. What’s even better is that, although technically a hack, it is valid.