Home > Categories > CSS
Page 1

How to use Cute Grids

This is a golden age for frameworks, with dozens for us to choose from. We have great options like Bootstrap and Foundation, but sometimes these frameworks deliver more than we want. Sometimes, all we need is a clean, and responsive grid. Cue: Cute Grids. Why use Cute Grids? The idea behind Cute Grids is to get you away from a full featured framework, and focus on just the grid. Cute Grids take a mobile-first approach, so that all of your websites work on mobile as well as desktop. The framework is completely...
Read more

How to use Myth

Most of us use some form of a CSS pre processor now, they give us the freedom and advantages that CSS still doesn’t have implemented, like variables. The problem with these pre processors is that they use a completely different syntax than CSS itself making us learn two syntaxes. What if we could have a pre processor that had all the advantages we are used to and still keep the CSS syntax ? Myth allows you write CSS syntax so that you don’t have to remember two syntaxes and so that when features like variables...
Read more

How to style file input fields

One area we always have some difficulty when it comes to styling is input fields and in particular the file input. This type of input doesn't usually allow for much customization but with some JavaScript tricks we can create our own file input that matches our website's look and feel.   The HTML Using the default HTML element for file input we can't create much so in this article we will create our file input that will be hidden and we will create another button that with some javascript magic will behave...
Read more

Introducing viewport units

With the introduction of CSS3 we’ve seen huge advancements in web technology, and the last few years have felt like golden ones for anyone working on the Web. One great addition that hasn’t been talked up enough is viewport units. They’re anew kind of CSS3 unit that allow you to size elements relative to the viewport. Browser support The browser support for viewport units is surprisingly good. There’s full support in all the latest desktop browsers. IE has had full support since IE9 (although...
Read more

Introducing CSS variables

If there is one thing a language needs to qualify as a programming language, it’s variables; they’re incredibly useful, save us a bunch of work and typing, and improve coding all-round. This is exactly what CSS didn’t have. Pre-processors like Sass and Less used them, but vanilla CSS never had variables. Until now. They’ve been on the horizon for a while, but only recently have variables started to be implemented in CSS, let’s take a look at how they work. Browser support Currently CSS variables...
Read more

Introducing the calc function

Math is a necessary (if not always welcome) tool in our programming languages. We use it constantly to make all kinds of dynamic decisions. Until recently, it wasn’t available in CSS without a pre-processor; however the introduction of the calc function to CSS3 provides a way of running Math calculations natively which increases performance and even enables mixed units. Browser support Unusually, in the case of the calc function browser support is actually pretty good: on the desktop it’s supported...
Read more

How to create a flip effect with CSS3 transforms

Over the last couple of years CSS has evolved more than we could ever imagined. Styling and layout are now entirely in our hands, although the best thing about CSS3 in my eyes are the Transforms, particularly the 3D ones. With transforms we can move elements through a 3D world, and today I’ll demonstrate this by creating a flip effect. Browser support The browser support for 3D transforms is a little lacking, but on the whole not too bad. It’s supported by all webkit browsers using the webkit prefix,...
Read more

Introducing Recess

We all make mistakes when creating our code, it’s part of being a programmer and having a linter that pulls us up when we make errors is always a great idea. We already have a famous one for JavaScript, JSLint, and now Twitter has given us one for CSS. It’s called Recess and it can help us keep our CSS code clean and super manageable. Installation In order to install this linter you’ll first need to have node and npm installed on your computer. If you have that installed then installing recess is as simple...
Read more