All articles tagged Design

Thumbnail image for Linting SCSS with sass-lint

Linting SCSS with sass-lint

Linting SCSS with sass-lint Complex projects always require multiple developers and design heavy web sites are no exception. Sass/SCSS is still our language of choice when writing CSS, both for its wide support and flexibility. The latter can be a …
Thumbnail image for Getting Started with Element Queries

Getting Started with Element Queries

Element queries provide styling opportunities specific to an element's dimensions. You could consider them the holy grail of responsive web design, allowing authors to determine an element's look and feel regardless on where it's placed. If given ample space you …
Thumbnail image for SVG Sprites and Icon Systems Are Super

SVG Sprites and Icon Systems Are Super

I received an email recently asking for assistance with an SVG icon issue. The individual explained that he was working with a lot of icons (about 300, which I would say qualifies as a "system") as images and wondering if …
Thumbnail image for Introducing Flexbox Fridays

Introducing Flexbox Fridays

Flexbox is everywhere right now. Well, talk of flexbox is everywhere, not so much its implementation just yet. We have been tinkering with it quite a bit these days and thought it might be handy to share these explorations. Each …
Thumbnail image for Smarter Input Groups with Flexbox

Smarter Input Groups with Flexbox

If you have ever built a form using Bootstrap you have undoubtedly worked with input groups. Input groups are an excellent way to provide contextual help via iconography or associate specific actions with the appropriate field. However, they can be …
Thumbnail image for A Look At SVG

A Look At SVG

Scalable Vector Graphics (SVG) is a language for describing two-dimensional graphics in XML. These graphics can consist of paths, shapes, and/or text that can be scaled and resized without losing image quality like a bitmap would. While SVG has actually …
Thumbnail image for A Look at CSS Rule Organization

A Look at CSS Rule Organization

CSS preprocessors have given us a handful of tools to re-architect our front-end code. We can keep things DRY with includes and extends or perhaps use nesting for code organization. All of these features allow a CSS rule to grow …