Layers
Goldilocks-CSS is designed to allow customization of the theme through the use of layers. Layers are used to set the initial theme settings and can be extended to use custome settings. Goldilocks-CSS uses seven layers to control the page decoration:
- Base: sets up global values and core resets;
- Layout: defines page layout, grids, sections and other semantic tags;
- Helpers: defines helpers for positioning, spacing, etc.;
- Elements: controls typography, buttons forms, tables, images and other common items;
- Extended: defines elements such as badges and avatars as well as common components such as accordians, breadcrumbs, cards and navigation;
- Extras: defines additional elements (progress bars, ribbons and tooltips) and components (modals, popovers, carousal and charts);
- Custom: for the designer to override any settings or to add their own values.
Initial Variables with Default Settings
File initial-core-variables.css contains the CSS variables that drive all the elements and components.
:root {
/* version 0.1.0 - April 29, 2022 - v3 */
/* awareness variables - for info only */
/** typically (and sadly) @media does not support variables; so we need to hard code the mobile breakpoint **/
/** files affected: gridbox.css, level.css, page.css, pagination.css, blockquote.css, navbar.css, sidebar.css, image.css, media.css **/
--mobile-breakpoint: 576px; /* or 36rem at 16px base size */
/* Base measurement unit to be used for font, margins and padding */
/* changing the base html factor allows a user to change the font sizes to meet accessibility needs */
--base-html-factor: 100%;
--base-rem: 1rem;
/* Typography */
/** Note: text colors are set in file: initial-colors.css **/
/** basic is a fixed font size for all screen sizes **/
--base-font-size: var(--base-rem);
/** alternatively, you can use a variable font size for all screen sizes
- font-size is variable and tracks viewport to a width of 100rem (1600 px)
- maximum font-size is set to 3 * base (48px)
**/
/** --base-font-size: clamp( var(--base-rem), 2vw , calc(3 * var(--base-rem ) ) ); **/
/** Default is to use system fonts as much as possible **/
--family-sans-serif: "Tahoma", "Helvetica Neue", "Helvetica", "Arial", "Segoe UI", "Roboto", sans-serif;
--family-serif: "Georgia", "Times New Roman", serif;
--family-monospace: monospace;
--render-mode: optimizeLegibility;
/** Define font weights here **/
--weight-light: 300;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/** Text line heights to match size **/
--line-height-125: 125%;
--line-height-150: 150%;
--line-height-175: 175%;
--line-height-200: 200%;
/** Sizing pattern - typically for text **/
--size-factor: 1.125;
--size-1: calc( 1rem * var(--size-factor) * var(--size-factor) * var(--size-factor) * var(--size-factor) * var(--size-factor) );
--size-2: calc( 1rem * var(--size-factor) * var(--size-factor) * var(--size-factor) * var(--size-factor) );
--size-3: calc( 1rem * var(--size-factor) * var(--size-factor) * var(--size-factor) );
--size-4: calc( 1rem * var(--size-factor) * var(--size-factor) );
--size-5: calc( 1rem * var(--size-factor) );
--size-6: 1rem;
--size-7: calc( 1rem / var(--size-factor) );
/* Example 1.125 scale factor:
--size-1: 1.80rem;
--size-2: 1.60rem;
--size-3: 1.42rem;
--size-4: 1.27rem;
--size-5: 1.13rem;
--size-6: 1rem;
--size-7: 0.9rem;
*/
/* Grid Key Variables */
--gutter: calc(3 * var(--base-rem)); /** grid column gutter **/
--grid-min-px-width: 100px; /** minimum absolute column width in a grid layout **/
--grid-min-width: 5rem; /** minimum relative column width in a grid layout **/
/* basic spacing values */
/* based on https://medium.com/user-experience-design-1/ui-cheat-sheet-spacing-friendships-e37a6fccc407*/
--space-element: var(--base-font-size);
--space-block: calc(2 * var(--base-font-size));
--space-collection: calc(4 * var(--base-font-size));
--space-container: calc(5 * var(--base-font-size));
/* Flexbox element spacing */
--gap-row: calc( 1 * var(--base-font-size) );
--gap-col: calc( 1 * var(--base-font-size) );
/* Elements Controls */
--pad-horz: var(--base-font-size);
--pad-vert: calc( 0.5 * var(--base-font-size) );
--pad-horz-small: calc( 0.5 * var(--base-font-size) );
--pad-vert-small: calc( 0.25 * var(--base-font-size) );
--padding: calc(0.75 * var(--base-font-size));
--padding-normal: var(--base-font-size);
--padding-medium: calc( 1.5 * var(--base-font-size) );
--padding-large: calc( 3 * var(--base-font-size) );
--mar-horz: calc( 0.5 * var(--base-font-size) );
--mar-vert: calc( 0.5 * var(--base-font-size) );
--margin: var(--base-font-size);
--margin-form: calc(1.5 * var(--base-font-size));
--margin-medium: calc(3 * var(--base-font-size));
--margin-large: calc(5 * var(--base-font-size));
/* Component Controls */
--radius: calc(0.5 * var(--base-font-size));
--radius-small: calc(0.5 * var(--radius));
--radius-comp: calc(1 * var(--radius));
--radius-elem: calc(1.5 * var(--radius));
--radius-rounded: 10000px;
/* Navbar settings */
--navbar-height: 4rem;
--navbar-offset: 0;
--navbar-z: 30; /* z-index to ensure that navbar gets priority */
/* Widgetbar settings */
--widgetbar-height: calc( 2 * var(--base-font-size) + 0.25rem);
--widget-z: 30; /* z-index to ensure that navbar gets priority */
/* Breadcrumb setting */
/* other options are: arrow-separator = ">", bullet-separator = "\02022" or quote-separator = "\BB" */
--breadcrumb-separator: "/";
/* magazine normal width */
--magazine-width: 40ch;
/* carousel image height */
--carousel-image-height: 8rem;
--carousel-image-width: calc( 4 / 3 * 8rem); /* aspect ratio of image */
/* uri encoded icon for select and dropdown - chevron down and initially set to primary color */
--indicator: url("data:image/svg+xml;charset=utf8,\
%3Csvg%20xmlns='http://www.w3.org/2000/svg'\
%20viewBox='0%200%2024%2024'%20\
fill='none'%20stroke='currentColor'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E\
%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E\
%3C/svg%3E");
--indicator-down: url('data:image/svg+xml;charset=utf8,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="24" height="24" viewBox="0 0 24 24" \
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\
<polyline points="6 9 12 15 18 9"/>\
</svg>');
--indicator-up: url('data:image/svg+xml;charset=utf8,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="24" height="24" viewBox="0 0 24 24" \
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\
<polyline points="18 15 12 9 6 15"></polyline>\
</svg>');
--indicator-right: url('data:image/svg+xml;charset=utf8,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="24" height="24" viewBox="0 0 24 24" \
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\
<polyline points="9 18 15 12 9 6"/>\
</svg>');
}
Initial Colour Settings with Default Settings
File initial-colors.css contains the CSS variables that drive all colour choices for light / day theme.
/*
main theme color definitions
use https://www.colorhexa.com/ or https://paletton.com/ to build complimentary colors
*/
:root {
--shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.15), 0 0 0 1px rgba(10, 10, 10, 0.02);
/* main theme colour parameters
- based on split complementary color selection
- for triadic color selection, set --main-color-offset to 120 degrees
*/
--main-color: 140; /** primary hue value **/
--main-color-offset: 30; /** +,- degree offset from main + 180° **/
--main-color-sl-light: 100%, 96%; /** color lightening saturation and lightness **/
--main-color-sl-dark: 100%, 24%; /** color darkening saturation and darkness **/
--main-color-complement-low: calc( var(--main-color) + 180 - var(--main-color-offset) );
--main-color-complement-high: calc( var(--main-color) + 180 + var(--main-color-offset) );
/* build main theme colours */
--primary: hsl( var(--main-color), 70%, 31% );
--secondary: hsl( var(--main-color-complement-low), 70%, 45% );
--complement: hsl( var(--main-color-complement-high), 70%, 40%);
/* define text colours for main theme, adjusted for expected theme colour luminosity */
--primary-text: hsl( var(--main-color), 100%, 100%);
--secondary-text: hsl( var(--main-color-complement-low), 100%, 100%);
--complement-text: hsl( var(--main-color-complement-high), 100%, 100%);
--primary-text-invert: hsl( var(--main-color), 100%, 99%);
--secondary-text-invert: hsl( var(--main-color-complement-low), 100%, 99%);
--complement-text-invert: hsl( var(--main-color-complement-high), 100%, 100%);
/* optional light colors; use carefully as accessibility is hard to achieve */
--primary-light: hsl( var(--main-color), var(--main-color-sl-light));
--secondary-light: hsl( var(--main-color-complement-low), var(--main-color-sl-light));
--complement-light: hsl( var(--main-color-complement-high), var(--main-color-sl-light));
--primary-dark: hsl( var(--main-color), var(--main-color-sl-dark) );
--secondary-dark: hsl( var(--main-color-complement-low), var(--main-color-sl-dark) );
--complement-dark: hsl( var(--main-color-complement-high), var(--main-color-sl-dark) );
--link: hsl(217, 71%, 48%);
--link-light: hsl(217, 70%, 90%);
--link-dark: hsl(217, 71%, 30%);
--link-text: hsl( 217, 100%, 95%);
--link-text-invert: hsl( 217, 100%, 95%);
--success: hsl(150, 65%, 53%);
--success-light: hsl(141, 70%, 96%);
--success-dark: hsl(141, 70%, 31%);
--success-text: hsl( 141, 100%, 5%);
--success-text-invert: hsl( 141, 100%, 95%);
--warning: hsl(48, 100%, 48%);
--warning-light: hsl(48, 100%, 95%);
--warning-dark: hsl(48, 100%, 40%);
--warning-text: hsl( 48, 100%, 5%);
--warning-text-invert: hsl( 48, 100%, 95%);
--danger: hsl(348, 86%, 48%);
--danger-light: hsl(348, 90%, 97%);
--danger-dark: hsl(348, 86%, 33%);
--danger-text: hsl( 348, 100%, 100%);
--danger-text-invert: hsl( 348, 100%, 100%);
/* additional greys */
--black: hsl(0, 0%, 4%);
--black-bis: hsl(0, 0%, 10%);
--black-ter: hsl(0, 0%, 16%);
--grey-darker: hsl(0, 0%, 25%);
--grey-dark: hsl(0, 0%, 40%);
--grey: hsl(0, 0%, 60%);
--grey-light: hsl(0, 0%, 85%);
--grey-lighter: hsl(0, 0%, 93%);
--white-ter: hsl(0, 0%, 95%);
--white-bis: hsl(0, 0%, 98%);
--white: hsl(0, 0%, 100%);
/* set the body level colours for light mode*/
--border-main: var(--grey-light);
--border-main-darker: var(--grey);
--bg-main: var(--white);
--bg-main-elem: var(--white);
--bg-main-comp: var(--white);
--bg-main-bis: var(--white-bis);
--bg-main-ter: var(--white-ter);
--bg-main-invert: var(--black-ter);
--bg-main-code: var(--white-ter);
--bg-grid: var(--white-ter);
--bg-element: var(--white-ter);
--bg-component: var(--white-bis);
--bg-highlight: var(--warning-light);
--bg-hover: var(--grey-lighter);
--text: var(--black-ter);
--text-invert: var(--white);
--text-light: var(--grey-dark);
--text-darker: var(--black);
--text-elem: var(--black-ter);
--text-comp: var(--black-ter);
--text-invert-ter: var(--white-ter);
--text-btn: var(--black);
--text-btn-invert: var(--white);
--text-bg: var(--white);
--text-code: var(--secondary-dark);
}
Alternate Dark Colour Settings with Default Settings
File initial-dark-theme.css contains the CSS variables that over-ride the default colour choices to provide night / dark mode colour themes.
/*
main dark theme color definitions
use https://www.colorhexa.com/ or https://paletton.com/ to build complimentary colors
*/
.main-theme-dark {
--shadow: 0 0.1em 0.1em 0.1em rgba(240, 245, 245, 0.25), 0 0 0 1px rgba(245, 245, 245, 0.02);
/* main theme colour parameters
- based on split complementary color selection
- for triadic color selection, set --main-color-offset to 120 degrees
*/
--main-color: 140; /** primary hue value **/
--main-color-offset: 30; /** +,- degree offset from main + 180° **/
--main-color-sl: 53%, 35%; /** saturation and lightness **/
--main-color-sl-light: 100%, 90%; /** color lightening saturation and lightness **/
--main-color-sl-dark: 100%, 48%; /** color lightening saturation and lightness **/
--main-color-complement-low: calc( var(--main-color) + 180 - var(--main-color-offset) );
--main-color-complement-high: calc( var(--main-color) + 180 + var(--main-color-offset) );
/* build main theme colours */
--primary: hsl( var(--main-color), 80%, 65% );
--secondary: hsl( var(--main-color-complement-low), 75%, 75% );
--complement: hsl( var(--main-color-complement-high), 85%, 65% );
/* define text colours for main theme, adjusted for expected theme colour luminosity */
--primary-text: hsl( var(--main-color), 100%, 5%);
--secondary-text: hsl( var(--main-color-complement-low), 100%, 5%);
--complement-text: hsl( var(--main-color-complement-high), 100%, 5%);
--primary-text-invert: hsl( var(--main-color), 100%, 5%);
--secondary-text-invert: hsl( var(--main-color-complement-low), 100%, 99%);
--complement-text-invert: hsl( var(--main-color-complement-high), 100%, 100%);
/* optional light colors; use carefully as accessibility is hard to achieve */
--primary-light: hsl( var(--main-color), var(--main-color-sl-light));
--secondary-light: hsl( var(--main-color-complement-low), var(--main-color-sl-light));
--complement-light: hsl( var(--main-color-complement-high), var(--main-color-sl-light));
--primary-dark: hsl( var(--main-color), var(--main-color-sl-dark) );
--secondary-dark: hsl( var(--main-color-complement-low), var(--main-color-sl-dark) );
--complement-dark: hsl( var(--main-color-complement-high), var(--main-color-sl-dark) );
--link: hsl(217, 80%, 68%);
--link-light: hsl(217, 70%, 90%);
--link-dark: hsl(217, 75%, 40%);
--link-text: hsl( 217, 100%, 5%);
--link-text-invert: hsl( 217, 100%, 98%);
--success: hsl(150, 85%, 75%);
--success-light: hsl(141, 80%, 96%);
--success-dark: hsl(141, 70%, 31%);
--success-text: hsl( 141, 100%, 5%);
--success-text-invert: hsl( 141, 100%, 95%);
--warning: hsl(48, 900%, 55%);
--warning-light: hsl(48, 100%, 95%);
--warning-dark: hsl(48, 100%, 40%);
--warning-text: hsl( 48, 100%, 5%);
--warning-text-invert: hsl( 48, 100%, 95%);
--danger: hsl(348, 80%, 70%);
--danger-light: hsl(348, 90%, 97%);
--danger-dark: hsl(348, 86%, 33%);
--danger-text: hsl( 348, 100%, 5%);
--danger-text-invert: hsl( 348, 100%, 100%);
--grey-light: hsl(0, 0%, 75%);
--grey-lighter: hsl(0, 0%, 85%);
/** invert colours for elements and components **/
--border-main: var(--grey);
--border-main-darker: var(--grey-light);
--bg-main: var(--black);
--bg-main-elem: var(--grey-darker);
--bg-main-comp: var(--black-ter);
--bg-main-bis: var(--black-bis);
--bg-main-ter: var(--black-ter) ;
--bg-main-invert: var(--white);
--bg-main-invert-ter: var(--white-ter);
--bg-main-code: var(--grey-darker);
--bg-grid: var(--grey-darker);
--bg-element: var(--grey-darker);
--bg-component: var(--black-ter);
--bg-highlight: hsl(48, 100%, 15%);;
--bg-hover: var(--grey-dark);
/** invert or adjust colours for text **/
--text: var(--white-bis);
--text-invert: var(--black);
--text-light: var(--grey);
--text-darker: var(--white-ter);
--text-elem: var(--white-bis);
--text-comp: var(--white-bis);
--text-invert-ter: var(--black-ter);
--text-btn: var(--black-bis);
--text-btn-invert: var(--white-ter);
--text-bg: var(--black-bis);
--text-code: var(--secondary-light);
}