CSS Styling Workshop

This is a React project that will be styled using different CSS approaches. The project contains a basic UI structure that you'll style using various modern CSS techniques.

Project Structure

base-project/
├── src/
│   ├── components/
│   │   ├── Button.tsx    # Button component to style
│   │   ├── PinCard.tsx      # Card component to style
│   │   └── Layout.tsx    # Layout component to style
│   ├── App.tsx          # Main application component
│   └── App.css          # Base styles (to be replaced)

Tasks

You'll be styling this project using different approaches:

1. Vanilla CSS

   • No libraries or frameworks, the point of this is dive deep into the modern state of CSS Some good places to start:
   • Read this on how modern compare with something like SCSS and new features:
     • World of CSS
     • Css Tricks

2. Tailwind CSS

   • Install and configure Tailwind CSS
   • Style components using utility classes
   • Create responsive designs
   • Understand how media queries and pseudo elements work

3. Styled Components

   • Set up styled-components
   • Create styled versions of components
   • Implement theme support

4. CSS Modules (If we have time)

   • Create CSS modules for each component
   • Implement scoped styles
   • Handle component variants

Getting Started

1. Clone this repository
2. Install dependencies:

   pnpm install

3. Start the development server:

   pnpm dev

Development

• The project uses Vite
• TypeScript
• pnpm for package management

Styling Tasks

Each task will involve:

1. Setting up the styling approach
2. Styling the Layout component
3. Styling the Card component
4. Styling the Button component
5. Making the design responsive
6. Adding hover and interactive states

Tips

• Start with mobile-first design
• Use CSS variables for consistent theming
• Consider accessibility in your styles
• Test different screen sizes
• Keep the original component structure intact