Glossier Frontend Style Guide

Last updated 5 months ago

Glossier Frontend Style Guide

This serves as a guide for frontend developers. It is based on Medium's CSS style guide and Airbnb's Javascript style guide.

SASS

General Guidelines

  • Don't. Nest. Ever. Nesting makes it hard to tell at a glance where CSS selector optimizations can be made. Avoid nesting whenever possible. Limit SASS to variables and mixins.

  • Follow The Boy Scout Rule of coding: always leave the code cleaner than you found it. We created this Style Guide so our frontend will have consistency. Going forward we will use this guide, but old files written do not follow these rules. Clean up code whenever you can. For example, $b-gut- related variables were intended for a home grown grid system that we no longer use. Get rid of these variables whenever you see them.

  • Loosely follow the declaration order guide (http://codeguide.co/#css-declaration-order)

File Structure

  • Prefer components over page level styles to make frontend feel like library code - break files like profile.sass into smaller more focused files like button.sass, dialog.sass, tooltip.sass, etc.

Namespacing

  • Namespacing should be at a descriptive, functional, and component level (never at a page level) ex. Use variables like .nav, .nav-bar, .nav-list not .nav, .home-nav, .profile-nav

  • Classes and IDs should be lowercase with words separated by a dash ex. .user-profile not .userProfile

  • Use px for scaffolding, use rem for fonts

Spacing

  • CSS rules should be comma separated but live on new lines

  • CSS blocks should be separated by a single line - not zero, not two

Examples: .content, .content-edit {    ... } .content {   ... } .content-edit {   ... }

Z-Index Scale Our z-index scale is on a 1-10 scale. This allows us to determine relative layers of our application at a glance and prevents bugs. Try and use the smallest variable possible. For example, use $z-index-3 instead of $z-index-10. This scale should not be edited. Only add in the application.

$z-index-1: 100 $z-index-2: 200 $z-index-3: 300 $z-index-4: 400 $z-index-5: 500 $z-index-6: 600 $z-index-7: 700 $z-index-8: 800 $z-index-9: 900 $z-index-10: 1000

Color Scale Below are the colors we use in the application. Whenever possible, please use one of these variables. Avoid adding new shades/variables to the scale if possible.

Black and white: $black: #000 $white: #fff

Neutrals: $cream: #fAf9f7 $tan: #f9f7f1 $sand: #f2f2ee $beige: #f4eae3 $clay: #e7e1da

Reds, pinks, orange, purple: $red: #f23e2c $crimson: #ad1d40 $blush: #f2e5e4 $glossier-pink: #f5e3e7 $dark-slate-purple: #4a4f7a $orange: #e3683e

Blues and greens: $azure: #f3f6f6 $light-cyan: #e0f2ed $seafoam: #bfe4dc $fresh-air: #b2d6e6 $light-blue: #99d1e8 $dodger-blue: #5897fb $blue: #0000ff $facebook-blue: #3c5a96 $google-red: #d34836 $navy-green: #065b58

Greys: $slate: #e5e5e5 $grey: #d9d9d9 $silver: #aaa $dark-grey: #333

Line Height

  • Use unit-less line heights. It can be any number, including a decimal-based one.

  • Unit-less line heights are recommended because the child elements will inherit the raw number value, rather than the computed value. Child elements can compute their line heights based on the font size, rather than inheriting an arbitrary value from a parent, which is more likely to be overwritten.

JAVASCRIPT

https://github.com/airbnb/javascript/tree/es5-deprecated/es5.

  • Moving towards ES 6

  • Remove jQuery (if possible)

    • Leave comment as to why we're keeping/using jQuery if we absolutely need to use it

Frameworks

  • Moving towards React and vanilla js, no longer using Angular (for new features)

Comments

  • Remove comments

  • Let the code do the talking

Services

  • Services should not manipulate the data. They should only retrieve and return data.

  • Name your functions using CRUDS. Save should be used in cases where create and update can be executed in 1 function.

    • Create

    • Read

    • Update

    • Delete

    • Save

Functions

  • Functions should not know "too much" about the data. We should pass in parameters instead.

INCORRECT:

ctrl.example = function() {
if (ctrl.data) {
return true;
}
}

CORRECT:

ctrl.example = function(data) {
if (data) {
return true;
}
}

Modals

  • Avoid using glo-modal

  • Refer to /global/banner/index.js instead

Newsletter

  • Avoid using glo-newsletter

  • Using the rails form to talk to klaviyo

Testing

ERB

  • Moving away from slim. Please use erb instead.