I'm relatively new to frontend web development and while courses are wonderful wells of knowledge in learning web dev, nothing beats hands-on practice in sharpening your skills. When I saw Stephanie Eckles' Call for Contribution for Style Stage last July 6 I immediately sent her a message to say that I'm interested to contribute even if I wasn't sure if I'm gonna make it on time for the launch deadline. (Spoiler alert: I did make it)

Style Stage

Style Stage is a modern CSS showcase styled by community contributors. Basically, anybody can submit a CSS stylesheet for the site. You'll have access to the semantic HTML but you can't change it and you'll also have to abide by the guidelines in the site which includes responsive design and accessibility.

It was fun and a bit challenging to create a stylesheet when you can't change the HTML. Here are the 4 things I learned during the process:

1. CSS Variables

I've known CSS variables before but it's one of those things that I've never really used. But when I saw how organized the sample Style Stage stylesheet was because of CSS variables I decided to give it a go.

I used it to declare variables for my color palette, font, and border style. You declare a CSS variable with a double dash (--) and it's usually declared at the root so you'll have access to it throughout the stylesheet.

:root {
  --aquamarine: #4dbda7;
  --light-gray: #d9d9d9;
  --black: #2d2721;
  --font-primary: "Bungee Shade", serif;
  --font-secondary: "Montserrat", sans-serif;
  --font-weight-strong: 700;
  --font-size-h1: 6rem;
  --font-size-h2: 3rem;
  --font-size-text: 1.15rem;
  --border-radius: 8px; 

}

And this is how you use it.

body {
    background-color: var(--light-gray);
    color: var(--black);
    font-family: var(--font-secondary); 
    }

No more memorizing hex codes for colors.

2. CSS Selector Combinators

Of course, we all know the basic selectors like:

.class {}
#id {}
element {}

When you have control over the HTML, it's so easy to throw in an extra wrapper div and add an id or class to control the style. In Style Stage, you can't edit the HTML since all contributions are using the same one.

Even if the HTML for Style Stage has been semantically written and IDs and classes were added on key parts to help with styling, you might need to use CSS combinators to target specific elements.

For example:

section.container {   //selects section with class="container"
        grid-template-columns: 1fr 1fr 1fr;
    }

    section > * {   //selects all children of section
        grid-column: 2 / -1;
    }

    section p {   //selects all <p> inside <section> elements
        text-align: left;
        padding: 0 60px;
    }

3. Clamp

This has been a question of mine since I started: How can I make font sizes responsive?

I thought I can use viewport relative sizes like vh/vw. You technically can but it doesn't really resize very well in certain dimensions. And then I found clamp() and it is the perfect solution!

h1 {
    font-size: var(7rem);
    font-size: clamp(2rem, 7vw, 7rem); 
}

//clamp(MIN, VAL, MAX)

The first value is the minimum. The val at the middle should always be a relative size. And the last one is the maximum size.

Note that clamp is not yet supported in some browsers so make sure to consider that when using it and have a fallback.

4. Embed Fonts in CSS

I always embed fonts in my HTML file so before this I didn't know I can do it in CSS.

There are two ways you can do it: First is using @font-face. You have to generate and host your own webfont to do this. I tried it but I scrapped it when it was time to upload it in GitHub. For some reason, when I was trying to replace the path with an absolute URL of the font, it was not working. I probably did not use the raw URL.

@font-face {
  font-family: 'bungee_shaderegular';
  src: url('bungeeshade-regular-webfont.woff2') format('woff2'),
       url('bungeeshade-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

The easier method and what I should have done in the first place is to use @import which is readily available in Google Fonts.

@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Montserrat&display=swap');

In Summary

Overall, it's an excellent experience immersing myself in modern CSS through this project. Style Stage has been launched last July 10, 2020. The one day I spent hacking the stylesheet was well-spent cause I became one of the first six contributors.

Whether you're a newbie who is still learning the ropes or an expert who wants to show off your CSS skills or anyone in between, definitely consider contributing to Style Stage.

Retroish

Check out Style Stage dressed in the simple responsive style I've made called Retroish.