Design & UX
Maria Antonietta Perna, Jun 09

20 Inspirational, Free Tools For Better Typeface Pairing

We have access to a wider set of web fonts than ever before, but choice can be a tyranny. Luckily Antonietta has 20 tools to help you better pair type.
Baljeet Rathi, Jun 07

Five Ways to Hide Elements in CSS

Baljeet Rathi guides beginners through the various CSS methods available for hiding elements on a web page and how they differ.
Design & UX
Alex Walker, Jun 07

Why SVG Image Hosting is Hard (... and How to Do It)

SVG is powerful, but finding a place to put your image is harder than it should be. Here's a scalable, reliable, free SVG image hosting method.
Nitish Kumar, Jun 02

Introducing the CSS clip-path Property

Nitish Kumar explores the CSS clip-path property and how to use it to clip portions of elements.
Hugo Giraudel, Jun 01

Inline CSS in Jekyll

Hugo Giraudel looks at how to inline critical CSS and other CSS styles in the head of a Jekyll website.
Mark Brown, May 31

Quick Tip - Installing the Ionic Framework for HTML5 Apps

Mark Brown covers installing the ionic framework and using it for creating performant and native-like HTML Apps.
Miriam Suzanne, May 30

Jump Start Sass: Architecture in Sass


The following is a short extract from our recent book, Jump Start Sass, available for free to SitePoint Premium members. Print copies are sold in stores worldwide, or you can order them here. We hope you enjoy this extract and find it useful.

Architecture has always been one of the major pain points in CSS development. Without any variables, control directives, macros, or object inheritance, CSS code tends to be long and repetitive—a single ever-growing file. While it’s technically possible to split plain CSS into multiple files that reference each other with @import, the additional HTTP requests make that a poor solution. As you’ve seen, Sass has an answer for every piece of the architecture puzzle—but what’s the best way to put it all together?

Ask ten experts, and you’ll receive ten different answers—most of them involving (or aided by) Sass. OOCSS, SMACSS, Atomic Design, ITCSS, and BEM are all popular systems for CSS architecture, but there are many more. If you’re using a front-end framework such as Bootstrap or Foundation, there might be some architectural opinions already built in.

These are all solid systems, none of which were designed with your project in mind. CSS architecture is hard, so it’s a mistake to trust any one-size-fits-all solution. There is no “right” answer that works for every team on every project. We’d recommend learning them all, and then mashing together the best parts to create a system that works well for you.

Let’s start with a broad discussion of the building blocks, and then look at the ways we can fit them together.

Multiple Files and Folders

Breaking your code into multiple files is one key advantage to using a preprocessor, and forms the basis of any architecture. With Sass, there’s no harm in breaking your code into the smallest logical units and organizing it into multiple files and folders. We recommend taking full advantage of it.

Sass has bestowed new power on the CSS @import rule, allowing you to combine Sass and CSS files during compilation so they can be sent to the browser as one single file. This is the only place where Sass has stepped on the toes of an existing CSS directive, so it behaves differently in Sass than it did in CSS.

CSS Imports

As mentioned, the CSS @import directive allows you to reference one CSS file from another. Importing is handled by the browser and requires additional HTTP requests—since the importing file has to be parsed before the @import directive is discovered. If you have a chain of files importing each other, those imports will happen in sequence, blocking the document from rendering until all the CSS has loaded. For that reason, most people avoid CSS imports entirely.

Using CSS imports, you can reference another CSS file using relative or absolute paths, even adding a media query rule for conditional imports. Even though Sass provides different functionality under the same at-rule, there are various cases in which Sass will fall back to the vanilla CSS output, such as when:

  • an imported file has a .css extension

  • a filename begins with http:// or https://

  • the filename is a url(..) function

  • @import has any media queries

The following will compile to standard CSS imports, even in Sass:

[code language="css"] @import 'relative/styles.css'; @import ''; @import url('landscape.css') screen and (orientation: landscape);[/code]

Sass Imports and Partials

Sass imports look similar to CSS imports, but the imported files are compiled into one single output file, as though their contents (including variables, mixins, functions, and placeholders) were copied and pasted into place before compilation. This type of Sass import will only work on files with .sass or .scss extensions, but you can leave the extension off when importing (as long as there are no similarly named files). In fact, we recommend dropping the extension whenever you can, for simplicity. It’s also possible to import multiple files in one command, or import files into a nested context:

Simon Codrington, May 26

Quick Tip: Single Character Transforms with CSS and JS

Simon Codrington looks at how to animate individual characters using CSS animations and some simple jQuery.
Design & UX
Alex Walker, May 26

Make Your Own Responsive SVG Graphs & Infographics

It doesn't matter how crisp your SVG text is if it's too small to be read. Responsive SVG lets you prioritize the important parts of you graphic.
Adrian Sandu, May 25

Front End Development after Internet Explorer

Adrian Sandu explores modern web development features that are available to developers since Microsoft ended support for Internet Explorer 6-10.
Jack Rometty, May 24

An Introduction to the Basics of Modern CSS Buttons

Jack Rometty takes a beginner's look at modern CSS button concepts for developers looking to understand the basics.
Pavels Jelisejevs, May 18

The PostCSS Guide to Improving Selectors and Media Queries

Pavels Jelisejevs looks at using PostCSS plugins to achieve some of the new upcoming CSS selector and media query features.
Asha Laxmi, May 17

Using CSS's object-fit and object-position Properties

Asha Laxmi explains and demonstrates how to use two CSS properties that can help when creating responsive layouts – object-fit and object-position.
Hugo Giraudel, May 12

A Tale of CSS and Sass Precision

Hugo covers the options available for web developers in handling CSS precision with percentage values, including using Sass and the native calc function.
Design & UX
Alex Walker, May 11

Mastering SVG Patterns Without Breaking Your Brain (or Budget)

SVG patterns are a great low-bandwidth tool for designers but setting them up can be hard. Alex shows how Boxy SVG makes things much easier.
Maria Antonietta Perna, May 10

Masking in the Browser with CSS and SVG

Maria Antonietta Perna looks at the various in-browser methods available for masking images with CSS and SVG.
Tim Severien, May 04

Stop Maiming Bodies: The Perils of Pixel Font-Size

Tim Severien discusses the difficulties in accessibility caused when web developers use pixel font sizes for the html and body tags.
Nitish Kumar, May 03

Introducing the CSS Grid Layout

The CSS Grid Layout spec is set to make complex web design layouts much easier for developers. Nitish looks at the spec and how to start exploring it today.
Design & UX
Alex Walker, Apr 27

Why JPEGs are like McDonalds Apple Pies (and SVGs are not)

Sometimes it helps to think of SVG, not as an 'image format', but as a 'recipe'. And once you *really* know a recipe, you can start to change it. 
Pavels Jelisejevs, Apr 26

Improving the Quality of Your CSS with PostCSS

Pavels explores how PostCSS can help improve and maintain your CSS quality with code linting and analysis.
Louis Lazaris, Apr 25

A Basic HTML5 Template For Any Project

If you're getting started with HTML5 you'll want to learn how to to develop a basic HTML5 template.
Design & UX
Ivaylo Gerchev, Apr 25

How to Design Rich Card-Based Layouts with Semantic UI

Card-based layouts are a great option for many design problems. Ivaylo shows us how to use Semantic UI to create great, mobile-friendly UIs.
Craig Buckler, Apr 21

How to Create a Static Site with Metalsmith

Craig's tutorial and example code illustrates how to build a static website using the JavaScript-powered Metalsmith generation tool.
Design & UX
Alex Walker, Apr 21

Boxy SVG: A Fast, Simple, Insanely Useful, FREE SVG Editor

SVG is hot but easily corrupted. Boxy SVG is a free editor that helps you make the most of what the SVG format is good at.