4 Things I've Learned While Creating My Style Stage Stylesheet

Jean Tiston — Fri, 17 Jul 2020 14:15:57 +0000

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.

When should I use percent/vh/vw and fixed pixel sizes?

Jean Tiston — Thu, 02 Jul 2020 10:58:15 +0000

A bit of a background on why I am asking this. So I was doing a frontend coding challenge at Frontend Mentor that is a Testimonial Page Slider. So mainly it has a portrait image and a testimonial quote.

Besides using breakpoints, I tried to make my design more responsive by using percent/vh/vw in some of the sizes. One example of that is for the size of the main image:

.photo {
    width: 70vw;
    height: auto;
    border-radius: 10px;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.3);
}

and the slider arrow navigation which is supposed to be positioned at the bottom part of the image:

.nav {
    display: float;
    position: absolute;
    left: 40%;
    top: 85%;
    padding: 13px 10px;
    background-color: white;
    border-radius: 50px;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.3);
    cursor: pointer;

}

But as one of the feedback I have gotten pointed out, the text and image proportion is not very good when it gets at 460px to 600px. The slider arrow navigation also gets displaced at some point.

She suggested that I just use a fixed size for the image and I think that's true in this case.

So back to the question: **when do I know that it's better to use percent/vw/vh in my design and when to use fixed pixel sizes?

Can I also use percent/vh/vw for font sizes? And if yes, does it make sense to do so? And when, if ever, should I do that?**

If you want to scrutinize the page further here is the live site. If you want to see the code you can probably just inspect the page but in case you want the repo here it is.

I'm quite new with this frontend thing and so I'd really appreciate if you'd point me to a few resources I can refer to when I have these kind of questions.

Forem: Jean Tiston