Dashi is easy to customize

Jan 1, 2021 2 min read
Dashi is easy to customize

At the base of the theme style is PostCSS. This makes style customization easier and faster.

The most important aspects of the theme are defined as CSS custom properties which can be modified even without generating theme assests, so you can even customize styling using the Code Injection in Ghost Admin, either to do it Globally or on a post by post basis.

CSS Custom properties

--global-max-width: 1280px;
--global-radius: 2px;
--global-radius-round: 50%;

--color-primary: 	hsl(253,91%,64%);
--color-primary-light: 	hsl(253,91%,67%);
--color-primary-dark: 	hsl(253,91%,61%);

--color-secondary: hsl(20, 92%, 60%);
--color-secondary-light: hsl(20, 92%, 63%);
--color-secondary-dark: hsl(20, 92%, 57%);

/* neutral colors */
--color-black: hsl(0, 0%, 0%);
--color-dark: hsl(0, 0%, 10%);
--color-dark-acc: hsl(0, 0%, 20%); 
--color-grey-darker: hsl(0, 0%, 30%);
--color-grey-dark: hsl(0, 0%, 40%);
--color-grey: hsl(0, 0%, 50%);
--color-grey-light: hsl(0, 0%, 60%);
--color-grey-lighter: hsl(0, 0%, 70%);
--color-light-acc: hsl(0, 0%, 80%);
--color-light: hsl(0, 0%, 90%);
--color-white: hsl(0, 0%, 100%);

/* semantic colors */
--color-error: hsl(348, 97%, 60%);
--color-success: hsl(141, 53%, 53%);
--color-warning: hsl(48, 98%, 67%);
--color-info: hsl(204, 86%, 54%);

/* Other colors */
--color-gold: hsl(51, 100%, 50%);

/* text & background colors */
--color-text: var(--color-dark);
--color-text-acc-1: var(--color-dark-acc);
--color-text-acc-2: var(--color-grey-darker);
--color-text-acc-3: var(--color-grey-dark);
--color-text-reverse: var(--color-light);

--color-bg: hsl(0, 100%, 100%);
--color-bg-body: hsl(219,23%,97%);
--color-bg-acc-1: hsl(0, 0%, 98%);
--color-bg-acc-2: hsl(0, 0%, 96%);
--color-bg-acc-3: hsl(0, 0%, 94%);
--color-bg-reverse: var(--color-dark);

--color-neutral: var(--color-grey);
--color-border: hsl(0, 0%, 95%);
--color-outline: hsl(217, 99%, 65%);

--font-serif: Times, Georgia, serif;
--font-sans: 'Jost', Tahoma, Arial, sans-serif;
--font-mono: 'Lucida Console', Monaco,  monospace;
--font-size-base: 1rem;

--trans-name: ease-in-out;
--trans-duration: 400ms;
--trans-duration-lg: 800ms;
--trans-duration-xl: 1200ms;
--trans-delay: 100ms;
--trans-default: var(--trans-duration) var(--trans-name);

--gap: 1em;
--gap-rem: 1rem;
--gap-xs: calc(var(--gap)*0.25);
--gap-sm: calc(var(--gap)*0.5);
--gap-lg: calc(var(--gap)*2);
--gap-xl: calc(var(--gap)*4);

All these properties are in assets/css/settings/_settings.css

Utility classes

Besides the available custom properties you can take advantage of the utility classes available in order to build new content blocks, and style them according to your need.

Color utilities

color-primary
color-secondary
color-dark
text-acc-1
text-acc-2
text-acc-3
color-light
bg-primary
bg-secondary
bg-acc-1
bg-acc-2
bg-acc-3

Text utilities

Font weight:

fw-100
fw-200
fw-300
fw-400
fw-500
fw-600
fw-700
fw-800
fw-900

Text size:

text-xxs
text-xs
text-sm
text-md
text-lg
text-xl
text-xxl
text-xxxl

Text alignement:

text-left
text-center
text-right

Paddings & Margins

p-xs
p-sm
p
p-lg
p-xl
m-xs
m-sm
m
m-lg
m-xl

For more check out the documentation

Join the conversation

Great! Next, complete checkout for full access to Dashi.
Welcome back! You've successfully signed in.
You've successfully subscribed to Dashi.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info has been updated.
Your billing was not updated.