Archive for the ‘HTML/CSS’ Category
The 1Kb CSS Grid, Part 3
In Part 1 we discussed the merits of a lightweight CSS grid. In Part 2 we talked about how the grid can streamline page templates in content management. Here, in the third and final installment, we will cover some of the more nuanced aspects of implementing the grid in real-life situations. Namely: nested rows and (hold the applause) a flexible grid.
Introducing LESS: a Better CSS
I don’t know about you but I’m not really satisfied with the level of control CSS gives me today. The feature set is just too restraining, and while I know how to use it to create anything I want, there is always plenty of code which I wish I didn’t need to duplicate, or I wish I could have written more elegantly.
It’s not so much the lack of fancy styling options like shadows and rounded corners, which are there in CSS3, it’s things like the lack of variables and ugly long inheritance selectors.
Can’t do much about that, right? Well, actually…
The 1Kb CSS Grid, Part 2
In Part 1 we covered how to setup a lightweight CSS grid. I promised that this same grid could streamline the way page templates are used in content management. Well, here we go!
One is better than two
Every content management system is driven by templates. The beauty of the template is that an entire site can be updated by editing just a single file.
But imagine a website that has two distinct layouts: one layout for the homepage, a second layout for all the other pages of the site. In this situation you would typically require two separate template files. This means that in order to make a site-wide change, you would now have to update two template files instead of just one.
Now, two templates are manageable. But what about a site that requires many different layouts? I recently worked on project that had — no joke — 23 unique page templates, each page with slight differences from the others. Suddenly what should have been a 1 minute change took half an hour!
The 1Kb CSS Grid, Part 1
CSS frameworks have become quite popular over the past couple of years. Some of them try to fit in everything: a grid system, a style reset, basic typography, form styles, you name it. Others focus solely on the grid, but still end up a bit bloated.
With added complexity comes… well, complexity: a steeper learning curve, increased development time, and — cringe — tougher debugging.
Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight. And, as I’ll show in part 2, it can be used to streamline page templates for content management. All this in just one measly kilobyte (actually, 662 bytes, but who’s counting).
Pressed Button State With CSS
There is certain anchor state in CSS that I don’t see used very often — actually, it’s something I haven’t really used myself, but something which I now realize can be very useful. I’m talking about the “active” anchor state.
The active anchor state is the state an anchor (a link) is in when you click on it. The moment you click on a link, it becomes active. We all use the “hover” or “visited” states, but the active state can come in very handy when you’ve got custom styled buttons.
Scalable Content Box Using Only One Background Image
A colleague of mine was recently trying to cut down on image usage when working on a web design project. He asked me whether it was possible to use one image for a vertically scalable content box that had both, a unique heading background, a border along the sides and a rounded off border in the footer.
I didn’t think about it very much and dismissed it as impossible or too fiddly. I’ve been thinking about it for a little bit now and realize I was wrong and there is actually a very easy way to do this. Whether the method is practical or not for production use I’m not sure — but at least this is something that can be done. Let me demonstrate how…
Let’s say we designed the following content box in Photoshop to be used in the sidebar of a website:
Not an unlikely example. The box above has three unique sections, the header at the top, the middle area which repeats itself, and a bottom section with the rounded off corners and a slight shadow.
CSS Tip: Improve the Look of Your Headlines Using Letter-Spacing
There is a term used in typography called kerning. Kerning refers to the adjustment of space between letters. Fonts are generally fairly well calibrated by default, but at larger sizes you can begin to see imbalances in spacing between letters.
Kerning is used a lot in the print industry, especially for headlines and logotypes; but it’s something that’s not widely used on the Web because of the lack of control we have over fonts.
CSS Tip: Remove the Mac OS X Glowing Blue Outline for Custom Styled Input Fields
One of the great things about the Web is that it’s cross platform. You can use your favorite system to browse the Web, be it Windows, Mac OS X or Linux. Some of these systems, namely Mac OS X, sometimes try a little too hard to control the user experience, and so you’ll find that things like buttons, drop down boxes and input fields look fairly different to those on other systems — even more so with the blue glow effect you get around input fields. This glow effect can cause problems if your input field is using custom images and CSS formatting.
Usability Tip: Turn Inline Links Into Padded Blocks for Larger Clickable Areas
There’s a very quick usability trick you can do with the links on your site to make them easier to use. It’s something that I don’t see talked about very much, and a lot of sites don’t implement it. Link padding and blocks — that is, increasing the clickable area of your links to make them easier to click on.
How to Add Drop Shadows to Menus or Windows with CSS
As a followup to my previous post on adding shadows for greater usability, here’s one quick way to implement such shadows using only CSS. Note: I will assume you are fairly familiar with CSS layouts and Photoshop for this tutorial.
The Method
There are different ways of tackling the problem of adding shadows to menus and windows with CSS — this is just my take on it. It’s not the most straightforward task and you may be able to find more elegant solutions by experimenting yourself.