LESS or Sass or neither?
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
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.
Checking out responsive grid systems
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
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.
Just a few things I've seen recently
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.
Transparent borders with CSS3
I’ve seen a few website examples recently (like this one) where transparent borders have been used so that the background image shows through the border. I think this is a really nice effect and it got me wondering how it’s done and if I could use this on my planned redesign of CVW Web Design. Turns out it’s relatively simple but there’s one ‘trick’ you will need to get it to work.
CSS Tip: Using max-width for flexible images
When you are working with fluid or elastic website layouts or perhaps using CSS Media Queries, it’s essential that the designs cope with large images. For example, what happens when the layout is narrowed; does the image adjust in size or become cropped or, worse, does it ‘stick out’ of its containing element?
In these circumstances, one method is to scale the images down from their original size as the layout width changes. This is where the max-width property and, specifically, a value of 100% is useful:
.imgclass {
max-width: 100%;
}
If you assign the max-width: 100% property/value to an image and remove the image width and height values from the (X)HTML, the result is that the image scales down nicely from its original size and its proportions are maintained. As the layout widens, the image scales up but it will not grow beyond its original size so the image does not become blurred at larger widths. You can see this effect on the middle screenshots, if you resize the browser window smaller, with this ecommerce templates page (there’s a minimum width on the layout so it won’t scale all the way down).
I think this is a really useful and quick solution for images in flexible website layouts.
PS: This solution scales the image down but if you want image scaling beyond the original image size, there are other options; see Richard Rutter’s article below.
More Info: Richard Rutter’s original experiments with max-width and image sizing · Ethan Marcotte explores Fluid Images
Web design books for Christmas reading
At this time of year, I normally pick out some web design books that I want to read over the Christmas holidays. I’m spoilt for choice this year because three fantastic CSS books have been published recently – or are about to be published. I’ve ordered two of these myself and I’m on the mailing list for the third one! In no particular order, here they are:
- Hardboiled Web Design by Andy Clarke describes the latest CSS3 and HTML5 methods and it’s a book that I’m looking forward to seeing because the production values and content promise to be the very best. The book is published by the independent UK-based publisher Five Simple Steps which means that the paperback certainly ain’t cheap. However, I think it will be worth it! There’s also a PDF version as well if that’s what you prefer.
- CSS3 For Web Designers by Dan Cederholm covers CSS3 methods from advanced selectors to generated content to web fonts, gradients, shadows, and rounded corners to animations. I hope this book will give me a push to use some different methods in my own work.
- Stunning CSS3: A Project-based Guide to the Latest in CSS by Zoe Mickley Gillenwater covers a similar subject but works through a series of practical examples. This is a great way of learning! I really enjoyed the author’s previous book, Flexible Web Design so Stunning CSS3 should be a great follow-up.
After reading these, I really will be up to speed with the latest CSS and web design methods!
CSS tables revisited
A couple of years ago, Sitepoint published a book called Everything You Know About CSS is Wrong (reviewed here). The main theme of the book was the use of CSS properties and values like display: table and display: table-cell (see also CSS display property). If you have not come across these before, they allow you to assign table-like behavior to <div> or other elements, such as <p>. In the book, this method is called CSS tables and it seems to be an easy way of achieving grid layouts. Should we be using this method more? Here’s how it works.
Useful tip for creating double borders with CSS3
I have posted about double borders with CSS before but there was a useful tip by Andy Hume (@andyhume) at a recent London Web Standards meeting where he described the use of CSS3 box-shadow (previously on this blog, Box Shadow and Image Hover Effects) to give the effect of double borders on an element. With box-shadow, if you use zero for the horizontal offset and blur radius values and a small pixel value for vertical offset, this will give you another ‘border’ on any element. If the element already has a border, this means that you can create double borders with different colors. Here’s how it works.
We Like
Sync files between computers. Share files with your clients, friends, and family using DropBox. It's great!
Most Popular
Subscribe RSS Feed
