CSS

Integrate Stylelint Into Your Workflow For Better CSS

Working within a team or solo can adjust the development priorities but one that should always be high on the agenda is producing the best code possible.

Working on a clean, well organised codebase is bliss. It’s enjoyable and productive. Working on an unorganised codebase is annoying to say the least. It’s often frustrating, painfully slow to change and test anything and invites laziness.

Thankfully as CSS developers we have a handy tool called Stylelint that can help us avoid the unorganised situation.

PostCSS – What It Is And What It Can Do

PostCSS has been around since September 2013 and has been part of many developers workflow for a while. For those that haven’t had the time to dig into it and put some time aside to understand what it is and what it can do, this post is for you.

Creating Better CSS

For most web developers we are knee deep in CSS on a daily basis. This can be a good or bad thing. It really depends on the state of the CSS. A well-organised codebase can be a pleasure to work with but, generally speaking, most CSS is a complete nightmare, especially on larger projects.

GSS: Layout Reimagined

Layout on the web is certainly an extremely time consuming process and the most outdated. Floats and such still don’t cut it.

At it’s core, Grid Style Sheets (GSS) reimagines CSS layout and harnesses the Cassowary Constraint Solver – the same algorithm Apple uses to compute native layout. OK sounds good, but is it a pre-processor? Well… no not exactly.

Viewport units: vw, vh, vmin, vmax

The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages as mentioned earlier, or JavaScript.

Diving into Webpack

Of late there has been a little bit of hype around this “webpack” thing. Hopefully this post gives you an overview of what it is, how to use it and if it’s worth all the hype.

Compass Sourcemaps

Since the release of Compass v1.0.0 we’ve seen sourcemaps supported across the board. This means tools like Gulp and Grunt (including their compass compiler helpers), CodeKit2 and the CLI will now produce a Compass sourcemap file. This article dives into the config landscape across various tooling systems.

Introduction to SUIT CSS

The ever daunting question we as developers face is “How am I gonna structure things for a project?” As a framework, SUIT CSS provides an implementation of an architecture that others can use as the basis for a working application.

Dealing with a large CSS codebase

During the last few years I have found myself dealing with largish codebases on various projects. During that time I have continued to assess the tools and techniques used to make it as easy as possible. This post explores ways to make developing on large CSS codebases more enjoyable.

Different Sass Output Styles

When developing with Sass sometimes there is a need to adjust the output style of the CSS. Sass’s default CSS style is good but might not be applicable for all situations. This post explores what those options are and how to adjust your compiler settings.

Shaping CSS

In someway or another we are exposed to CSS on a daily basis. Either by tinkering with some code, reading a technical blog post or just viewing the source files of a site.

Over the years CSS has really evolved and I thought it might be a good time to stop and take a look at some of the key players in our industry. The ones that are helping shape the direction.