Explore the Articles

CSS

Understanding CSS Stats

In case you didn’t notice, the CSS analysis site cssstats.com received an overhaul recently. It’s a beautifully designed tool that gives you a lot of objective insight into your code, but how can you make the best use of CSS statistics? What should you shoot for? What do they mean, and how can you use them day-to-day? Today, we’re going to talk about CSS best practices, specificity and maintainability, plus you’ll learn how to properly interpret and make better use of CSS statistics. Let’s dive in!

Read More
CSS

Loading CSS Into WordPress the Right Way

Without CSS, you have very limited choices to style your web pages. And without proper CSS inclusion inside WordPress, you can make it extremely hard for your theme's users to customize the theme's styling. In this tutorial, we're going to have a look at the right way to enqueue CSS into WordPress. WordPress is currently the most popular content management system in the world, and it has tens of millions of users. That's why, in order to make a successful theme, we need to think as every single WordPress user and try to go by the book and load our CSS files in our themes properly.

Read More
CSS

5 Quick Beginner-Friendly CSS Customizations

In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme. Before we start, you need a theme with custom CSS options or a custom CSS plugin, or a child theme.

Read More
CSS

Challenging CSS Best Practices

When it comes to CSS, Thierry Koblentz believes that the sacred principle of “separation of concerns” (SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching and more. Now, he's convinced that the only way to improve how we author style sheets is by moving away from this principle. For those of you who have never heard of the SoC principle in the context of Web design, it relates to something commonly known as the “separation of the three layers”: structure, presentation, behavior.

Read More
CSS

Troubleshooting CSS

CSS is a mess. First introduced in ~1995, it was meant to style basic text documents. Not websites. Not applications. Text documents. It has come a long way since then. Probably a bit too long. A lot of things were not intended in the first place like multi-column layouts, responsive web design and more; this is why it has become a language full of hacks and glitches, like some kind of odd steam machine with a bunch of extensions.

Read More
CSS

Designing CSS Layouts With Flexbox

Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping text around images), it makes a lot of tasks much easier, or even possible at all. Flexbox’s repertoire includes the simple centering of elements (both horizontally and vertically), the expansion and contraction of elements to fill available space, and source-code independent layout, among others abilities.

Read More
CSS

Benefit From CSS Generated Content And Counters

Generated content was first introduced in the CSS2 specification. For several years, the feature was used by relatively few Web authors due to inconsistent browser support. With the release of Internet Explorer 8 in 2009, generated content was rediscovered, and many interesting implementations were adopted for the first time. In this article, Gabriele Romanato will discuss some possible uses of generated content.

Read More
CSS

Customizing Bootstrap

Twitter’s Bootstrap has taken off like a rocket since its release a year ago. The popular CSS framework supplies a responsive grid system, pre-styled components and JavaScript plugins to a parade of websites. One of Bootstrap’s appeals is that it just works. It’s a significant time-saver when starting a website, so much so that major organizations such as NBC, NASA and the White House are adopting it. And it empowers even the non-designers to turn out something decent.

Read More
CSS

Putting CSS Clip to Work: Expanding Overlay Effect

The previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today Mary Lou wants to explore the practical side of it a little bit more. She is going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay. She wants to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element.

Read More
CSS

Understanding the CSS Clip Property

Hugo Giraudel is pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. He will cover pretty much everything you have to know about it. The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as crop. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property.

Read More
Older articles