Posts about Cascading Style Sheets (CSS)
CSS is a layout definition language used for styling the typography and layout of web pages, apps, SVG and other related elements.
Aliasing WordPress CSS custom properties
Published in
How to use CSS custom property aliases in WordPress to reduce the size of your own custom CSS.
Overlapping elements with CSS grid
Published in
Using CSS Grid to overlap two rows and allow a content image to “break out” of the text container.
Font sizing for the web
Published in
There are three main options for setting the size of text in the web using CSS. The font size can be set in “pixels”, in “EM”s or in ”REM”s. It can be a little difficult to understand where the differences lie, and which unit of measurement is correct.
Using CSS variables through the WordPress Theme Customizer to make custom colour schemes in the Gutenberg Editor.
Why using BEM for your CSS is a good idea
Published in
Four years after writing that BEM syntax in CSS indicates weak coding principles, it’s time for a retraction.
The wonders of CSS Grid
Published in
I’m beginning to delve into the newest extension of the CSS style rule possibilities at a professional level, in order to design and create websites which break the mould.
Simple CSS specificity rule guide
Published in
There are a few ways to apply CSS styling rules to an element. Each one is less or more specific than another. Applying a rule using a class selector when you’ve applied a different rule using an ID selector won’t work. Batificity isn’t the CSS specificity guide you deserve, but the one you need right now,…
Using modern web technologies to replicate the ubiquitous red panel used by Swiss railway company SBB CFF FFS.
Technical case study: CSS Flexbox for BEKB Flash
Published in
CSS Flexbox has been ready for mainstream use for a while now, and I’ve implemented it on a third client project for my employer.
EMs and REMs and CSS media queries
Published in
The key principles behind the complex relationship between pixel-based and relative sizing units in CSS for web design.
Vertical rhythm in web typography
Published in
…doesn’t have anything to do with jumping up and down to music. Sadly. Typographic principles are just as valid in designing for the web as they are in designing for traditional media. Through the application of a very simple mathematical principle, a design becomes more peaceful and the visitor is calmed by a subliminally identifiable pattern. (Our…
HTTP/2 allows you to separate your CSS, JavaScript and other template resources into individual files, without running into problems with multiple requests.
The CSS :not() selector
Published in
One of the best CSS tips I’ve come across in recent months is the :not() selector. Rather than having to define a set of rules for an element, then re-defining new rules for the element when it has a certain class or attribute, you can use :not() to be more specific in the first place.…
Avoiding specificity issues in CSS
Published in
Holy moly. What a discussion we’ve gotten into over on Twitter about CSS specificity, BEM, and inheritance. I wrote yesterday that the idea is flawed and tries to work around problems which aren’t actually problems at all, but part of the language of CSS. As Duncan noted: the problem is actually, “people write bad CSS”. Dirk from…
Why using BEM for your CSS is a bad idea
Published in
I came across the BEM (Block, Element, Modifier) technique for CSS coding today. On reading half a dozen basic introductions to the technique, I saw immediately that the concept is based on weak coding principles, not code simplicity and reusability.
Adding diagonal edges to HTML elements
Published in
Using CSS pseudo elements to add diagonal borders and edges to the sides of block level elements.
CSS Reset done properly
Published in
A CSS Reset (or “Reset CSS”) is a short, often compressed set of CSS rules to reset the styling of HTML elements to a consistent standard. I’ve rolled my own; based on my own experience of CSS programming over the past fourteen years and based on other, well-known reset files.
Can I Use…?
Published in
The most useful website I’ve found to use over the past year for front-end web development is “Can I Use” by Alexis Deveria.
Percentage-based CSS column layouts
Published in
Laying out a page using percentage-based columns seems to be pretty easy. However, in responsive layouts, you’ll quickly run into problems if you don’t take legibility into account. The most obvious case is when the columns are predominantly text-based, where a suitable gutter between the columns is essential for the sake of legibility. (If you…
Cleaner layout and better navigation
Published in
If you’re reading this on the website (and not in an RSS reader or the like) then you’re seeing the new version of the website. Similar to the old one in general terms, but re-built (again) from the ground up using LESS and a dusting of jQuery. There are new features and content pages coming,…
Image gallery grid layout
Published in
Information about the technical solution I’ve implemented for the grid layout in my photo galleries here on the website.
