CSS RWD Frameworks

Previous
Quiz
Next

CSS has various frameworks which are specialized in web development. These frameworks such as bootstrap, Tailwind CSS, and various more, have inbuilt classes and packages for commonly used UI components such as navigation bars, menu bars, buttons, image galleries, etc.

In this chapter, we will learn and understand some of the most popular and freely available CSS frameworks for responsive web development.

Responsive Web Designing Frameworks

Here is a list of popular frameworks commonly used for responsive web designing.

Bootstrap Framework

Bootstrap is a widely used open-source front-end framework used for creating responsive, mobile-first websites and web applications. Bootstrap provides a collection of CSS and JavaScript components, such as grids, forms, buttons, and navigation bars. These components can be easily implemented and customized. The common features of the bootstrap framework are mentioned below.

Features For Responsive Design

Here are some of the features of Bootstrap for responsive design.

  • Bootstrap provides a 12-column grid layout, making it easily adaptable to various screen sizes.
  • Bootstrap comes with utility classes. These utility classes help in applying margin, padding, and alignment adjustments for responsiveness.
  • Bootstrap includes responsive navigation, carousels, and models that adapt to screen sizes automatically.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <div class="container-fluid p-5 bg-secondary text-white text-center">
        <h1>Bootstrap Framework</h1>
        <p>Resize the screen to see the effect</p> 
    </div>
    
    <div class="container mt-4">
    <div class="row">
        <div class="col-sm-4">
            <h2>Column 1</h2>
            <p>
                Tutorialspoint - Simple and Easy Learning
            <p>  
                Tutorialspoint - Simple and Easy Learning
            </p>
        </div>

        <div class="col-sm-4">
            <h3>Column 2</h3>
            <p>Tutorialspoint - Simple and Easy Learning</p>
            <p>Tutorialspoint - Simple and Easy Learning</p>
        </div>

        <div class="col-sm-4">
            <h3>Column 3</h3>        
            <p>Tutorialspoint - Simple and Easy Learning</p>
            <p>Tutorialspoint - Simple and Easy Learning</p>
        </div>
    </div>
    </div>
</body>

</html>

Tailwind CSS

Tailwind CSS is a utility-first CSS framework with lots of predefined classes. It has various customization options to design responsive web pages. With tailwind CSS, developers can style elements directly in the HTML. Tailwind supports purging unused CSS, which optimizes load times by removing unnecessary styles.

Features For Responsive Design

Here are some of the features of Tailwind CSS for responsive design.

  • Tailwind's utility classes provide precise control over design elements. It makes it easy to adjust the layout and manage spacing, and alignment based on screen size.
  • Tailwind is designed with a mobile-first approach i.e., developers can apply styles for smaller screens and can build up for larger screens.
  • Tailwind provides support for adding custom breakpoints. It offers flexibility in defining responsive behaviors designed to specific project needs.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body class="bg-gray-100">
    <div class="text-center py-10 bg-purple-600 text-white">
        <h1 class="text-3xl font-bold">Tailwind CSS Framework</h1>
        <p class="text-lg">
            Resize the screen to see responsive behavior
        </p>
    </div>
    
    <div class="container mx-auto mt-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h2 class="text-xl font-semibold">Column 1</h2>
                <p>
                    Tutorialspoint - Simple and Easy Learning
                </p>
            </div>

            <div class="bg-white p-6 rounded-lg shadow-md">
                <h2 class="text-xl font-semibold">Column 2</h2>
                <p>
                    Tutorialspoint - Simple and Easy Learning
                </p>
            </div>

            <div class="bg-white p-6 rounded-lg shadow-md">
                <h2 class="text-xl font-semibold">Column 3</h2>
                <p>
                    Tutorialspoint - Simple and Easy Learning
                </p>
            </div>
        </div>
    </div>
</body>

</html>

Skeleton Framework

Skeleton is a lightweight CSS framework that provides a basic structure for responsive web design. It focuses on simplicity and speed, making it ideal for small projects and quick prototypes.

Features For Responsive Design

  • Skeleton's grid is based on a 12-column structure that adjusts accurately to fit different screen sizes.
  • Skeleton's smaller file size makes it fast-loading and easily customizable.
  • Skeleton includes responsive typography, forms, buttons, and other basic elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1>Skeleton Framework</h1>
        <p>Resize the screen to see responsive layout adjustments</p>
        
        <div class="row">
            <div class="one-third column">
                <h3>Column 1</h3>
                <p>Tutorialspoint - Simple and Easy Learning</p>
            </div>

            <div class="one-third column">
                <h3>Column 2</h3>
                <p>Simple and Easy Learning</p>
            </div>

            <div class="one-third column">
                <h3>Column 3</h3>
                <p>Tutorialspoint - Simple and Easy Learning</p>
            </div>
        </div>
    </div>
</body>

</html>

Semantic UI

Semantic UI is a CSS framework that uses human-friendly HTML for creating responsive and visually appealing layouts. It includes a lot of libraries for themes and components. The common features of semantic UI are mentioned below.

Features For Responsive Design

Here are some of the features of semantic UI for responsive design.

  • Semantic UI includes a flexible grid that adjusts to various screen sizes.
  • It offers various responsive UI components such as buttons, forms, and menus.
  • It uses user-friendly HTML and Simple classes, making it easy to create responsive layouts.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="ui container">
        <h1 class="ui header">Semantic UI Framework</h1>
        <p>Responsive design with Semantic UI</p>
        
        <div class="ui three column grid">
            <div class="column">
                <h3>Column 1</h3>
                <p>Tutorialspoint - Simple and Easy Learning</p>
            </div>
            <div class="column">
                <h3>Column 2</h3>
                <p>Simple and Easy Learning</p>
            </div>
            <div class="column">
                <h3>Column 3</h3>
                <p>Tutorialspoint - Simple and Easy Learning</p>
            </div>
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next
Advertisements