Articles > CSS

CSS

8 Best Tips to Use Variable Fonts on Your Site

Variable fonts extend the OpenType font specification with dynamic capabilities. They supply developers with typefaces that come with unlimited font variations. With variable fonts, you don't have to load a separate font file for each style variation such as italic or bold types. All font variations are included in one single file. You are not tied to pre-defined typographical styles, either. For example, most static fonts require you to use the font-weight: 800; rule for bold fonts. Variable...
CSS

How to Create a Responsive Image Gallery with Flexbox

Flexbox is a CSS layout module that makes the creation of fully flexible user interfaces possible. It offers an easy-to-use alternative to floats and a couple of jQuery plugins such as image gallery libraries as well. Flexbox is an ideal choice for several typical CSS tasks and fits especially well with one-dimensional layouts. In this article, we will look into how to use flexbox to create a responsive image gallery that looks well at every viewport size. 1. Create the HTML ... First, let's create the...
CSS

10 Best Sass Mixins for Web Developers

Currently, Sass is the most popular CSS preprocessor among web developers. It allows you to introduce programmatic logic to your CSS code and make use of advanced features such as variables, mixins, functions, inheritance, nesting, and others. Mixins are probably the most popular feature of Sass, as they let you create groups of CSS declarations that you can easily reuse whenever you need. With mixins, you can save a lot of time, avoid repetitions, and make your code more readable. In this article,...
CSS

How to Create a CSS Grid Step-by-Step

The CSS Grid Layout Module has quickly got traction among front-end developers. It's a new web standard that allows us to create two-dimensional layouts with pure CSS. Imagine a grid system similar to Bootstrap or Foundation, that makes it possible to lay out web pages without using additional libraries or external grid systems. With the CSS Grid, we can lay out elements on the page along two axes—horizontally and vertically. In this article, we'll look into how to create a CSS Grid step-by-step....
CSS

6 JS Effects That Can Be Achieved With Pure CSS

Look, people keep using JavaScript when they just don’t need to. Some might argue that it’s okay for JS to be a requirement for any given website nowadays, but does it really have to be? If your site has little-to-no app features, do you really have to use JavaScript for all of your fancy schmancy effects? Not always, no. There are already hundreds of examples of pure CSS implementations of common JavaScript effects. Chain some of them together, and you can get some pretty advanced animations and other...
CSS

6 Ways to Organize Your CSS

So you’re getting started with CSS, and you’re having a little trouble keeping it organized. Well, CSS has an inherent organization method that is right in the name: The Cascade. Whatever you write first will impact everything that comes after it; and it can all be overridden where needed. That, of course, is predicated on the idea that you’re building a small, static HTML site in 1998-to-early-2000s. Those were the days. Get off my lawn. Don’t get me wrong. The Cascade is as important as ever,...
CSS

3 Reasons Why You Shouldn’t Rely on CSS Variables

During the recent years, CSS variables have sparked a lot of debate. On one hand, there are those who have been asking for them to be included and finding various workarounds to add a more programmatic approach to CSS. On the other side of the coin are those who argue that CSS variables have no place in a language that is supposed to handle the presentation of elements. However, with the release of Chrome 49 and Firefox 43, it’s clear that CSS variables are now available in the form of custom properties and...
CSS

Using PostCSS with Images

PostCSS is a CSS post-processor engine that uses JavaScript plugins to enable the transformation of regular CSS. These plugins are very useful in PostCSS and allow one to use them in different and exciting tasks such as working with images, adding variables, nesting, conditionals and transpiling and prefixing CSS to work in older browsers. One of the most important things that comes with PostCSS is that it offers developers a modular approach, meaning that they can install only the plugins that they...
Load more
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress