Joben is easy to customize

Frank Scott
Frank Scott
Joben 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(249, 79%, 62%);
--color-secondary: hsl(157, 90%, 49%);
--color-black: #000;
--color-dark: #1a1a1a;
--color-dark-acc: #333;
--color-grey-darker: #4d4d4d;
--color-grey-dark: #666;
--color-grey: grey;
--color-grey-light: #999;
--color-grey-lighter: #b3b3b3;
--color-light-acc: #ccc;
--color-light: #e6e6e6;
--color-white: #fff;
--color-purple: #8237eb;
--color-red: #cb1a35;
--color-green: #1ce3ae;
--color-blue: #1ab2ff;
--color-pink: #c5166e;
--color-yellow: #ffbf0f;
--color-royalblue: #1458eb;
--color-orange: #f6764c;
--color-error: #fc365e;
--color-success: #48c774;
--color-warning: #fddc58;
--color-info: #259eef;

--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: var(--color-white);
--color-bg-acc-1: #fafafa;
--color-bg-acc-2: #f5f5f5;
--color-bg-acc-3: #f0f0f0;
--color-bg-reverse: var(--color-dark);
--color-border: #ebebeb;

--font-serif: "Playfair Display",Times,Georgia,serif;
--font-sans: "Manrope",Tahoma,Arial,sans-serif;
--font-mono: "Inconsolata",Consolas,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! Check your inbox and click the link
Great! Next, complete checkout for full access to Joben
Welcome back! You've successfully signed in
You've successfully subscribed to Joben
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