Sashaphoto Gatsby Starter

How to start fresh

To throw away all my styles, simply delete all the .scss files except styles.scss, empty out styles.scss and you're set.

Reasons to not start fresh

These stylesheets are made to simplify your life while maintaining your potential to customize everything.

Auto-pallettes

Setting the base color

Your probably have some colour you want to use as your accent color. Simply set it as $accent in colors.scss and your palette will be built for you.

Generated Colours

Your specified $accent is used to generate a $complement. Both of these colours generate palettes, $accent-palette & $complement-palette

Available tones for a palette are lightest, lighter, light, base, dark, darker, darkest

Your current palettes

Accent
Complement

Using a palette in SCSS

To use the palette defined by your base color, you can use one of the getter functions for a colour, such as base($accent-palette) or darker($accent-palette).

Using a palette in HTML / JSX

Classnames are auto generated for your accent and complement palette as (background || color)-(name of palette)-(tone), for example background-accent-light or color-complement-base

Adding a palette

If you need to go above and beyond the accent and complement, you can add another palette with full functionality by first assigning it to a variable in the same place in colors-autotheme.scss as $accent-palette & $complement-palette (line 232) and then adding the @include for your theme under .color and .background in the same way as it is done for accent and complement.

Customizing base palette

The palette is built by calculating offsets based on a starting "base palette". You can redefine this palette by changing $base-palette (line 58) of colors-autotheme.scss

Different files explained

  • animations.scss defines keyframes and mixins for animated components
  • colors.scss defines all the color variables (including DARK THEME)
  • colors-autotheme.scss contains code for generating palettes
  • cssreset.scss a css reset so that the app looks the same across browsers
  • fonts.scss defines fonts for the app
  • styles.scss the star of the show, our custom styling goes here
Go back to the homepage