Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing – selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Let’s see if we can alleviate any headaches. This guide will help you get started with font pairing for the web.
There has been a lot of talk recently about using LESS/Sass as preprocessors for creating cleaner, cross-browser friendly CSS faster and easier than we could before. And from my own experience I can tell you that once you go to one of these languages, you’ll have so much fun that you won’t be going back to plain CSS.
I regularly get people asking about when “CSS4” will be available.Id like to clear things up with something unequivocal:THERE IS NO SUCH THING AS CSS4
In this article we’ll be taking a look at a few of the most popular web font services, comparing features between them and talking about some of the red flags involved with working with real fonts on the web.
We’re a lucky bunch, we web designers of the present. The web designers of yesteryear have long struggled with a frustratingly small selection of fonts – the web-safe system fonts that were tried and tested for screen use. You know their names. Georgia, Times New Roman, Arial, Verdana – nearly all of them send a slight shudder down our spines.
Media queries are already awesome. Media queries in Sass are already awesome. Media queries in Sass 3.2 are going to be really awesome. This is how you can get CodeKit to start using it.This isnt a brand new idea. Ben Schwarz did an excellent 7 minute video showing us how it works 7 month ago. Jeff Croft wrote about it 4 months ago. Mason Wendell wrote about it 3 months ago.
CSS, despite its relatively low perceived skill ceiling, always seems to have a killer feature up its sleeve. Remember how media queries made responsive layouts possible and revolutionized front-end development? Well, today, we’re going to talk about a new layout mode, called flexbox – new in CSS3. I’m sure you’re raring to go! Let’s get started after the jump.
This is going to seem like a no-brainer to many of you, but I see it happening so often I figured it was worth bringing up. We’ll call this issue improperly nested corners; a small detail which can ruin an otherwise brilliant design!
There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques.
The spreadsheet has the data, but let’s digest it through thinking about it through the lens of practical questions.
To choose which technique is right for you and your project these questions may help as a guide. Many of the questions may apply to your project, so you’ll have to sort out which techniques fit what scenarios and find the overlap.
The nice guys at twitter have released Bootstrap 2.0 – A few nice changes in there too. You can get it here.
The nice people form twitter have released a css framework/grid called bootstrap. I have been playing with it for the last few days and have found it very easy to work with and customise. Saves a lot of work when setting up a new project combine it with boilerplate and you are good to go with html5.