DEV Community

Cover image for Creating Global Styles for your Web App
Mirza Leka
Mirza Leka

Posted on

Creating Global Styles for your Web App

This article will teach you how to set global styles for colors, fonts, layouts, buttons, and forms without using the CSS frameworks. I'll use SCSS in the Angular project, but feel free to use any tech that suits your project.

Global Styles

I like to sort styles by category:

  • Base
  • Layouts
  • Colors
  • Typography
  • Forms
  • Buttons

There is also a Styles.scss file where all others are imported.

// styles.scss
@import "./assets/styles/_base";
@import "./assets/styles/_layouts";
@import "./assets/styles/_colors";
@import "./assets/styles/_typography";
@import "./assets/styles/_forms";
@import "./assets/styles/_buttons";
Enter fullscreen mode Exit fullscreen mode

Colors

Let's start with colors.
Create and define all colors within the :root to be globally used anywhere on the page.

// _colors.scss
:root {
 /* CSS variables */
  --primary-theme-color: green;
  --primary-theme-color-dark: darkgreen;
  --primary-theme-color-light: lightgreen;

  --secondary-theme-color: white;
  --secondary-theme-color-dark: darkgray;
  --secondary-theme-color-light: lightgray;

  --primary-white-color: white;
  --primary-black-color: black;
  --primary-error-color: red;
}
Enter fullscreen mode Exit fullscreen mode

Then, classes that make these colors easily accessible for later uses:

// _colors.scss
  .primary-background {
    background: var(--primary-theme-color);
  }
  .primary-background-dark {
    background: var(--primary-theme-color-dark);
  }
  .primary-background-disabled {
    background: var(--primary-theme-color-light);
  }

  .secondary-background {
    background: var(--secondary-theme-color);
  }
  .secondary-background-dark {
    background: var(--secondary-theme-color-dark);
  }
  .secondary-background-disabled {
    background: var(--secondary-theme-color-light);
  }

.heading-primary {
  color: var(--primary-black-color)
}

.error-primary {
  color: var(--primary-error-color)
}
Enter fullscreen mode Exit fullscreen mode

color-palettes

Base Styles

This is where you define styles related to HTML & Body tags, like app background, overflow or default margins.

// _base.scss
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: "Your font";
  background-color: var(--secondary-theme-color);
}

div {
  color: var(--primary-black-color);
}
Enter fullscreen mode Exit fullscreen mode

Layout Styles

This is where you define set margins and padding used across the app.

For padding around content:

// _layouts.scss
.layout-sm {
  padding: 1rem;
}

.layout-md {
  padding: 1.5rem;
}

.layout-lg {
  padding: 2rem;
}

.layout-xl {
  padding: 4rem;
}

.layout-all-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

And for margins:

// _layouts.scss

.layout-gap-sm {
  margin-bottom: 2rem;
}

.layout-gap-md {
  margin-bottom: 4rem;
}

.layout-gap-lg {
  margin-bottom: 6rem;
}
Enter fullscreen mode Exit fullscreen mode

layouts-preview

Typography

This is where you set font sizes and thickness.

// _typography.scss

/* font-weight */
$font-weight-light: 300;
$font-weight-semi-bold: 500;
$font-weight-bold: 600;

/* font-size */
$heading-title-size: 3rem;
$heading-subtitle-size: 2rem;
$heading-caption-size: 1.5rem;
$heading-default-size: 1.2rem;
...
Enter fullscreen mode Exit fullscreen mode

To make fonts easily accessible through the app, define classes that wrap font styles.

// _typography.scss

.heading-title {
  font-size: $heading-title-size;
  font-weight: $font-weight-bold;
  margin: 0.5rem;
}

.heading-subtitle {
  font-size: $heading-subtitle-size;
  font-weight: $font-weight-light;
  margin: 0.5rem;
}

.heading-subtitle-bold {
  font-size: $heading-subtitle-size;
  font-weight: $font-weight-bold;
  margin: 0.5rem;
}

.heading-subtitle-semi-bold {
  font-size: $heading-subtitle-size;
  font-weight: $font-weight-semi-bold;
  margin: 0.5rem;
}

...
Enter fullscreen mode Exit fullscreen mode

use-of-typography

Forms

This file is used when styling common form elements.

// _forms.scss
.form-group {
  /* styles */
}

.form-label {
  /* styles */
}

.form-input {
  /* styles */ 
}
Enter fullscreen mode Exit fullscreen mode

forms-preivew

Buttons

Finally, the stylekit for buttons.

// _buttons.scss
.default-button-styles {
  height: ...
  box-sizing: border-box;
  border-radius: ...;
  padding: ...;

}

.button-primary {
  //Other classes inherit the default
  @extend .default-button-styles;
  background: var(--primary-theme-color);
  color: var(--primary-white-color);
  cursor: pointer;
  /* styles */

  &:hover {
      /* styles */
  }
}

.button-primary-disabled {
  @extend .default-button-styles;
  cursor: default;
  background: var(--primary-theme-color-light);
  color: var(--primary-white-color);
  /* styles */
}

.button-secondary {
  @extend .default-button-styles;
  background: var(--secondary-theme-color);
  color: var(--primary-black-color);
  /* styles */
}
Enter fullscreen mode Exit fullscreen mode

buttons-preview

Wrapping up

Building an app from scratch is a difficult process. That's why creating a proper style kit from the get-go and following the guidelines is important. It's a big first step, but it will surely make things easier in further development.

That's all I have for today. Don't forget to hit the follow button. Also, follow me on Twitter to stay up to date with my upcoming content.

Bye for now 👋

Top comments (2)

Collapse
 
jangelodev profile image
João Angelo

Hi Mirza Leka
Your tips are very useful
Thanks for sharing

Collapse
 
mirzaleka profile image
Mirza Leka

Thank you @jangelodev !