CSS has come a long way over the past few years. In the past, you'd use CSS to create simple-looking web applications that rely on HTML tables and CSS floats as their layout systems. And now you can architect complex interactive user interfaces that are appealing with elegant designs.

But as advanced as CSS has become, writing out CSS styles from scratch for extensive web applications can be time-consuming. It can also lead to the repetition of styles, longer CSS files, cross-browser compatibility errors, and generally a more complex codebase.

To solve this challenge, CSS frameworks emerged as a solution. CSS frameworks introduced a means for developers to adopt a set of pre-defined and standardized CSS styles and components to create consistent, appealing, and responsive user interfaces.

But with so many CSS frameworks to choose from, deciding on the right framework for your application can be difficult. You'll want to conduct a proper comparison that accounts for the overall features of each CSS framework, so you can choose the most suitable option that fits your needs.

In this article, we’ll explore what CSS frameworks are, their benefits and limitations, and how you can get started using them. We’ll also look at the most prominent and used CSS frameworks you should know.

In the end, you'll have a good sense of how CSS frameworks work and which to use to meet your project's needs. Let's get started.

Table of Contents

• What are CSS Frameworks?

• Why Should You Use CSS Frameworks?

• Types of CSS Frameworks

• 9 CSS Frameworks You Should Know

• Bootstrap

• Tailwind CSS

• Material UI

• styled-components

• Foundation

• Chakra UI

• Emotion

• Bulma

• Pure CSS

• How to Choose the Right CSS Framework for Your Project

• Final Thoughts

What are CSS Frameworks?

CSS frameworks are a set of pre-written and ready-to-use CSS styles and stylesheets that provide a set of styles and components for styling markup. They streamline the development process by offering a foundation of reusable CSS styles for common design elements and layouts.

CSS frameworks are used to create familiar and consistent user interfaces, simplify responsive design, and enhance collaboration among development teams.

Why Should You Use CSS Frameworks?

CSS frameworks offer numerous benefits that make them indispensable tools for web development. Here are some advantages that CSS frameworks provide:

Faster development time: CSS frameworks come with pre-built components and styles, eliminating the need to write everything from scratch. This speeds up the development process and allows developers to focus on customizing and fine-tuning specific aspects of their projects rather than building from scratch.

Consistent style and design: CSS frameworks help provide a cohesive and consistent look across different components and pages. They ensure that all styles, UI elements, buttons, and typography maintain a unified design language, saving developers from spending excessive time on styling and ensuring a better user experience.

Improve collaboration and maintainability: CSS frameworks usually offer well-documented libraries and established conventions, making it easier for developers to collaborate and maintain codebases. With a common codebase and extensive documentation, developers can easily understand and work with each other's code.

Types of CSS Frameworks

CSS frameworks aren’t a one-size-fits-all. They come in different forms, and each category has its own focus and advantages. Knowing the categories CSS frameworks can fit into will be helpful in letting you know what to expect from each framework.

Let's look at the main types of CSS frameworks now.

Component-Based Frameworks

This is the origin of CSS frameworks. Component-based frameworks offer a set of pre-built UI components that developers can plug into their applications to assemble interfaces quickly. The goal is to provide a modular and reusable design system that can help you create consistent and visually appealing web apps without starting from scratch every time.

Utility-First Frameworks

The idea behind utility-first frameworks is that CSS should not be descriptive and should not heavily rely on your markup (for example, a “.header” class that signifies a navigation bar or website's header), but instead should be based on functionality (for example, “.text-align-center”).

Rather than confining your application’s design to only what is provided by the framework, utility-first frameworks offer CSS styles and classes that only do one thing (or a small set of things) as building blocks to extend and customize the design of your application beyond the limitations of a component-based framework.

CSS-in-JS

With the rise of JavaScript libraries like React, CSS-in-JS frameworks were created to let developers manipulate styles directly in JavaScript by including CSS in their JavaScript markup.

CSS-in-JS utilizes the dynamic nature of JavaScript to provide a way of writing interactive CSS styles that are performant and based on user data and interactions.

There are more types of CSS frameworks available, but these three categories cover the most notable groups.

Note that there isn’t a fine line that separates these concerns. Most CSS frameworks can overlap into multiple categories – for example, a component-based framework can give you utilities, and a utility-based framework can give you components as well

A diagram showing some categories of CSS frameworks and how the intertwine with each other

For example, consider the diagram above that shows how the three categories of CSS frameworks can intertwine.

9 CSS Frameworks You Should Know

Now that you have a clear understanding of what CSS frameworks are and their different types, let's have a look at some of the most prominent and most-used CSS frameworks you should know.

Bootstrap

Bootstrap began as an internal tool at X (formerly, Twitter) to maintain a consistent look across the platform. Then it was open-sourced in 2011 for the wider web development community to use. Bootstrap is one of the most widely used CSS frameworks, with a focus on responsive, mobile-first web design.

Bootstrap offers a robust collection of CSS and JavaScript components, such as its grid system and responsive UI components like buttons, navigation menus, and forms, that streamline the process of building clean and consistent web layouts.

Bootstrap has large community support and over a hundred thousand GitHub stars. And though it may seem bulky when compared to modern options, it's still one of the most used CSS frameworks you can use to build good-looking and thematically coherent web applications without needing to be an expert in CSS and web design.

An image of the Bootstrap framework official website

How to use Bootstrap

To get started with Bootstrap, you need to pull its source files into your project. In a JavaScript framework like React, you can install Bootstrap into your project using a package manager like npm.

npm install bootstrap

Next, import Bootstrap’s CSS at the top of your application's main entry file, typically src/index.js:

import 'bootstrap/dist/css/bootstrap.min.css';

This will import Bootstrap CSS and make it available for use throughout your application. Now you can use Bootstrap components in your application like this:

import React from 'react';

function App() {

  return (

    <div className="container">

      <h1>Hello, Bootstrap in React!</h1>

      <button className="btn btn-primary">Click Me</button>

    </div>

  );

}

export default App;

To learn more about Bootstrap, refer to the official Bootstrap documentation for detailed guidance, examples, and additional resources.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces directly in markup files.

As a utility-first framework, Tailwind abstracts from the constraints of a component-based framework, for example, Bootstrap.

Though component-based frameworks like Bootstrap excel at streamlining the process of building web layouts by providing pre-defined UI components, they’re opinionated in that you’re confined to the current design system and ecosystem of the framework. Trying to extend or customize your application’s layout beyond what the framework provides can prove to be a workaround.

Tailwind offers a robust system of utility and helper classes as building blocks that can be composed to build any design directly in your markup. With Tailwind ranking as the second most used framework in the State of CSS 2023 survey at about 76%, it's the best choice to rapidly prototype and speed up the development process in line with modern web standards.

An image of the Tailwind CSS framework official website

How to use Tailwind CSS

Install tailwindcss via a package manager, and create your tailwind.config.js file to configure and customize Tailwind CSS for your application.

npm install -D tailwindcss

npx tailwindcss init

Add the paths to all your template and markup files in your tailwind.config.js file as well as other configurations.

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

}

Add the@tailwind directives for each of Tailwind’s layers to your main CSS file and ensure the CSS file is imported into the main entry file of your application.

@tailwind base;

@tailwind components;

@tailwind utilities;

Now you can apply utility classes directly in your HTML markup to style your components.

function Button({children}) {

  return (

      <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">

        {children}

      </button>

  );

}

export default Button;

You can learn more about setting up and using Tailwind CSS based on your project environment and advanced usage by going through the official Tailwind CSS documentation.

Material UI

Material UI is a component-based CSS framework for building user interfaces in React applications. It is based on Google's open-source design system, Material Design, and provides a rich collection of pre-built components and styles.

As one of the largest UI communities in the React ecosystem, Material UI offers a modern and visually appealing design system. It features a suite of customization options that make it easy for developers to implement custom design systems on top of the library, making it a popular choice for creating consistent UIs in React applications.

An image of the MUI kit official website

How to use Material UI

Install Material UI's core package and any additional dependencies you need.

npm install @mui/material @emotion/react @emotion/styled

Now you can Import any Material UI component into your React components and use them in your JSX code.

import Button from '@mui/material/Button';

export default function ButtonUsage() {

  return <Button variant="contained">Hello world</Button>;

}

Checkout Material UI documentation for detailed usage guidelines, API references, and examples

styled-components

styled-components is one of the most prominent CSS-in-JS libraries. It provides a seamless way to create and manage CSS styles within JavaScript files and components.

While it was originally designed specifically for the React ecosystem, styled-components have advanced so that you can now use it with vanilla JavaScript or other JavaScript frameworks like Vue.

As the most popular CSS-in-JS library by GitHub stars and weekly NPM downloads, styled-components offers a highly flexible and intuitive approach to styling, making it easier to build reusable and self-contained UI components.

An image of the Styled-components official website

How to use styled-components

Install the styled-components package via npm or yarn.

npm install styled-component

Now, you can define your styled components by importing the styled function and using it to create styled versions of HTML elements or custom components.

import styled, { css } from 'styled-components'

const Title = styled.h1`

  font-size: 1.5em;

  text-align: center;

  color: #BF4F74;

`;

render(

  <div>

    Title>

      Hello World!

    </Title>

  </div>

);

Refer to the official styled-components documentation for comprehensive guides, examples, and advanced features.

Foundation

Foundation is the closest alternative to Bootstrap. It's not just a CSS framework, but a comprehensive toolkit for styling web applications, architecting email templates, which are known to be notoriously hard, and integrating with ZURB’s Motion UI to create advanced CSS animations.

It includes common UI components like Bootstrap but is more utility-focused and gives developers more options for customizing components. With almost too many features, it can be considerably more complex and harder to fully understand how everything works compared to other frameworks.

An image of the Foundation framework official website

How to use Foundation

You can install Foundation in your project with a package manager.

npm install foundation-sites

Now you can use its styles and components in your application.

<div class="card" style="width: 300px;">

  <div class="card-divider">

    This is a header

  </div>

  <img src="assets/img/generic/rectangle-1.jpg">

  <div class="card-section">

    <h4>This is a card.</h4>

    <p>It has an easy to override visual style.</p>

  </div>

</div>

Consult Foundation’s official documentation for detailed instructions, examples, and additional resources.

Chakra UI

The brainchild of Nigerian developer Segun Adebayo, Chakra UI falls into the same category as MUI as a component library and CSS framework for React applications. It emphasizes accessibility, developer ergonomics, and a customizable design system.

Chakra UI provides a collection of well-designed and accessible components that can be easily customized to match your project's branding and style.

An image of the Chakra CSS framework official website

How to use Chakra UI

To get started, install the Chakra UI package via a package manager.

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

After installing Chakra UI, you need to wrap your application or specific components with the ChakraProvider to make the Chakra UI components available.

import * as React from 'react'

// 1. import `ChakraProvider` component

import { ChakraProvider } from '@chakra-ui/react'

function App() {

  // 2. Wrap ChakraProvider at the root of your app

  return (

    <ChakraProvider>

      <TheRestOfYourApplication />

    </ChakraProvider>

  )

}

Now you can use Chakra UI's components in your JSX code to build your user interface.

import { Button} from '@chakra-ui/react'

export default function ButtonUsage() {

  return <Button colorScheme='blue'>Hello world</Button>;

}

To learn more, you can check out the Chakra UI documentation for detailed usage guidelines, component examples, and theming options

Emotion

Emotion is built off the concepts of styled-components to be a more performant, lightweight, and feature-rich CSS-in-JS library. It does this by utilizing features such as source maps, labels, and testing utilities.

Emotion is framework-agnostic and has a syntax that is as close to CSS as possible, making it easier to adopt.

Image of the Emotion homepage

How to use Emotion

The @emotion/css package is framework-agnostic and it's the simplest way to use Emotion. To get started, install the package via a package manager.

npm i @emotion/css

Now you can use Emotion's CSS API to generate and compose CSS styles.

import { css } from '@emotion/css'

const color = 'white'

render(

  <div

    className={css`

      padding: 32px;

      background-color: hotpink;

      font-size: 24px;

      border-radius: 4px;

      &:hover {

        color: ${color};

      }

    `}

  >

    Hover to change color.

  </div>

)

Refer to the official Emotion documentation for detailed instructions, usage examples, and advanced features.

Bulma

Bulma is a modern and lightweight CSS framework that offers a flexible grid system and a variety of CSS styles and components. It focuses on simplicity, modularity, and ease of use.

Bulma emphasizes that it is "environment agnostic," meaning that it is just the style layer on top of the logic, so it integrates capably with any JS environment.

Bulma is more of a collection of CSS classes than UI components. It has a clean and intuitive syntax and is less complex and easier to understand compared to other component-based frameworks like Foundation and Bootstrap. This makes it an ideal choice for beginners or developers who value simplicity and want to quickly build responsive websites.

An image of the Bulma CSS framework official website

How to use Bulma

To get started, you need to download Bulma for your project.

npm install bulma

Next, import Bulma CSS styles into your project's main stylesheet.

@import 'bulma/css/bulma.css';

Now, you're ready to start styling your project using Bulma's classes and components.

You can learn more about customizing Bulma's styles, overriding CSS variables, or modifying the Sass source files from the official documentation.

Pure CSS

Pure CSS is a minimalistic and lightweight CSS framework that aims to provide a set of small, responsive CSS modules and styles as a starting point for styling web applications without imposing any design decisions. It has one of the smallest bundle sizes of 3.5KB (compressed) when all modules are used.

Pure CSS is suitable for projects where a minimal design approach is desired or when you prefer to write your styles from scratch.

An image of the Pure.CSS official website

How to use Pure CSS

You can add Pure CSS to your page via the free jsDelivr CDN. Add the following <link> element to your page's <head>, before your project's stylesheets.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">

Refer to the official Pure CSS documentation for detailed usage guidelines, examples, and additional resources.

How to Choose the Right CSS Framework for Your Project

As your applications grow and become bigger, adopting a CSS framework is an invaluable option when it comes to speeding up your workflow.

CSS frameworks help you build good-looking and professional web pages while maintaining consistency in design. But not all frameworks compare equally, as some provide more benefits and advantages.

When choosing the ideal CSS framework for your project, it is crucial to keep in mind various factors that can greatly impact how successful and efficient working with the framework will be for your project.

Some key aspects to consider are:

• Customizability: The level of customization the framework offers. Does the framework let you customize and extend your styles beyond the framework’s design system to suit your specific needs and preferences? Or is it opinionated and vendor-locked so that you become confined to the framework’s design-system and ecosystem?

• Learning curve: Another factor to consider is the learning curve associated with implementing the framework. How user-friendly is the framework for new learners? What’s the developer experience like? Are there enough documentation and resources available for you to learn and utilize the frameworks effectively?

• Community support: The availability of a supportive and active community is also an important consideration. Dedicated communities of developers who actively contribute to the frameworks' growth and provide assistance to fellow developers (and you!) are a great resource.

• How it fits your project: Lastly, ensuring that the CSS framework you choose is compatible with your project goals and matches its branding and design requirements is essential.

The table above gives an overview of the CSS frameworks we covered across different aspects, such as their approach, customization, learning curve, community support, available components, and styles.

Final Thoughts

In the coming years, we can expect the emergence of new CSS frameworks and improvements to existing ones. The CSS frameworks discussed in this article are some of the most notable to use for your next project.

It all comes down to which fits with your goals and project requirements. By carefully evaluating and weighing these factors, you can make an informed decision and select the CSS framework that perfectly aligns with your needs and objectives.

Whether you opt for the versatility and flexibility of Tailwind CSS or the simplicity of Pure.CSS, all frameworks offer valuable solutions that can significantly streamline your development time, ensure brand consistency, and improve code maintenance.

So, go ahead and choose the framework that best suits your project, and embark on a journey towards creating visually stunning and highly functional web applications!

If you found this article helpful, you can follow me on Twitter or connect with me on LinkedIn. Happy coding!

But there are two distinct approaches to applying CSS: using a CSS framework or writing custom CSS from scratch.

In this article, we'll explore the pros and cons of both approaches to help you decide which one is the right fit for your web development project.

CSS Frameworks: A Solid Foundation

What Are CSS Frameworks?

CSS frameworks are pre-written, reusable sets of CSS rules and components that make it easier to style web pages. They often include predefined styles for common elements like buttons, forms, navigation bars, and grids.

Popular CSS frameworks include Bootstrap, Tailwind CSS, and Bulma.

Advantages of CSS Frameworks

1. Time Efficiency

One of the most significant advantages of using a CSS framework is the time it saves. You can quickly prototype and develop your website without starting from scratch.

With predefined styles and components, you don't need to reinvent the wheel, which is especially handy for tight project deadlines.‌

/* Example: Bootstrap button class */ <button class="btn btn-primary">Primary Button</button>

2. Consistency

CSS frameworks provide a consistent look and feel across your website. This helps maintain a professional appearance and ensures that your website is user-friendly, as visitors will find it easier to navigate and understand.

<!-- Example: Bootstrap navigation bar --> 
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Navigation links go here --> 
</nav>

3. Responsiveness

Many CSS frameworks are designed to be responsive, meaning they adapt well to different screen sizes and devices. This makes them a great choice for creating mobile-friendly websites without too much extra work.

<!-- Example: Bootstrap responsive grid system -->
<div class="row"> 
<div class="col-sm-6">Column 1</div> 
<div class="col-sm-6">Column 2</div> 
</div>

Disadvantages of CSS Frameworks

1. Learning Curve

While CSS frameworks can save time, they also require learning how to use them effectively. Each framework has its own conventions and classes that you must master. This can be challenging for beginners.

/* Example: Bootstrap class for a responsive grid */
<div class="container">
<div class="row">
<div class="col-sm-6">Column 1</div> 
<div class="col-sm-6">Column 2</div>
</div> 
</div>

2. Bloated Code

CSS frameworks often come with more code than you need. This can result in larger file sizes, which may affect your website's performance. Removing unused styles can be time-consuming.

3. Limited Customization

Frameworks may limit your ability to create a unique design. While you can customize the styles to some extent, you might find it challenging to achieve a truly distinctive look.

Custom CSS: Total Control

What Is Custom CSS?

Custom CSS, as the name suggests, involves writing your own styles from scratch. With this approach, you have complete control over every aspect of your website's design. You can create a unique, tailor-made experience for your visitors.

Advantages of Custom CSS

1. Complete Control

The primary advantage of custom CSS is complete control. You can design every element of your website exactly as you envision it. This level of customization is ideal for projects that require a unique and brand-specific look.

/* Example: Custom CSS for a unique button */
.custom-button { 
background-color: #ff6600;
color: #fff;
border: none; 
padding: 10px 20px;
border-radius: 5px;
}

2. Minimal Code

Custom CSS often results in cleaner and more efficient code because you only include what's necessary. This can lead to faster-loading web pages and better performance.

/* Example: Minimal custom CSS for a simple webpage */ 
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}

3. Greater Understanding

Writing custom CSS forces you to have a deep understanding of how CSS works. This can make you a better web developer and give you more flexibility in solving design problems.

Disadvantages of Custom CSS

1. Time-Consuming

Creating custom CSS from scratch can be time-consuming, especially for larger and more complex websites. It requires a good deal of planning and coding.

/* Example: Complex custom CSS for a multi-page site */ 

/* Styles for the homepage */ 

body.home { /* Custom styles for the homepage */ } 

/* Styles for the contact page */

body.contact { /* Custom styles for the contact page */ }

2. Potential for Mistakes

Writing custom CSS leaves room for errors, especially for those who are less experienced. A single mistake can lead to unintended design issues.

/* Example: A common mistake - forgetting to close a CSS rule */
.button { 
background-color: blue; 
color: white;

3. Maintenance

Maintaining custom CSS over time can be a challenge, especially when updating your website or making changes. It's essential to stay organized and document your code well.

/* Example: Well-documented custom CSS */ 
/* Header styles */ 
.header {
background-color: #333;
color: #fff; 
/* ... more styles ... */ }

Which One to Choose?

The decision between using a CSS framework and writing custom CSS depends on your specific project and your level of expertise.

Here are some factors to consider:

Choose a CSS Framework When:

• You have a tight deadline and need to build a website quickly.
• You are working on a project that doesn't require a highly customized design.
• You want a responsive website without spending extra time on media queries.

Choose Custom CSS When:

• You need a unique and highly customized design that reflects your brand or personality.
• You have the time and expertise to create your styles from scratch.
• You want to keep your code clean and efficient, optimizing for performance.

How to Combine Both Approaches

In some cases, it might make sense to use a combination of both CSS frameworks and custom CSS.

You can start with a framework to save time and then add custom CSS to make specific design adjustments or add unique features.

/* Example: Adding custom CSS on top of a framework */ 
.custom-button { 
background-color: #ff6600; 
color: #fff; 
border: none; 
padding: 10px 20px;
border-radius: 5px;
} 
/* Use the custom class on specific buttons */
<button class="btn custom-button">Custom Button</button>

Conclusion

CSS frameworks and custom CSS each have their own strengths and weaknesses. Your choice should align with your project requirements, your expertise, and your goals.

There is no one-size-fits-all answer, as the decision ultimately depends on the unique context of your web development project.

In the end, whether you opt for the convenience of a CSS framework or the full control of custom CSS, what matters most is the quality and usability of your website. A well-styled and user-friendly site will ultimately determine your success in the world of web development.

The CSS border property allows us to do several things with the border of individual boxes. Getting familiar with this property can really help you debug more effectively and design your web pages more beautifully.

In this tutorial, we will look at CSS's border property in detail. This will help you get comfortable with it and start using it in your next coding project.

What is the CSS border property?

border is not all the border property entails – though it is important to note that it’s a very useful shorthand, which we will get to later in this tutorial.

So, in addition there are the border-width, border-style, border-color, and border-radius sub-properties. Let's take a look at each of them one by one.

CSS border-width property

You use the border-width property to specify the width of a border. The value is commonly expressed in pixels (px), but it can be expressed in rem, em, and percentage (%).

And it doesn’t end there – this property also takes thin, medium, and thick as values.

The border-width property is a shorthand for border-top-width, border-right-width, border-bottom-width and border-left-width, moving in a clockwise direction. So, if you want, you can apply different width values to the border-top, border-right, border-bottom, and border-right.

CSS border-style property

With the border-style property, you get access to different styles you can apply to the border of a box. It takes none (the default), solid, dashed, dotted, double, groove, ridge, inset, and outset.

Just like border-width, border-style is a shorthand for border-top-style, border-right-style, border-bottom-style and border-left-style. So again, you can specify different values for the properties if you don’t want to use the shorthand.

CSS border-color property

The border-color property lets you specify different colors for your border. You can specify this color with named, RGB, and HSL colors – there are no limits.

Black is the default color for this property. So if you don’t specify a value for it, black is automatically set as long as you have the border-width and border-style set to some values.

As it goes with border-width and border-style, you can also specify different colors on all the sides of the border. So, border-color is a shorthand for border-top-color, border-right-color, border-bottom-color, and border-left-color.

Below are snippets of code and their respective screenshots showing the three sub-properties of border in action:

<img src="freecodecamp.png" alt="freecodecamp-img" />

img {
      display: block;
      margin: 0 auto;
      margin-top: 1rem;
    }

    img {
      border-top-width: 2px;
      border-right-width: 4px;
      border-bottom-width: 6px;
      border-left-width: 8px;
      border-top-style: solid;
      border-right-style: dotted;
      border-bottom-style: dashed;
      border-left-style: groove;
      border-top-color: #006100;
      border-right-color: #050116;
      border-bottom-color: #2ecc71;
      border-left-color: #3498db;
    }

img {
      display: block;
      margin: 0 auto;
      margin-top: 1rem;
    }

img {
      border-width: 8px;
      border-style: solid;
      border-color: #006100;
    }

 img {
      border-width: 10px;
      border-style: outset;
      border-color: #006100;
    }

You can play around with the sub-properties to get a better understanding of how they work.

The border shorthand

We’ve applied the border sub-properties (border-width, border-style, and border-color) one by one, but they can be applied together with the border shorthand.

This shorthand is useful especially when you want all four sides to be the same like I have done below:

img {
      border: 2px solid #006100;
    }

CSS border-radius property

With border-radius, you can remove sharp edges from the borders in order to make them into rounded corners. I think this makes them more beautiful, too.

The value is specified in pixels (px), and percentage (%) too, depending on how you prefer it.

img {
      border: 2px solid #006100;
      border-radius: 10px;
    }

If you want to, you can also specify a different radius for the top, left, bottom and right edges of the border with border-top-right-radius, border-top-left-radius, border-bottom-right-radius and border-bottom-left-radius. This is because border-radius is also a shorthand for those four sub-properties.

We can apply some radii to our borders too:

img {
      border: 2px solid #006100;
      border-top-right-radius: 10px;
      border-top-left-radius: 30px;
      border-bottom-right-radius: 50px;
      border-bottom-left-radius: 100px;
    }

A small project: How to Use the CSS border Property to Make the Olympic Rings

We can take what we’ve learned about the border property and combine it with CSS Positioning and Flexbox to make the Olympic Rings.

    <section class="container">
      <section class="top">
        <div class="red"></div>
        <div class="black"></div>
        <div class="blue"></div>
      </section>

      <section class="bottom">
        <div class="green"></div>
        <div class="yellow"></div>
      </section>
    </section>

div {
      height: 12.5rem;
      width: 12.5rem;
      border: 12px solid;
      border-radius: 50%;
      margin: 1rem;
    }

    .blue {
      color: #3498db;
    }

    .black {
      color: black;
      position: relative;
      z-index: 1000;
    }

    .red {
      color: #ca2e2e;
    }

    .yellow {
      color: #ffa600;
    }

    .green {
      color: #19a019;
    }

    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(90deg);
    }

    .bottom {
      position: relative;
      right: 8.125rem;
    }

    @media screen and (max-width: 750px) {
      div {
        width: 130px;
        height: 130px;
      }

      .bottom {
        right: 7rem;
      }
    }

So what's going on in this code?

The Olympic Rings have 5 circles – 3 at the top and 2 at the bottom – with colors blue, black, red, yellow, and green, respectively.

To make a circle with the border-radius property, we set the width and height to 12.5rem each, then the border-radius itself to 50%. This is how you make a circle with CSS.

We placed the top and bottom rings in a parent container, so we're able to place them one on top of each other with CSS Flexbox. But that didn’t complete the job, so we used the transform property of CSS animation to get it done.

Finally, we made some little tweaks with CSS Positioning to get the rings interlocked.

In the end, we get the result below:

Conclusion

I hope this tutorial helps you get up and running with the CSS border property so you can make effective use of it in your projects.

Thanks a lot for reading and have a good time.

How can Tailwind CSS help us to take control of our styles?

• What is Tailwind?
• So what makes Tailwind great?
• Part 1: Adding Tailwind CSS to a static HTML page
• Part 2: Adding Tailwind CSS to a React app

What is Tailwind?

Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application.

The underlying goal is that as you're building your project, you don't need to deal with cascading styles and worrying about how to override that 10-selector pileup that's been haunting your app for the last 2 years.

So what makes Tailwind great?

Taildwind's solution is to provide a wide variety of CSS classes that each have their own focused use. Instead of a class called .btn that is created with a bunch of CSS attributes directly, in Tailwind, you would either apply a bunch of classes like bg-blue-500 py-2 px-4 rounded to the button element or build a .btn class by applying those utility class to that selector.

While Tailwind has a lot more going for it, we're going to focus on these basics for this tutorial, so let's dig in!

Part 1: Adding Tailwind CSS to a static HTML page

We're going to start off by applying Tailwind CSS straight to a static HTML page. The hope is that by focusing on Tailwind and not the app, we can get a better understanding of what's actually happening with the framework.

Step 1: Creating a new page

You can get started by simply creating a new HTML file. For the content, you can use whatever you want, but I'm going to use fillerama.io so the filler content is a bit more fun.

New HTML page with content

If you want to simplify this step, you can just copy the file I created to get started.

Follow along with the commit!

Step 2: Adding Tailwind CSS via CDN

Tailwind typically recommends that you install through npm to get the full functionality, but again, we're just trying to understand how this works first.

So let's add a link to the CDN file in the <head> of our document:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Once you save and reload the page, the first thing you'll notice is that all of the styles were stripped!

HTML page with the Tailwind CSS base

This is expected. Tailwind includes a set of preflight styles to fix cross-browser inconsistencies. For one, they include the popular normalize.css which they build upon with their own styles.

But we're going to learn how to use Tailwind to add back our styles and set things up how we want!

Follow along with the commit!

Step 3: Using Tailwind CSS to add styles to your page

Now that we have Tailwind installed, we've added the ability to make use of their huge library of utility classes that we'll now use to add styles back to our page.

Let's start off by adding some margin to all of our paragraphs (<p>) and our list elements (<ol>, <ul>). We can do this by adding the .my-5 class to each element like so:

<p class="my-5">
  Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along…
  Belligerent and numerous.
</p>

The class name follows a pattern that you'll notice with the rest of the utility classes – .my-5 stands for margin (m) applied to the y-axis (y) with a value of 5 which in Tailwind's case, it uses rem, so the value is 5rem.

HTML page with basic paragraph styles

Next, let's make our headers look like actual headers. Starting with our h1 tag, let's add:

<h1 class="text-2xl font-bold mt-8 mb-5">

Here's what's happening:

• text-2xl: set the text size (font-size) to 2xl. In Tailwind, that 2xl will equate to 1.5rem
• font-bold: set the weight of the text (font-weight) to bold
• mt-8: Similar to my-5, this will set the margin top (t) to 8rem
• mb-5: And this will set the margin bottom (b) to 5rem

HTML page with styled H1

With those classes added to the h1, let's apply those same exact classes to the rest of our header elements, but as we go down the list, reduce the size of the font size, so it will look like:

• h2: text-xl
• h3: text-lg

HTML page with all headers styled

Now let's make our list elements look like lists. Starting with our unordered list (<ul>), let's add these classes:

<ul class="list-disc list-inside my-5 pl-2">

Here's what we're adding:

• list-disc: set the list-style-stype to disc (the markers on each line item)
• list-inside: sets the position of the list markers using relative to the list items and the list itself with list-style-position to inside
• my-5: set the margin of the y axis to 5rem
• pl-2: set the left padding to 2rem

Then we can apply the exact same classes to our ordered list (<ol>), except instead of list-disc, we want to change our style type to list-decimal, so that we can see numbers given it's an ordered list.

<ol class="list-decimal list-inside my-5 pl-2">

And we have our lists!

HTML page with styled lists

Finally, let's make our content a little easier to read by setting a max width and centering the content. On the <body> tag, add the following:

<body class="max-w-4xl mx-auto">

/Note: Typically you wouldn't want to apply these classes to the <body> itself, rather, you can wrap all of your content with a <main> tag, but since we're just trying to get an idea of how this works, we'll roll with this. Feel free to add the <main> tag with those classes instead if you prefer!/

And with that, we have our page!

HTML page with centered content

Follow along with the commit!

Step 4: Adding a button and other components

For the last part of our static example, let's add a button.

The trick with Tailwind, is they intentionally don't provide pre-baked component classes with the idea being that likely people would need to override these components anyways to make them look how they wanted.

So that means, we're going to have to create our own using the utility classes!

First, let's add a new button. Somewhere on the page, add the following snippet. I'm going to add it right below the first paragraph (<p>) tag:

<button>Party with Slurm!</button>

HTML page with unstyled button

You'll notice just like all of the other elements, that it's unstyled, however, if you try clicking it, you'll notice it still has the click actions. So let's make it look like a button.

Let's add the following classes:

<button class="text-white font-bold bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">
  Party with Slurm!
</button>

Here's a breakdown of what's happening:

• text-white: we're setting our text color to white
• font-bold: set the weight of the text to bold (font-weight)
• bg-purple-700: set the background color of the button to purple with a shade of 700. The 700 is relative to the other colors defined as purple, you can find these values on their palette documentation page
• hover:bg-purple-800: when someone hovers over the button, set the background color to purple shade 800. Tailwind provides these helper classes that allow us to easily define interactive stiles with things like hover, focus, and active modifiers
• py-2: set the padding of the y-axis to 2rem
• px-4: set the padding of the x-axis to 4rem
• rounded: round the corners of the element by setting the border radius. With tailwind, it sets the border-radius value to .25rem

And with all of that, we have our button!

HTML page with a styled button

You can apply this methodology to any other component that you'd like to build. Though it's a manual process, we'll find out how we can make this process easier when building in more dynamic projects like those based on React.

Follow along with the commit!

Part 2: Adding Tailwind CSS to a React app

For more of a real-world use case, we're going to add Tailwind CSS to an app created with Create React App.

First, we'll walk through the steps you need to take to add tailwind to your project using a fresh install of Create React App, then we'll use our content from our last example to recreate it in React.

Step 1: Spinning up a new React app

I'm not going to detail this step out too much. The gist is we'll bootstrap a new React app using Create React App.

To get started, you can follow along with the directions from the official React documentation:

https://reactjs.org/docs/create-a-new-react-app.html

And once you start your development server, you should now see an app!

Create React App starting page

Finally, let's migrate all of our old content to our app. To do this, copy everything inside of the <body> tag of our static example and paste it inside of the wrapper <div className="App"> in the new React project.

Migrating code to React app

Next, change all class=" attributes from the content we pasted in to className=" so that it's using proper React attributes:

Fixing class attribute in content

And lastly, replace the className App on our wrapper <div> to the classes we used on our static <body>.

Adding wrapper styles to the app

Once you save your changes and spin back up your server, it will look deceivingly okay.

React app with basic content

React includes some basic styles itself, so while it looks okay, we're not actually using Tailwind yet. So let's get started by installing it!

Follow along with the commit!

Step 2: Installing Tailwind in your React app

There are a few steps we'll need to go through in order to get Tailwind up and running on our app. Make sure you follow these steps carefully to ensure it's properly configured.

First, let's add our dependencies:

yarn add tailwindcss postcss-cli autoprefixer
# or
npm install tailwindcss postcss-cli autoprefixer

Per Tailwind's documentation, we need to be able to process our styles so that they can be properly added to our pipeline. So in the above, we're adding:

• tailwindcss: the core Tailwind package
• postcss-cli: Create React App already uses postcss, but we need to configure Tailwind to be part of that build process and run it's own processing
• autoprefixer: Tailwind doesn't include vendor prefixes, so we want to add autoprefixer to handle this for us. This runs as part of our postcss configuration

We're also going to add two dev dependencies that make it easier to work with our code:

yarn add concurrently chokidar-cli -D
# or
npm install concurrently chokidar-cli --save-dev

• concurrently: a package that lets us set up the ability to run multiple commands at once. This is helpful since we'll need to watch both the styles and React app itself.
• chokidar-cli: let's us watch files and run a command when changed. We'll use this to watch our CSS file and run the build process of the CSS on cahnge

Next, let's configure postcss, so create a new file in the root of your project called postcss.config.js and include the following:

// Inside postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

This will add the Tailwindcss and Autoprefixer plugins to our postcss config.

With our configuration, we need to include it as part of the build and watch processes. Inside package.json, add the following to definitions to your scripts property:

"build:css": "tailwind build src/App.css -o src/index.css",
"watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",

Additionally, modify the start and build scripts to now include those commands:

"start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'",
"build": "npm run build:css && react-scripts build",

With our configuration ready to go, let's try our styles back to where they were when we left off from the static example.

Inside the App.css file, replace the entire content with:

@tailwind base;
@tailwind components;
@tailwind utilities;

This is going to import Tailwind's base styles, components, and utility classes that allow Tailwind to work as you would expect it to.

We can also remove the App.css import from our App.js file because it's now getting injected directly into our index.css file. So remove this line:

import './App.css';

Once you're done, you can start back up your development server! If it was already started, make sure to restart it so all of the configuration changes take effect.

And now the page should look exactly like it did in our static example!

React app with content styled

Follow along with the commit!

Step 3: Creating a new button component class with Tailwind

Tailwind doesn't ship with prebaked component classes, but it does make it easy to create them!

We're going to use our button that we already created as an example of creating a new component. We'll create a new class btn as well as a color modifier btn-purple to accomplish this.

The first thing we'll want to do is open up our App.css file where we'll create our new class. Inside that file, let's add:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

If you remember from our HTML, we're already including those same classes to our <button> element. Tailwind let's us "apply" or include the styles that make up these utility classes to another class, in this case, the .btn class.

And now that we're creating that class, let's apply it to our button:

<button className="btn text-white bg-purple-700 hover:bg-purple-800">
  Party with Slurm!
</button>

And if we open up our page, we can see our button still looks the same. If we inspect the element, we can see our new .btn class generated with those styles.

.btn class in a React app with Tailwind

Next, let's create a color modifier. Similar to what we just did, we're going to add the following rules:

.btn-purple {
  @apply bg-purple-700 text-white;
}

.btn-purple:hover {
  @apply bg-purple-800;
}

Here, we're adding our background color and our text color to our button class. We're also applying a darker button color when someone hovers over the button.

We'll also want to update our HTML button to include our new class and remove the ones we just applied:

<button className="btn btn-purple">
  Party with Slurm!
</button>

And with that change, we can still see that nothing has changed and we have our new button class!

Styled button in React with Tailwind

Follow along with the commit!

Applying these concepts to more components

Through this walkthrough, we learned how to create a new component class using the Tailwind apply directive. This allowed us to create reusable classes that represent a component like a button.

We can apply this to any number of components in our design system. For instance, if we wanted to always show our lists the way we set them up here, we could create a .list-ul class that represented an unordered list with the Tailwind utilities list-disc list-inside my-5 pl-2 applied.

What tips and tricks do you like to use with Tailwind?

Share with me on Twitter!

Bootstrap is a very popular CSS framework that's widely used. Check out this article for a more in-depth guide.

Semantic UI

Semantic UI is one of the most popular CSS framework for developing responsive, mobile first projects for the web.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Semantic UI library. We have used a CDN in this example, but you can checkout other ways of installing Semantic UI here.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Semantic UI Template</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.css">
      </head>
      <body>
        <h1>Hello World</h1>
        <!-- Add all HTML Code here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.js"></script>
      </body>
    </html>

Learning Resources

• The official documentation for Semantic UI is available here.
• Checkout Semantic UI’s open source GitHub repository here.

Skeleton

Skeleton is a dead simple boilerplate to kickstart any responsive project.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS for the Skeleton library.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Skeleton Template</title>
        <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
      </head>
      <body>
        <h1>Hello World</h1>
        <!-- Add all HTML Code here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      </body>
    </html>

JSBin Demo

We have used a CDN in this example, but you can checkout other ways of installing Skeleton here.

Learning Resources

Official Documentation of Skeleton.

• Checkout Skeleton’s open source GitHub repository here.
• Here are some examples of how Skeleton was used on different websites.

Materialize

Materialize is a Responsive CSS framework based on Google’s Material Design Language.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Materialize library.

    <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <h1>Hello World!</h1>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    </body>
  </html>

We have used a CDN in this example, but you can checkout other ways of installing Materialize here.

Learning Resources

• The official documentation for Materialize is available here.
• Checkout Materialize’s open source GitHub repository here.
• Here is a handy tutorial on using Materialize.

UIKit

UIKit is A lightweight and modular front-end framework for developing fast and powerful web interfaces.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS for the UIKit library.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="js/uikit-icons.min.js"></script>
    </head>
    <body>
    </body>
</html>

We have used a CDN in this example, but you can checkout other ways of installing UIKit here.

Learning Resources

• The official documentation for UIKit is available here.
• Checkout UIKit’s open source GitHub repository here.

Foundation

Foundation is an open-source, mobile first CSS framework created by Zurb.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Foundation library.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Foundation Template</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
      </head>
      <body>
        <h1>Hello World</h1>
        <!-- Add all HTML Code here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
      </body>
    </html>

This example makes use of a CDN that loads the default settings. If you’d like to customize the grid layout, change the colors or add and remove components you can do so on the Foundation download page.

Learning Resources

1. Foundation Documentation
2. List of Foundation Tutorials
3. Foundation Source Files on GitHub
4. DevTips YouTube Series on Foundation Grid

Other info on CSS frameworks:

• Bulma
• Bootstrap
• Best bootstrap examples