Jon Mulholland -
Tags


January 8, 2010

CSS template for creating @Posterous themes - based on @Woork's Four Bubbles Model

I'm tidying up the Posterous theme I hacked together over the Christmas break so I can share it properly.

In doing so I've created this CSS template - useful because it outlines all of the main structual elements used in the 'Clean Sheet' Posterous theme on which my theme is based.

The template uses Antonio Lupetti's Four Bubbles Model to organise the CSS code more methodically, I've said before what a big fan I am of this approach.

Please go ahead and use if this template is helpful to you in creating your own themes.

Click here to download:
posterous_basic_layout.css (1 KB)

Loading mentions Retweet
Filed under  //   css   posterous   webdesign  

Comments [0]

December 20, 2009

Interesting Thread on CSS Tricks; Hyphens, Underscores, or CamelCaps?

"I was always a camelcase guy.. but in the last six months or so citing readability as a my reason i’ve migrated to hyphens. Underscores are simply an irritation to type repeatedly and quickly while coding."
via css-tricks.com

This poll on CSS Tricks caught my eye - what's the best format to use for text strings when you can't use spaces; CamelCaps, Hyphens(-) or Underscores(_)?

I've generally always_underscored_strings_together but some of the comments pointed out that this can be a bit irritating if you have to repeatedly type this into your code. Hyphens certainly are quicker, but as I can see it there is one big advantage in using underscores - 'selectability' as Maggie Wolfe Riley calls it.

If you use underscores to chain text together, it's becomes very easy to select. A quick double click in Safari, Firefox or any code editor will select the whole phrase - ready to be moved, copied or whatever. Something that doesn't work with hyphens.

Anyway, vote in the poll on CSS Tricks or leave some comments; the discussion thread is a good read.

Loading mentions Retweet
Filed under  //   css   webdesign   webdevelopment  

Comments [0]

October 19, 2009

Brilliant approach to CSS coding: The Four Bubbles Model

"This model is thought to help web designers develop optimized, simple to maintain CSS files, minimizing the number of classes and avoiding redundant and inconsistent declarations."

via woorkup.com

This is the most useful bit of CSS advice I've read in a long time.  Antonio Lupetti walks through the 'Four Bubbles Model' - a really neat, methodical approach to writing CSS in which four phases are used to optimise code:

  • HTML Standard Elements
  • Main Structural Sections
  • Custom Classes
  • Optimization of Developed Code

As one of the commenters on the post says, a definite AHA! moment...

Loading mentions Retweet
Filed under  //   css   webdesign   webdevelopment  

Comments [0]

August 3, 2009

Mastering CSS; Styling Design Elements - Smashing Magazine

CSS isn’t nearly as tricky as some people tend to believe. Below are fresh tips and techniques for creating and styling design elements with CSS. They’re a good place to start if you’re new to CSS but are valuable even if you’re a veteran designer. Not all the techniques are strictly CSS; some include integration with JavaScript or XHTML to extend the functionality of your site.
via smashingmagazine.com

Great, bang up to date CSS tutorials covering layout & UI techniques, navigation & menus, galleries, typography and icons & buttons. Going to take some of these on holiday to do on the plane journey.

Loading mentions Retweet
Filed under  //   css   tips/tricks   webdesign  

Comments [0]

July 9, 2009

Aspect ratio and scaling images CSS tip...

If you are making an image scalable using css, for example:

img { width: 100%; }

it is worth also setting the adjacent dimension to auto, overiding any previously defined value:

img { width: 100%; height: auto; }

This will maintain the aspect ratio of the image and stop it from being stretched or squashed.
via James Fenton from tipster.carsonified.com

What a handy little CSS tip.

Loading mentions Retweet
Filed under  //   css   tips/tricks   webdesign  

Comments [0]

July 2, 2009

A Closer Look At the Blueprint CSS Framework - Nettuts+

Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and we'll take a look at demo application that uses Blueprint to get a better idea of how to use actually use the framework.
via net.tutsplus.com

I'm really finding the Blueprint CSS framework helpful - more so than 960.gs from some reason. I think it's because I like the typography reset it provides.

This is a really nice tutorial for getting started with Blueprint.

Loading mentions Retweet
Filed under  //   blueprint   css   webdesign  

Comments [0]

June 26, 2009

35 CSS-Lifesavers For Efficient Web Design

35 new and useful CSS tools, generators and resources that can significantly improve your workflow and reduce your time efforts for CSS-coding.  Whether you’re writing, compiling, refining or experimenting with CSS code – or all of the above – these tools can help you get the job done faster and better than ever before.
viaSmashingMagazine.com

Some absolute gems in this useful list of CSS tools, I like the look of Hamil.  Texster is a very useful tool I've already made use of.

Loading mentions Retweet
Filed under  //   css   tools   webdesign  

Comments [0]

Deep Black Posterous theme by Jon Mulholland. If you'd like your own custom theme please get in touch.