Jon Mulholland - Filed under 'webdesign'

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 27, 2009

Built a new Posterous theme this evening

Might consider cleaning it up a bit / sharing it as a free theme if there's any demand for it. Let me know.

Loading mentions Retweet

Filed under // posterous theme webdesign

Comments [1]

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]

December 19, 2009

Smashing Book

Sent from my iPhone

Loading mentions Retweet

Filed under // books smashingbook webdesign

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]

September 7, 2009

Horizontal Navigation Menus: Trends, Patterns, and Best Practices

"The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. The dominance of horizontal navigation over vertical (i.e. down a sidebar) is obviously due to the design and content limitations of the latter. Notably, CNN discovered those limitations before switching from vertical to horizontal a few years back.

There are, however, many styles of horizontal navigation in modern Web design. Some offer usability advantages for certain types of websites, while others are aesthetically better."

via smashingmagazine.com

Good summary of some best practices, do's and don'ts when designing sites using the now ubiquitous horizontal navigation menu.

Loading mentions Retweet

Filed under // designtrends webdesign

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 6, 2009

Yes, You Can Use HTML 5 Today! [HTML & XHTML Tutorials]

The blogosphere was jerked into excitement when Google gave a sneak preview of its new service, Google Wave. Only the select few have an account, but there’s an 80-minute video about it on YouTube for the rest of us. The service is an HTML 5 app, and so HTML 5 has gone from being too far away to care about to today’s hot topic.

via sitepoint.com

A good outline of some of the key elements - I'm giving serious thought to starting to use HTML 5 in new projects going forward.

Loading mentions Retweet

Filed under // html5 w3c webdesign

Comments [0]

July 6, 2009

Rounding Up the Top 10 jQuery Lightbox Scripts

Every loves lightbox javascript effects, since the original Lightbox script there have been countless clones generated for all the popular Javascript libraries. This collection rounds up the top ten Lightbox scripts for jQuery in particular, so remember to keep it bookmarked for your next design project!

via line25.com

10 useful jQuery scripts for creating 'lightbox' effects on web pages.

Loading mentions Retweet

Filed under // jquery lightbox webdesign

Comments [0]

Tags

webdesign