turretcss

Base

An overview of turretcss and basic styling behaviours including global variables, fonts, color palettes, and media queries.

Root

Sets @root-size on the :root element.

--root-size: 16px;

Focus

Outline property and outline offset defintion for focusable elements.

--focus-outline: 0.125rem solid var(--info);
--focus-outline-offset: 0.125rem;

Color

Default color property definition.

--color: var(--dark);

Background

Default background property definition.

--background: var(--white);

Border

Default border-width, border-style, and border-color definitions for buttons, inputs, tables, etc.

--border-width: 1px;
--border-style: solid;
--border-color: var(--light);
--border: var(--border-width) var(--border-style) var(--border-color);

Border Radius

Default border-radius definitions for buttons, inputs, tables, etc.

--border-radius: 0.25em;

Box Shadow

Default box-shadow property definitions including states.

--box-shadow: none;
--box-shadow-color: color-mod(var(--dark) alpha(10%));
--hover-box-shadow: none;
--focus-box-shadow: none;
--active-box-shadow: none;

Box Shadow Sizes

--box-shadow-xxl: 0 1px 10px 1px var(--box-shadow-color);
--box-shadow-xl: 0 1px 8px 1px var(--box-shadow-color);
--box-shadow-l: 0 1px 6px 1px var(--box-shadow-color);
--box-shadow-m: 0 1px 4px 1px var(--box-shadow-color);
--box-shadow-s: 0 1px 2px 1px var(--box-shadow-color);
--box-shadow-xs: 0 1px 1px 1px var(--box-shadow-color);
--box-shadow-xxs: 0 0px 1px var(--box-shadow-color);

Z-Index

Z-index utility definitions for general use.

--z-index-high: 999;
--z-index-medium: 99;
--z-index-low: 9;

Speed

Default speeds for transitions.

--speed-fast: 200ms;
--speed-medium: 300ms;
--speed-slow: 500ms;
--speed: var(--speed-fast);

Height

Height sizes for buttons, inputs, and selects.

--height-xxl: 3.25rem;
--height-xl: 3rem;
--height-l: 2.75rem;
--height-m: 2.5rem;
--height-s: 2.25rem;
--height-xs: 2rem;
--height-xxs: 1.75rem;

Space

Space sizes for use globally, including .margin-*, .padding-*, and .space-* utility classes.

--space-xxl: 4rem;
--space-xl: 3rem;
--space-l: 2rem;
--space-m: 1.5rem;
--space-s: 1rem;
--space-xs: 0.75rem;
--space-xxs: 0.5rem;

Max Width

Max Width sizes for use globally, including utility classes.

--max-width-xxl: 70rem;
--max-width-xl: 60rem;
--max-width-l: 50rem;
--max-width-m: 40rem;
--max-width-s: 30rem;
--max-width-xs: 20rem;
--max-width-xxs: 10rem;

Related