Articles > CSS


How to Create a Sticky Footer with Flexbox

Creating a sticky footer is one of the most common web development tasks you can easily solve with flexbox. Without a sticky footer, if you don't have enough content on the page, the footer "jumps" up to the middle of the screen, which can completely ruin the user experience. Before flexbox, developers used negative margins to force the footer down to the bottom of the page. Luckily, we don't need such a hack anymore! In this article, we will show you an easy technique that allows you to create a sticky footer...

2 Ways to Create the Holy Grail Layout with Flexbox

Before the flexbox layout module was introduced, it had been a challenge to create the holy grail layout. We had to use all kinds of tweaks to achieve this kind of layout loved both by marketers and website owners, as it allows us to use two sidebars at the same time — one on the left and one on the right side. Thanks to flexbox, now we can build it in just a few lines of code. So, in this tutorial, we will look into how to create the holy grail layout with flexbox — in two different ways. First, we will use one huge...

A Step-by-Step Guide to Dark Mode in CSS

Enabling dark mode in CSS allows website visitors to switch to an eye-friendly and resource-saving design whenever they want. There are a couple of UX patterns you can use to add a dark theme to your site. In this tutorial, we will show you how to add a simple jQuery toggle to the top of the page so that users can easily switch dark mode on and off. Our demo will be responsive as well, so it will look good on all device sizes, from smartphones to desktops to large screens. Here is how the light mode will finally look...

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...

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...

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,...

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....

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...
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