Style-Forge.Base

Style-Forge.Base provides the foundational CSS variables and base styles for the Style Forge framework. It includes essential typography, color schemes, and utility classes, ensuring a consistent and customizable design system for your web projects.

Installation

npm i style-forge.base

Usage

After installation, you can import the CSS file into your project or, if you are using Webpack or another module bundler:

@import 'style-forge.base';

Variables

--sf-c - these are colors in HSL

:root {
  --sf-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 
  'Segoe UI Symbol'; /* font-family */

  /* line-height */
  --sf-lh: 0.8;
  --sf-lh-txt: 1.5;

  /* font-size header */
  --sf-h1: 3rem;
  --sf-h2: 2.5rem;
  --sf-h3: 2rem;
  --sf-h4: 1.5rem;
  --sf-h5: 1.25rem;
  --sf-h6: 1rem;

  /* font-weight header */
  --sf-fw-h1: 700;
  --sf-fw-h2: 700;
  --sf-fw-h3: 700;
  --sf-fw-h4: 600;
  --sf-fw-h5: 600;
  --sf-fw-h6: 600;

  /* font-size */
  --sf-fz: 1rem;
  --sf-fz-bold: 1rem;
  --sf-fz-small: 0.75rem;

  /* font-weight */
  --sf-fw: 400;
  --sf-fw-bold: 600;
  --sf-fw-small: 300;

  --sf-disabled: 0.4; /* opacity */

  --sf-c-link: 225 73% 57%; /* <a> - color */

  --sf-c-mark-bg: 60 100% 50%; /* <mark> - background */
  --sf-c-mark-txt: 0 0% 10%; /* <mark> - color */

  --sf-c-txt: 0 0% 10%; /* All color */
  --sf-c-bg: 0 0% 100%; /* All background */
  --sf-c-shape-bg: 0 0% 90%; /* <pre> - background */
  --sf-c-backdrop: 0 0% 10%; /* ::backdrop */
  --sf-table-c-bd: 0 0% 75%; /* Table border */
  --sf-form-c-bd: 0 0% 10%; /* All Elements Form border */
}