AtoZ CSS: Recent Episodes
Guy Routledge: front-end developer, teacher and screencaster
Sass mixins enables block of code to be reused with slight variations.
They take the form
@mixin uppercase-letter-spacing {
letter-spacing: 2px;
text-transform: uppercase;
}
And then are used by calling @include within the body of a style rule. Mixins can have parameters (arguments) passed to them which is what makes them very flexible.
It’s also possible to call a mixin and pass a whole block of CSS via the @content directive. Check out the video for a recap on how mixins work and then a round up of some particularly useful examples.
In this video we'll be diving into two more command line tools that can help you compile Sass. They both do a lot more than just compile Sass so they're definitely worth looking in to. But for the purposes of keeping this video short and to the point, we'll just focus on the Sass side of things.
Grunt and Gulp are both JavaScript powered build tools. They can be used to compile Sass, start local servers, run linters, automatically add vendor prefixes, inline CSS and much, much more!
While both tools do similar things, they work in very different ways behind the scenes.
Grunt uses a declarative approach to configuring tasks (for things like compiling CSS). A Gruntfile.js contains a large configuration object that specifies the options for each task - things like where to find the imput Sass files, where to output the compiled CSS and what output style should be used.
Gulp uses “streams” and it’s configuration style may look familiar if you work with jQuery code a lot.
I’ve used both but now favour Gulp for compiling my Sass predominantly because it uses Node Sass behind the scenes which runs incredibly fast, cutting down development time significantly.
Functions are a core concept in many programming languages but creating our own custom functions isn't something we can use in normal CSS. However, Sass brings the power of programming to the table and does allow us to create custom functions for performing common tasks.
In this episode you'll learn what functions can do and why they're useful, how to create and use your own custom functions in Sass and examples of functions in the real world
Mixins are a way of creating flexible, reusable chunks of code. Another Sass feature which seems to work in a similar way is the @extend directive. In this episode we'll learn all about extends and how they're different to mixins, how to create and extend placeholder selectors and about some of the pros and cons of using extend in real projects.
Sass brings a lot more power to CSS and starts to make it feel like a programming language rather than just a series of property and value declarations. One key feature that enables this programatic feel is Sass variables, which can hold a number of different types of data.
In this episode we'll cover the seven core data types in Sass and how we can manipulate and operate on these various values.
Colour is hugely important for adding life and visual interest to a project and is an invaluable tool for highlighting parts of the interface that a user can interact with. In this practical episode we're going to talk all about manipulating colours programmatically with Sass.
Colour functions take the form function-name( $color, $amount ).
The are really useful for manipulating a base pallette of colours for visual details like borders, gradients and drop shadows.
Some of the most popular Sass colour functions include:
- lighten( )
- darken( )
- saturate( )
- desaturate( )
- rgba( )
The Sass rgba() function takes any valid colour format and a decimal amount for quick and easy transparent colours without typing out the full red, green and blue values.
BEM is a system of naming classes that encourages the good practice of writing modular code. It can really help bring structure and meaning to the way we name things and it's something I use consistently in my day to day client work. It can be used with or without Sass but Sass and BEM are a great combination. In this video you'll learn what BEM is, what it stands for, how to leverage the Sass ampersand with BEM and some BEM best practices.
In this first video of a brand new AtoZ screencast series, we start our journey into the world of Sass. The Sass ampersand character is very powerful and acts as a placeholder for the parent selector within nesting.
Some interface designs may call for elements to be layered or stacked on top of each other.
There are many ways that elements will naturally stack on top of each other. But we can control this stacking order using a combination of the position and z-index properties.
In this final episode of AtoZ CSS season one we'll learn about:
- The default stacking order of the document
- What a stacking context is and how they interact with each other
- How z-index controls layer order within stacking contexts
- And a method I use for standardising z-index across a project
In the previous episode we learned about the transform property and the value translateX(). In this episode we'll be digging deeper into transforms and manipulating elements in 3D.
In this episode we'll learn all about:
- 3D space in CSS
- How to rotate elements around their vertical and horizontal axis
- And how perspective works
As we approach the end of the alphabet, and the end of the first season of AtoZ CSS, there aren’t many properties, values or concepts that start with the letter X.
There are however a series of transform values that allow elements to have their visual co-ordinates changed along the x-axis to create complex and interesting visual details on the page.
In this episode we’ll learn all about:
- The CSS transform property
- Moving elements with translate and translateX
- The performance benefits of using translate over other methods
More and more these days, CSS is being used to control the styling of things other than websites.
One type of media that CSS can apply styling to is paged media - things like digital magazines and ebooks or a website in the form of a print stylesheet.
There are some properties that only apply to this media type. The widows and orphans properties are two that allow us to control how lines of text flow around page breaks.
In this episode we’ll learn about:
- Paged media and
- Widows and Orphans
In the previous episode we looked at all sorts of properties for styling text. In modern browsers, and in IE back to version 4, we can add custom fonts to enhance the design of our websites. We can leverage various features of these custom fonts to help boost performance and improve our typography overall.
In this episode we'll learn:
- All about the
@font-faceat-rule - And how to control typography with font stacks and
unicode-range
Text is everywhere. Without it, the web wouldn't be such a valuable resource. There are many different CSS properties for styling text and in this video we'll cover most of them in some way shape or form. As there are so many things to cover, this episode will demo a selection but in part just act as an overview of the tools in the box.
In this episode we cover
text-aligntext-decorationtext-indenttext-overflowtext-renderingtext-shadowtext-transformfont-familyfont-sizefont-stylefont-weightfont-variantfontshorthandline-heightletter-spacingword-spacingword-wrapwhite-space
When using new or experimental CSS, it can be useful to know if the browser supports the features we’re writing code for.
Feature detection is often done in JavaScript with tools like Modernizr but in some browsers, we can now detect capabilities from CSS.
The @supports rule allows us to conditionally apply styles for features that are or are not supported.
In this episode we’ll learn all about
- Browser support for various CSS features
- How the @supports at-rule works
- and how to provide alternative styles for unsupported features
:required is a state based pseudo class that can be useful when styling forms.
Combined with :valid and :invalid we can have a lot of control over providing visual feedback to users without having to write lots of JavaScript.
In this episode we’ll learn:
- How to use HTML5 form validation
- Using :required and other state-based pseudo classes
- A creative technique for displaying validation messages to users
Single and double quotes appear frequently when writing code.
However, when displaying any quoted text like the q element or when using apostropes we should use smart quotes.
These are often added by the browser, but we can control their appearance and the choice of character from CSS.
In this episode about we'll learn all about:
- the difference between dumb quotes and smart quotes
- the different styles of quotes used internationally
- and the somewhat under-used CSS
quotesproperty
Pseudo elements are elements on the page that aren't found in the HTML code.
They can be manipulated with any CSS that would be applied to any other element.
Two special pseudo elements - :before and :after can be used to generate content on the page from CSS and have many potential use cases.
In this episode we'll learn about:
- The five different pseudo elements,
- generating content like text, images attribute values and counters from CSS
- and how to make complex shapes with minimal markup
The opacity property specifies how opaque an element is. It takes a value ranging from 0 to 1 where 0 is completely transparent and 1 is completely opaque. In this practical episode we'll look at how the opacity property works - including some of it's downsides - and then create a CSS only fading slideshow using opacity and what we learned about @keyframes in Episode 11.
:nth-child is a pseudo class used to select elements by a numeric expression. The syntax is quite different to most other aspects of CSS and can be a bit tricky to get your head around to begin with. In this episode we'll look at the various ways of using :nth-child, the slightly more flexible :nth-of-type selector and their counterparts selectors :nth-last-child and :nth-last-of-type.
The @media rule allows conditional styling of elements. The conditions can be based on the type of media or known characteristics of the device being used. Combining media queries with fluid layout and flexible images, allows us to implement responsive web design.
The CSS line-height property acts in a similar way to leading in print design. It allows us to control the spacing between lines in paragraphs, headings and other text elements. Line-height can also be used as a base to create consistent vertical rhythm and spacing throught an entire project.
Animation used to be the realm of JavaScript. Now, in modern browsers, we can animate elements using CSS. The @keyframes block and animation properties allow us to specify what gets animated and when.
In this episode we'll look at the kind of animations that are suited to CSS, the concept of specifying a series of @keyframes and finally the way these keyframes are combined with animation settings to bring the page to life.
Watch the process of creating an episode of AtoZ CSS as I broadcast my screen in hyper-fast-forward. This is the entire process of writing and researching through sound recording, editing and screen recording and editing to final tweaks and effects; 6 hours work in 5 minutes, just for a bit of fun.
Justify is one available value for the text-align property. It allows the formatting of text in a style often used in newspaper design. In this epsiode, we’ll look at the 12 possible values for text-align, one of which is justify, next we’ll look at using justified text with CSS columns and finally look at how justify can be used to create a floatless responsive grid system with just a few lines of code.
ID is a CSS selector that allows the styling of a single unique element. Their use in CSS is common and often a little controversial. In this video, I will outline some of the reasons why I prefer the class selector over ID, how CSS specificity works.
Hover is a pseudo class and can be used to style state. The hover state is active when a users mouse enters the bounding box of an element and is inactive when the users mouse leaves it. In this episode, we’ll look at the :hover pseudo class on text links and create a CSS dropdown menu triggered by hover and enhanced with jQuery for touch devices.
General sibling is a little known but very useful CSS selector. It allows the styling of an element that is a sibling of another. We’ll look at the syntax, a practical example and then a quick round up of the other child and sibling selectors in CSS.
The float property is most commonly used for page layout. However, the original purpose of float was to allow text to wrap around an object. As float is often not used as originally intended, working with it can be a bit fragile and a bit tricky until you get used to its quirks.
There’s a number of pseudo classes in CSS. These pseudo classes help us style different states and target specific
elements based on their relationship or position to other elements. The :enabled and :disabled pseudo classes style form
elements that can or cannot be filled in or selected.
How elements take up space on the page is controlled by their display. There used to be two broad display types in CSS: elements were inline or block-level but there's a bit more to it than that.
The web would be a pretty dull place without a splash of colour. There are a number of different properties that take a colour value and there are four different colour syntaxes in CSS and that’s what we’ll be focusing on in this video. Those formats are colour keywords, hex, RGB and HSL
Every element on a web page is a box and we can describe the characteristics of these boxes using the CSS Box Model. Understanding this model and how different types of boxes lay out, is key when converting designs into a working website
auto a CSS value that has a number of uses. It’s the default value for a lot of properties but can be used for horizontal centering and is a handy tool to have in the box when dealing with responsive design