CSS Setup & Open Props

Scoped Styles in Astro

When you write CSS inside a style tag in an .astro component, those styles are automatically scoped to that component only. Astro achieves this by adding unique data attributes to the HTML elements. This means you can use simple class names without worrying about naming conflicts across different components.

Setting Up Global Styles

Create a file called global.css inside the src/styles/ directory. This file is for styles that apply across the entire website, such as CSS resets, base typography, and root color variables. Import it into your BaseLayout.astro file by adding an import statement in the frontmatter section.

What is Open Props?

Open Props is a library of pre-defined CSS custom properties (variables) created by Adam Argyle from Google. It gives you access to carefully crafted values for colors, spacing, typography, shadows, borders, and animations. Think of it as a pre-built design token system that you can drop into any CSS project.

Installing Open Props

Run the following command in your terminal to add Open Props to your project:

npm install open-props

Then import the styles you need into your global.css file. You can import everything or selectively import just the modules you need, such as sizes, colors, or shadows.

Translating Your Figma Design to CSS

Open your Figma file side by side with VS Code. Click on each element in Figma and inspect its properties in the right panel. Note the padding, margin, font size, color hex codes, and border radius values. Translate each of these values into CSS rules. Where possible, use Open Props variables instead of hardcoded values. For example, use var(--size-3) instead of 16px.

Responsive Design Basics

Use CSS media queries to adjust your layout for smaller screens. Wrap your tablet and mobile adjustments inside @media (max-width: 768px) blocks. Convert multi-column layouts to single columns and reduce font sizes and padding to keep the design comfortable on all devices.