Lesson 3 - CSS Review

Styling UI with CSS Framework

What is Bootstrap?

Front-end Framework: Bootstrap is a popular and open-source CSS framework that provides pre-built HTML, CSS, and JavaScript components for building responsive and mobile-first web applications.
Key Features:
- Grid System: A flexible and responsive grid system for creating layouts that adapt to different screen sizes.
- Pre-built Components: A wide range of pre-styled components like buttons, forms, navigation bars, alerts, carousels, and more.
- Utilities: A collection of utility classes for quickly applying styles like margins, padding, colors, and text styles.
- JavaScript Plugins: Includes JavaScript plugins for interactive components like modals, tooltips, popovers, and more.
- Responsive Design: Designed with mobile-first principles in mind, Bootstrap components adapt seamlessly to various screen sizes.

Installing and Using Bootstrap in Vite

Step 1: Install Bootstrap

npm install bootstrap
//or
yarn add bootstrap

Step 2: Include Bootstrap CSS and JavaScript in Vite

In the main.jsx file, import Bootstrap's CSS:

//main.jsx
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Bootstrap's JavaScript is bundled with Vite automatically.

Use Cases of Bootstrap Components

Div Example:

<div className="container">
  <h1>Hello Bootstrap</h1>
</div>

Paragraph Example:

<p className="text-muted">This is a muted paragraph.</p>

Anchor Example:

<a href="#" className="btn btn-primary">Click Me</a>

Image Example:

<img src="https://via.placeholder.com/150" className="img-thumbnail" alt="Example" />

Input Example:

<input type="text" className="form-control" placeholder="Enter text" />

Button Example:

<button className="btn btn-success">Submit</button>

Form Example:

<form>
  <div className="mb-3">
    <label htmlFor="exampleInputEmail1" className="form-label">Email address</label>
    <input type="email" className="form-control" id="exampleInputEmail1" />
  </div>
  <button type="submit" className="btn btn-primary">Submit</button>
</form>

Navbar Example:

<nav className="navbar navbar-expand-lg navbar-light bg-light">
  <div className="container-fluid">
    <a className="navbar-brand" href="#">Navbar</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarNav">
      <ul className="navbar-nav">
        <li className="nav-item">
          <a className="nav-link active" href="#">Home</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Benefits of Using Bootstrap

Faster Development: Bootstrap provides pre-built components and a robust grid system, accelerating the development process.
Responsive Design: Ensures your website looks good on all devices.
Cross-browser Compatibility: Tested and works across major browsers.
Large Community: A large and active community provides support, resources, and extensions.

In Summary

Bootstrap is a powerful tool for front-end developers. By leveraging its pre-built components, grid system, and customization options, you can quickly and efficiently create visually appealing and responsive web UIs.

Tailwind CSS with Vite

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to create modern and responsive designs efficiently. Instead of pre-designed components, Tailwind provides low-level utility classes that enable custom styling while maintaining consistency and scalability.

Why Use Tailwind CSS?

Utility-First Approach: Allows for rapid UI development.
Customizability: Tailwind is highly configurable and can be customized to fit project needs.
Performance: Generates only the necessary CSS, making applications faster.
Responsive Design: Includes responsive utilities to design mobile-friendly interfaces.

Step-by-Step Installation Guide for Tailwind CSS in a Vite React App

Step 1: Create a Vite + React Project

Before installing Tailwind CSS, you need to have a Vite React project. If you don’t have one, create it using the following command:

npm create vite@latest tailwind-css-app -- --template react

Navigate into your project directory:

cd tailwind-css-app

Install dependencies:

npm install

Step 2: Install Tailwind CSS and Dependencies

Initialize the Tailwind configuration files:

Install Tailwind CSS Vite plugin along with its necessary dependencies, run the following command:

npm install --save-dev @tailwindcss/vite

vite.config.js : Modify your vite.config.js file to include the Tailwind CSS Vite plugin:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Verify Tailwind CSS installation: Make sure you've also installed Tailwind CSS itself and generated the configuration files:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

This command will install the following:

The Tailwind CSS framework
Post CSS, which provides plugins to perform different functionalities like prefixes in Vanilla CSS
Autoprefixer, which is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules

Generate the Configuration Files

// Some code
npx tailwindcss init -p

This command generates tailwind.config.cjs andpostcss.config.cjs configuration files, also known as config files. They help you interact with your project and customize everything.

Step 3: Configure Tailwind to Purge Unused Styles

Modify tailwind.config.js to specify the paths to all template files:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

This configuration ensures Tailwind CSS removes unused styles in production, making the CSS file smaller and more optimized.

Step 4: Add Tailwind CSS to Your Stylesheet

In your src folder, locate index.css (or create one if missing) and include the Tailwind directives at top:


/* src/styles.css */
@import "tailwindcss";

These directives import Tailwind's base styles, components, and utility classes.

These three lines act as directives that tell Tailwind to inject its different style layers into your CSS, enabling you to use its pre-defined styles and utility classes throughout your project. They must be present in your main CSS file (usually index.css) for Tailwind to function.

Step 5: Use Tailwind CSS in Your React Components

Now, you can start using Tailwind classes directly in your React components. For example, modify App.jsx:

function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-500">Hello, Tailwind CSS with Vite!</h1>
      <p className="mt-4 text-lg text-gray-700">This is styled using Tailwind in a Vite React app.</p>
      <button className="mt-6 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-700">Click Me</button>
    </div>
  );
}

export default App;

Challenge:

CHALLENGE: Style the menu to look like the mockup
        - Position and place the menu in the center of the viewport using Flexbox
        - Using Flexbox, center-align and space the menu contents
        - Display and space the 3 price-points side by side
        - Display and space the Extras side by side, wrapping if needed. 
        - Size the titles

// App.jsx - updated
import './App.css'

function App() {
  

  return (
    <>
      <div className=" items-center justify-center bg-gray-100">
        <h3 className="text-4xl font-bold text-blue-700">
          Hello, Tailwind CSS with Vite!
        </h3>
        <p className="mt-4 text-lg text-orange-700">
          This is styled using Tailwind in a Vite React app.
        </p>
        <button className="mt-6 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-700">
          Click Me
        </button>
      </div>
           <main className="w-1/2 bg-green-900 text-white font-mono p-12 flex flex-col items-center justify-center gap-6 mx-auto">
            
            <h1 className="text-4xl font-bold">Coffee</h1>
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M160-120v-80h640v80H160Zm160-160q-66 0-113-47t-47-113v-400h640q33 0 56.5 23.5T880-760v120q0 33-23.5 56.5T800-560h-80v120q0 66-47 113t-113 47H320Zm0-80h240q33 0 56.5-23.5T640-440v-320H240v320q0 33 23.5 56.5T320-360Zm400-280h80v-120h-80v120ZM320-360h-80 400-320Z"/>
            </svg>
            <section>
                <h2 className="text-xl mb-1">Cappuccino</h2>
                <section className="flex gap-8">
                    <p>$3.60 (S)</p>
                    <p>$4.20 (M)</p>
                    <p>$5.00 (L)</p>
                </section>
            </section>
            <section>
                <h2 className="text-xl mb-1">Flat White</h2>
                <section className="flex gap-8">
                    <p>$3.60 (S)</p>
                    <p>$4.20 (M)</p>
                    <p>$5.00 (L)</p>
                </section>
            </section>
            <section>
                <h2 className="text-xl mb-1">Latte</h2>
                <section className="flex gap-8">
                    <p>$3.60 (S)</p>
                    <p>$4.20 (M)</p>
                    <p>$5.00 (L)</p>
                </section>
            </section>
            <section>
                <h2>Extras ($3ea)</h2>
                <section className="flex flex-wrap gap-x-6 justify-center">
                    <p>Cream</p>
                    <p>Wafer</p>
                    <p>Shortbread</p>
                    <p>Marshmellow</p>
                    <p>Chocolate square</p>
                    <p>Cinnamon Stick</p>
                </section>
            </section>
        </main>
    </>
  )
}

export default App

// snippet of App.jsx
<main className="w-1/2 bg-green-900 text-white font-mono p-12 flex flex-col items-center justify-center gap-6 mx-auto">

Explanation:

w-1/2: Sets the width of the <main> element to half of its parent container.
mx-auto: Centers the element horizontally by setting automatic margins on the left and right.
flex, flex-col, items-center, justify-center: These classes ensure that the content inside the <main> element is centered both vertically and horizontally.

This setup will ensure that the <main> element is centered and takes up half the width of its parent container.

References

App.jsxAppGPT-4o⇧⏎ New Line⏎ Send

Step 6: Start the Development Server

To see your Tailwind-styled app in action, run the Vite development server:

npm run dev

This will start your application at http://localhost:5173/ (or another available port).

Comparison and Best Practices:

Tailwind CSS:
- Utility-first framework, customizable, better for fully custom designs.
- Requires adding classes directly to HTML elements.
Bootstrap:
- Component-based, comes with pre-styled components, great for rapid prototyping.
- Ideal when you need a quick layout with minimal custom styling.

Conclusion

You have successfully set up Tailwind CSS in your Vite-powered React application! Now, you can utilize Tailwind’s utility classes to build modern, responsive, and maintainable UIs with ease.

PreviousLesson 2 - HTML Review NextLesson 4 - Modern JavaScript (JSX) Patterns

Last updated 3 months ago