CSS
10 articles
Using CSS Transitions
CSS transitions are the standard way to apply transitions to your elements, and have been for years, replacing 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.
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.
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.
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.
Setting Variables in Stylus
Unlike CSS, in Stylus you can assign expressions to variables that can be reusable throughout your stylesheets.
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.
Learning Stylus: A CSS Pre-Processor
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 ins and outs of this beautiful language.
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 its uses within your CSS projects.
Configuring Stylus CSS Pre-Processor with Gulp and Sourcemaps
In this article we'll go over how to configure your project to process Stylus files using Gulp. We'll also create source map file which your browser will use to help point you in the right direction of your files when developing
Configuring Gulp With Less CSS Pre-Processor
Less is a CSS pre-processor allowing you to create variables, mixins, and functions in an effort to make your CSS more maintainable.