Step-by-Step Tutorials

Learn Startr.Style through practical, hands-on tutorials. Each tutorial builds upon the previous ones, taking you from basic utility usage to advanced design patterns.

Tutorial 1: Your First Startr.Style Component

What you'll learn:

How to apply basic utilities using CSS variables
Understanding the style attribute approach
Creating your first styled element

Step 1: Basic Setup

First, ensure you have Startr.Style included in your HTML document:

<link rel="stylesheet" href="https://unpkg.com/Startr/Style@latest/dist/style.min.css">

Step 2: Create a Simple Button

Let's start with a basic button. Instead of using classes, we'll use CSS variables in the style attribute:

<button style="--bg: #007bff; --c: white; --p: 1rem 2rem; --br: 4px; --border: none;">
  Click Me
</button>

Live Example:

Step 3: Understanding the Utilities

Each CSS variable corresponds to a CSS property:

Utility	CSS Property	Example
`--bg`	background	`--bg: #007bff`
`--c`	color	`--c: white`
`--p`	padding	`--p: 1rem 2rem`
`--br`	border-radius	`--br: 4px`

🎉 Congratulations!

You've created your first Startr.Style component! Try changing the values to see how it affects the appearance.

Tutorial 2: Building a Responsive Card Layout

What you'll learn:

Creating responsive grid layouts
Using breakpoint-specific utilities
Building card components

Step 1: Create the Container

<div style="--d: grid; --grid-template-columns: 1fr; --grid-template-columns-md: repeat(2, 1fr); --grid-template-columns-lg: repeat(3, 1fr); --gap: 2rem; --p: 2rem;">
  <!-- Cards will go here -->
</div>

Step 2: Create Individual Cards

<div style="--bg: white; --p: 1.5rem; --br: 8px; --shadow: 0 2px 8px rgba(0,0,0,0.1); --transition: all 0.3s ease;">
  <h3 style="--fs: 1.25rem; --fw: 600; --mb: 1rem;">Card Title</h3>
  <p style="--c: #666; --lh: 1.6; --mb: 1.5rem;">Card content goes here. This is a sample description.</p>
  <button style="--bg: #007bff; --c: white; --p: 0.5rem 1rem; --br: 4px; --border: none; --cursor: pointer;">
    Learn More
  </button>
</div>

Live Example:

Card One

This is the first card in our responsive grid layout.

Card Two

This is the second card showing responsive behavior.

Step 3: Understanding Responsive Utilities

Startr.Style uses breakpoint suffixes to apply different styles at different screen sizes:

-sm: Small screens (576px and up)
-md: Medium screens (768px and up)
-lg: Large screens (992px and up)
-xl: Extra large screens (1200px and up)

Tutorial 3: Creating Interactive Buttons

What you'll learn:

Creating hover effects with CSS variables
Building different button variants
Adding transitions and animations

Step 1: Basic Button with Hover

<button style="--bg: #007bff; --bg-hvr: #0056b3; --c: white; --p: 0.75rem 1.5rem; --br: 4px; --border: none; --cursor: pointer; --transition: all 0.3s ease;">
  Hover Me
</button>

Step 2: Button Variants

Primary Button:

Secondary Button:

Success Button:

Ready for More?

Continue with more advanced tutorials or explore the utility reference for complete documentation.

View Utility Reference