Using CSS Transitions

CSS transitions is the new preferred way of applying transitions to your elements compared to the old approach of using JavaScript. In this article, I’ll go through each of the transition properties available, and provide examples of how to use them. Below is a list of browser prefixes that you can use to enable backward […]

Read More »

Interpolation in Stylus

You can also use interpolation to improve your functions for reuse, as well as your other code within your stylesheet. The way it works is that you can wrap your expression within {}, which will then be outputted as the identifier. For instance, looking back at our border-radius function, we can take it another step […]

Read More »

Creating Configuration Files In Stylus

It’s super simple to create a configuration file for instance that would manage your media query break points. You could also use a configuration file for managing colors, font sizes, and other variables such as gutter spacing and more. For this example, we’ll look at creating 2 json configuration files to store our variables. JSON […]

Read More »

Using Functions and Mixins with Stylus

Stylus allows you to create functions and mixins of reusable code for your stylesheets. You can also handle mathematical operations, unary operations, and more allowing you complete control over your stylesheets with ease. Mixins are synonymous with functions. What determines when you call something a mixin or function is based on its usage. Mixins by […]

Read More »

Setting Variables in Stylus

Unlike CSS, in Stylus you can assign expressions to variables that can be reusable throughout your stylesheets. Let’s assume we had a set of colors that we’re going to be using throughout our document for headers, and text. Stylus Code

When creating variables, you do not need to include the $ dollar symbol. I […]

Read More »

Using Selectors in Stylus

Selectors are a way to pick the elements that you want styled. In Stylus, similar to CSS, you can apply a set of styles to any element by separating them by a comma delimited list. Stylus though, also allows you to select multiple elements by separating each on their own line. Let’s look at an […]

Read More »

Learning Stylus – A CSS Pre-Processor

How the content is displayed for this mini-series will be a little different to how you may see other articles on my site. Really this article is more geared as notes for me as I go through the documentation for Stylus, and learn the in’s and out’s of this beautiful language. Feel free to reference […]

Read More »

Configuring Gulp With Less CSS Pre-Processor

Less is a CSS pre-processor allowing you to create variables, mixins, and functions in a effort to make your CSS more maintainable. In this article, we’ll discuss the process of getting less configured with gulp so that you can start using this CSS pre-processor today within your own projects. In this article, I touch on […]

Read More »

BEM Methodology Overview and Naming Conventions

BEM or Block Element Modifier is a naming convention used to help organize your code base. In this article, I discuss the uses for with in your CSS projects. For a more detailed look into BEM, feel free to read through the documentation found here. Block So what is a block? Basically a block is […]

Read More »