CSS Media Queries

You Already Know — Fri, 19 Jan 2024 01:15:30 +0000

Introduction:

Media queries offer a powerful means to adapt our styles based on factors such as the device type, viewport size, screen pixel density, or device orientation.
For those already familiar with media queries, this post serves as a quick guide, unveiling some clever tricks that might not be widely known.

Fundamental Media Queries:

Media queries are constructed using the @media at rule, incorporating a media type, zero or more media features, or a combination of both a media type and media feature(s). The permissible media types include all, print, screen, and speech. If not explicitly mentioned, the type "all" is assumed.

It is possible to employ multiple media types simultaneously, with each type separated by commas:

In the following simple example, the default background color is red, but screen devices with a viewport width that's 650px or less will have a background color of blue instead:

Example of simple media queries that specify either a media type, a media feature or both:

Utilizing Multiple Media Features:

To meet specific requirements in a media query, you can designate multiple media features by employing the logical operator "and" between them. When utilizing "and," the query will only be a match if all the features evaluate to true:

Using the "or" Logical Operator:

By defining multiple queries separated by commas, you introduce logical "or" operators. The media query then transforms into a list of queries, applying if any of the comma-separated queries matches the conditions.
In the example below, the media query holds true if the device's viewport has a minimum width of 2rem or a maximum aspect ratio of 4/1:

Employing the "not" Logical Operator:

By placing "not" at the beginning of a query, you can achieve the opposite effect. This is particularly useful for applying styles when the browser or device fails to meet specific conditions. An example scenario is when the primary pointing device lacks the ability to hover over elements.

When employing "not," it's essential to specify the media type. Additionally, it's crucial to note that "not" applies to each individual query and not to an entire list of queries separated by commas. Each query within the list is subject to the "not" condition independently.

Exclusive Use of the "only" Logical Operator:

The "only" logical operator holds a unique characteristic—it conceals the entire query for older browsers. In simpler terms, older browsers that do not comprehend the "only" keyword will ignore the entire media query. Otherwise, the "only" keyword itself has no impact on the query's behavior.

Why I use Tailwind CSS instead of Bootstrap

You Already Know — Fri, 05 Mar 2021 18:43:27 +0000

If you are creating a new website or with a small web development team in a short amount of time, most developers lean towards Bootstrap to help with the design. The reason for this, is ease of use, tons of documentation and plenty of "predefined css components" which is why Bootstrap is popular.

But!, when project's get bigger and more traffik comes to the site(s), concerns of page overload and performance arise. While using Bootstrap it is very unlikely one will use all of it's available framework classes, which equals to considerable amount of css overload as well as unused components.

Tailwind to the rescue!!!

Tailwind is a CSS utility framework, some call it a "utility bundle" for rapid UI development, (my go to for quick development). Why? Tailwind doesn't provide a default theme or any predefined UI components, it is unlikely to get two different web pages, designed by 2 different developers and the web pages would look the same or similar, allowing the developer to have an identity/signature.

With Tailwind CSS, there is no limit to the imagination, designing is structured in a way so developer's are able to create their own ruleset to avoid css overload or repeated properties.

All utility classes can be reviewed in the Tailwind CSS documentation as well as the tailwind.config.js file, which will be located in the root of a project after installation. Every available class can be configured for small and larger project's.

Example of styling a button using tailwind and Bootstrap:
I am using VSCode as my Text Editor

Output:
Tailwind CSS vs Bootstrap

Bootstrap predefined button design is achieved. To achieve a custom look when using Bootstrap we need to write custom css. Using Tailwind CSS utility classes, it is possible to achieve any look and feel of the button without writing any css.

WHY!?

You will have the ability to create personal UI design, identity and branding without writing a bunch of custom CSS (you don't have to be CSS expert)

The ease of creating Responsive websites/web apps

Tailwind utility class behave in a responsive behaviour. This allows for effortless creation of responsive components without writing additional CSS. Tailwind provides a simple method of putting already existing utility classes into a responsive context. Using the prefix {screen size}:{class}. Look at the above example, if you want to change its color, size etc. depending on the screen size (desktop monitor, laptop or mobile smart device) we have to add the following:

Look at line 23

Output:

Site being viewed on a laptop

Site being viewed via smart device

Tailwind responsiveness implies that the page is going to be created for mobile screens first. Adding bg-red-500 tells the background of the element changes to red if the size of the screen is small. If the size of the screen is medium-xl than the size has to be applied"md:class lg:class axl:class " represents the color of the background change to yellow (bg-yellow-500).

These are the predefined screen size options in Tailwind:

The possibilities are endless!

You can configure/customize Tailwind Utilities

The biggest strengths of Tailwind is its configurability. In every Tailwind project is the tailwind.config.js file located in the root of the project (must be in the root of project/directory). It contains all the configurable utility classes and colors. This file doesn't exist unless the user generates it. If there is no config file the utility classes are the same as mentioned in the official documentation. To learn more go to Tailwind documentation

Tailwind is simple, professionally made, well documented and worth your time. It made my workflow better, faster and helped me understand CSS (also known as Vanilla CSS), made made projects uniform and reduced the amount of CSS I wrote over the course learning it. None of my projects look the same, the creator of Tailwind (Adam Wathan) is an experienced guy in the industry and is continuously improving Tailwind. (Adam Wathan) also wrote a book Refactoring UI that I recommend you read!

In short, Tailwind is the love of my life...

DEV Community: You Already Know

CSS Media Queries

Why I use Tailwind CSS instead of Bootstrap