CSS Styling Guidelines

CSS styling and implementation standards for the front end oneleif website.

The stack used for styling is Sass which is a CSS preprocessor, can find more information about Sass here.

All of these standards are able to be reevaluated and up for discussion; you can make a proposal by following these steps.

If you have any questions feel free to reach out in the #oneleif-website channel in our discord.

---

Table of Contents

• Mobile First Design
• Design System
  • Typography
  • Breakpoints
• HTML Naming Conventions
  • IDs
• CSS Naming Conventions
  • Class Names

---

Mobile First Design

When it comes to CSS and UX/UI design for the oneleif website we like to practice a Mobile Design First ideology. This means when designing/creating a page for a website we start from the mobile view. This allows us to try and create more responsive websites, dealing with the smaller spacing/amount of room first.

From the developer point of view we use media queries to help ourselves do that. Here you can find out some information on media queries:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

When writing CSS for Mobile First Design you need to have the base CSS be written for a view from 0 to our variable for a small view breakpoint (For us that's 600). Then if you need the view to change for that you will use the min-width: 600px media query to change the styling from 600 and above.

If you have any questions feel free to reach out to the oneleif website dev team in the #oneleif-website channel on discord and check out these great resources about the Mobile-First ideology:

• https://zellwk.com/blog/how-to-write-mobile-first-css/
• https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/

Design System

Typography

The fonts and sizes have already been determined by our design system. We store the variables for our font sizes and styles is stored in the _font.scss file of our repo.

You can find all the info about our Typography here

Breakpoints

Breakpoints are set as min-width. See Mobile First Design for reasoning.

These breakpoints are stored as variables in the _screens.scss file in our react project.

xs - 0 px

• Smaller mobile devices and portrait phones

sm - 600px

• Modern mobile devices

md - 960px

• Mobile landscape & tablet devices

lg - 1280px

• Desktop

xl - 1920px

• High res desktop & TVs

Example:

@include small('up') {
    <css-rule> {
        ...
    }
}

This is an example of a media query using the small breakpoint variable with the min-width constraint. The css-rule would take effect when the width of the screen is at 600px and above.

HTML Naming Conventions

Naming Style of ids

• id should be in camelCase
• Example id="fakeId

Reason: most common convention and will make the id look different from classNames

CSS Naming Conventions

Naming Style of class names

• class name should be in kebab-case
• Example className="fake-idd

Reason: most common convention, able to tab between each word in a CSS file, Also, using hyphens allows you to take advantage of the |= attribute selector, which selects any element containing the text, optionally followed by a dash:

span[class|="em"] { font-style: italic; }