LESS or Sass or neither?

Posted in on 27 September 2012 | Comments [2]

CSS preprocessors like LESS and Sass are hugely popular – and for good reason! Once you’ve picked up their syntax, they can shorten the time taken to write CSS, give you all sorts of useful functions, enable CSS compression, and give you a warm fuzzy feeling inside. Well, perhaps not that last one but you get the idea.

I’ve been using Sass for a few recent projects and I quite like it although it does give me a slight sense of disconnect from my normal working environment. In case you might be wondering why, I use (shock horror) Dreamweaver as my main coding and development environment. I find it works really well, OK?!

So, I expect to use Sass more and more but I’m not making it my first priority. Instead, I want to spend a lot more time making my final CSS smarter by reading more about OOCSS, SMACCS and similar – and putting these into practice. For me and my ‘typical’ projects, I can put a style sheet together quickly enough so the time saving factor of LESS or Sass is not the main thing. It just seems to make more sense for me (at the moment) to focus on making the end product smarter.

Of course, time saving and writing smarter CSS are not mutually exclusive but I think that concentrating on one of these will be better for me. You may have a different process or be at a different development stage – in which case, all power to your elbow! (or something like that). For me though, the OOCSS route looks better at the minute.

Responsive web design is easy with fluid layouts

Posted in on 23 January 2012 | Comments [1]

So, I have been thinking a lot about responsive web design recently. I’ve been reading about some CSS frameworks and recoding some of my core files so they can adapt to any grid system that I choose to use. As a result, I’ve decided to use fluid or elastic layouts or hybrid layouts wherever possible from now on.

Read more ...

Checking out responsive grid systems

Posted in on 27 December 2011 | Comments [2]

Over the last few weeks I’ve been browsing a few responsive grid systems/CSS frameworks, partly as a means of learning new responsive web design methods and also because I’ve been considering whether I should completely redevelop the core set of files that I use for website layouts. I think that the answer to that question is ‘No’ because I’ve yet to find a system that completely resonates with me.

Neverthless, I’ve definitely learned some new methods by looking at the CSS/HTML code of each system so I’d encourage you to do the same. Without exception, all frameworks that I’ve looked at have been very well commented so it’s been relatively easy to understand how they work.

I’ve looked at 8 or 9 systems/frameworks and downloaded a subset of these to look into more thoroughly:

  • Get Skeleton is a boilerplate for mobile friendly development and it includes styles for typography, buttons, tabs and forms. It looks a very useful resource that covers a lot.
  • 1140 CSS Grid uses a fluid layout and I love this approach. Fluid layouts may not be suitable for every single site but you gain a lot by doing it this way. Fluid (or elastic) layouts greatly simplify the work that you need to do to make a site mobile friendly with media queries (in my experience).
  • InuitCSS “combines years of my best dev tips, tricks and practices in one handy file”. The InuitCSS framework is perhaps looser than some others but that means you get a very sensible and streamlined system. You can also add to it with plugins (or ‘Igloos’) which extends the core to add more specific functionality. I like that approach.

I’m going to extend my learning here by rebuilding a personal site with one or more of these systems (probably starting with InuitCSS). Why not do the same? I bet you’ll learn some useful new techniques by doing so!

Quick tip: Making jQuery tabbed content available for users without JavaScript

Posted in on 29 August 2011 | Comments [1]

Most users have JavaScript enabled these days but there may be a small fraction of your website visitors that have JavaScript turned off. In these circumstances, it’s generally accepted good practice to make sure that your website content is available to those users without JavaScript.

Read more ...

Just a few things I've seen recently

Posted in on 3 August 2011 | Comments [1]

I’ve been really busy with client work recently but I have managed to set aside some time every day for reading and browsing. Here are some some interesting links I’ve seen in my web travels:

  • There are some great examples cited in 22 Examples of Fixed Position Navigation in Web Design. I’ve been thinking about fixed position elements for a redesign of CVW Web Design recently and I think this article has finally convinced me.
  • The Expressive Web is a show case of CSS3 and HTML5 features from Adobe. The site looks great and is quite interactive with a useful browser support summary at the bottom of each page/feature.
  • CSS Wizardry aka Harry Roberts posted a useful tip about Borders on Responsive Images. Nice one!
  • CSS buttons are more and more popular and CSS3 Buttons highlights a few examples. You just wouldn’t think that no images were used here!
  • There are some beautiful web design examples given in Phil Matthews’ Web Design Inspiration #3

That’s all for now.