css
Table of Content

CSS Framework Overview

A CSS framework is a pre-prepared library of CSS files and sometimes JavaScript files that provide a foundation for designing and styling websites or web applications. They are designed to make web development faster and more efficient by providing a set of pre-defined styles, layouts, and UI components.

Sample code: https://github.com/robertluwang/hands-on-javascript

Bootstrap: Bootstrap is one of the most popular CSS frameworks in existence. It offers a wide range of features that make frontend development more productive and enjoyable. Bootstrap is fully-featured, customizable, and easy to learn.

https://getbootstrap.com/

Tailwind CSS: Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that can be used to style HTML elements. It’s highly customizable and can be used to create complex layouts with ease.

https://tailwindcss.com/

Bulma: Bulma is a modern CSS framework that’s known for its simplicity and ease of use. It’s built on Flexbox and provides a wide range of pre-built components that can be used to create beautiful layouts quickly.

https://bulma.io/

Foundation: Foundation is a responsive front-end framework that provides a wide range of features for building complex layouts. It’s highly customizable and provides a set of pre-built components that can be used to create beautiful interfaces quickly.

https://get.foundation/

UIkit: UIkit is a lightweight and modular front-end framework that provides a wide range of features for building responsive interfaces. It’s highly customizable and provides a set of pre-built components that can be used to create beautiful layouts quickly.

https://getuikit.com/

Bootstrap

Bootstrap is a popular CSS framework that simplifies web development by providing a collection of pre-designed styles, layout components, and responsive utilities. Here’s a quick summary along with a sample code snippet:

Summary:

  • Bootstrap is known for its responsive grid system, making it easy to create layouts that adapt to various screen sizes.
  • It offers a wide range of ready-made UI components like buttons, navigation bars, modals, and more.
  • Bootstrap includes a comprehensive set of CSS classes that can be used to style elements quickly.
  • JavaScript components are also available for interactive features like dropdowns, carousels, and tooltips.

Sample Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Sample</title>
    <!-- Include Bootstrap CSS and JS from a CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">My Website</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <h1>Welcome to My Website</h1>
        <p>This is a sample page created using Bootstrap.</p>
        <button class="btn btn-primary">Learn More</button>
    </div>

    <!-- Include Bootstrap JS (jQuery and Popper.js are required for some features) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

Tailwind

Tailwind CSS is a utility-first CSS framework that streamlines web development by offering a set of utility classes for styling HTML elements.

Summary:

  • Tailwind CSS provides a wide range of utility classes that allow you to style elements directly in your HTML markup.
  • It follows a "utility-first" approach, enabling rapid prototyping and design iteration.
  • Tailwind CSS is highly customizable, allowing you to generate a tailored set of utility classes to match your project’s design requirements.
  • It encourages the creation of responsive and maintainable designs through its utility class system.

Sample Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Sample</title>
    <!-- Include Tailwind CSS from a CDN -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <nav class="bg-blue-500 p-4">
        <div class="container mx-auto">
            <a href="#" class="text-white font-bold text-xl">My Website</a>
        </div>
    </nav>

    <div class="container mx-auto mt-8 p-4">
        <h1 class="text-3xl font-bold text-gray-800">Welcome to My Website</h1>
        <p class="text-gray-600 mt-2">This is a sample page created using Tailwind CSS.</p>
        <a href="#" class="bg-blue-500 text-white font-bold px-4 py-2 mt-4 inline-block rounded hover:bg-blue-700">Learn More</a>
    </div>
</body>
</html>

Bulma

Bulma is a lightweight and modern CSS framework known for its simplicity and flexibility in web development.

Summary:

  • Bulma is built on Flexbox, making it easy to create responsive and flexible layouts.
  • It provides a clean and minimalist design aesthetic, making it a great choice for modern and visually appealing websites.
  • Bulma offers a set of CSS classes that you can use to style elements and create UI components.
  • It doesn’t rely on JavaScript, which can make it faster and lighter compared to some other frameworks.

Sample Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bulma Sample</title>
    <!-- Include Bulma CSS from a CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
    <section class="hero is-primary">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">
                    Welcome to My Website
                </h1>
                <h2 class="subtitle">
                    This is a sample page created using Bulma.
                </h2>
                <a href="#" class="button is-info">Learn More</a>
            </div>
        </div>
    </section>

    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column">
                    <h3 class="title is-3">Feature 1</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <div class="column">
                    <h3 class="title is-3">Feature 2</h3>
                    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="column">
                    <h3 class="title is-3">Feature 3</h3>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Foundation

Foundation is a flexible CSS framework that simplifies web development by providing a responsive grid system and a wide range of UI components.

Summary:

  • Foundation follows a mobile-first approach, ensuring that your designs are responsive by default.
  • It offers a responsive grid system that allows you to create layouts that adapt to various screen sizes.
  • Foundation provides a variety of pre-designed UI components, including navigation menus, buttons, forms, and more.
  • The framework is highly customizable and can be tailored to suit your project’s needs.

Sample Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Sample</title>
    <!-- Include Foundation CSS and JavaScript from a CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css">
</head>
<body>
    <header>
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">My Website</a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
            </ul>
            <section class="top-bar-section">
                <ul class="right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </section>
        </nav>
    </header>

    <div class="row">
        <div class="large-12 columns">
            <h1>Welcome to My Website</h1>
            <p>This is a sample page created using Foundation.</p>
            <a href="#" class="button">Learn More</a>
        </div>
    </div>

    <!-- Include Foundation JS and jQuery from a CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"></script>
    <script>
        // Initialize Foundation JavaScript components
        $(document).foundation();
    </script>
</body>
</html>

UIKit

UIKit is a lightweight and modular CSS framework that provides a range of components and styles for web interfaces.

Summary:

  • UIKit offers a modular approach to web development, allowing you to pick and choose components as needed.
  • It provides a collection of UI components, including navigation bars, buttons, modals, and more.
  • UIKit follows a clean and minimalist design philosophy.
  • It is known for its simplicity and ease of use.

Sample Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UIKit Sample</title>
    <!-- Include UIKit CSS from a CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.28/dist/css/uikit.min.css">
</head>
<body>
    <nav class="uk-navbar-container uk-navbar">
        <div class="uk-navbar-left">
            <a class="uk-navbar-item uk-logo" href="#">My Website</a>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

    <div class="uk-container uk-margin-top">
        <h1 class="uk-heading-medium">Welcome to My Website</h1>
        <p>This is a sample page created using UIKit.</p>
        <a class="uk-button uk-button-primary" href="#">Learn More</a>
    </div>

    <!-- Include UIKit JavaScript (jQuery is required) from a CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.28/dist/js/uikit.min.js"></script>
</body>
</html>

Conclusion

Each of these CSS frameworks has its own set of features, design philosophies, and communities, making them suitable for different project requirements and developer preferences. Choosing the right framework depends on your project’s needs, your design preferences, and your familiarity with the framework.

Ultimately, CSS frameworks and libraries are valuable tools that can significantly speed up the development process, enhance the design consistency, and ensure responsiveness across various devices, allowing web developers to create visually stunning and functional websites with ease.