Creating Global Styles for your Web App

#css #sass #styles #angular

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";

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;
}

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)
}

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);
}

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;
}

And for margins:



// _layouts.scss

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

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

.layout-gap-lg {
  margin-bottom: 6rem;
}

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;
...

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;
}

...

Forms

This file is used when styling common form elements.



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

.form-label {
  /* styles */
}

.form-input {
  /* styles */ 
}

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 */
}

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 👋