Style-Forge.Helpers

Style-Forge.Helpers is a utility library that provides a set of essential CSS helper classes to enhance and simplify your web development workflow. It includes various utilities for spacing, alignment, visibility, and more, ensuring a more efficient and maintainable codebase.

Installation

npm i style-forge.helpers

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.helpers';

Customization

@import 'style-forge.helpers/src/content-position.css';
@import 'style-forge.helpers/src/cursor.css';
@import 'style-forge.helpers/src/image.css';
@import 'style-forge.helpers/src/display.css';
@import 'style-forge.helpers/src/margin.css';
@import 'style-forge.helpers/src/op.css';
@import 'style-forge.helpers/src/ov.css';
@import 'style-forge.helpers/src/padding.css';
@import 'style-forge.helpers/src/position.css';
@import 'style-forge.helpers/src/radius.css';
@import 'style-forge.helpers/src/size.css';
@import 'style-forge.helpers/src/text.css';
@import 'style-forge.helpers/src/z.css';

@import 'style-forge.helpers/src/columns/all.css';

@import 'style-forge.helpers/src/flex.css';
@import 'style-forge.helpers/src/grid.css';
@import 'style-forge.helpers/src/gap.css';
@import 'style-forge.helpers/src/order.css';

Variables

:root {
  /* gap */
  --sf-gap-x: 0.5em;
  --sf-gap-y: 0.5em;

  /* margins */
  --sf-margin: 1em;
  --sf-margin-1: calc(var(--sf-margin) * 0.25);
  --sf-margin-2: calc(var(--sf-margin) * 0.5);
  --sf-margin-3: calc(var(--sf-margin) * 0.75);
  --sf-margin-4: calc(var(--sf-margin) * 1.25);
  --sf-margin-5: calc(var(--sf-margin) * 1.5);
  --sf-margin-6: calc(var(--sf-margin) * 2);

  /* padding */
  --sf-padding: 1em;
  --sf-padding-1: calc(var(--sf-padding) * 0.25);
  --sf-padding-2: calc(var(--sf-padding) * 0.5);
  --sf-padding-3: calc(var(--sf-padding) * 0.75);
  --sf-padding-4: calc(var(--sf-padding) * 1.25);
  --sf-padding-5: calc(var(--sf-padding) * 1.5);
  --sf-padding-6: calc(var(--sf-padding) * 2);

  /* border-radius */
  --sf-radius: 0.5em;
  --sf-radius-1: 1em;
  --sf-radius-2: 1.25em;
  --sf-radius-3: 1.5em;
  --sf-radius-4: 2em;
  --sf-radius-5: 2.5em;
  --sf-radius-6: 3em;

  /* text */
  --sf-lh: 0.8;
  --sf-lh-normal: 1.1875;

  --sf-ff-sans: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --sf-ff-serif: Times, 'Times New Roman', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --sf-ff-monospace: 'Lucida Console', Courier, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --sf-ff-cursive: cursive;
  --sf-ff-fantasy: fantasy;
  --sf-ff-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', emoji;
  --sf-ff-math: math;
  --sf-ff-fangsong: fangsong;

  --sf-fz: 1rem;
  --sf-fz-0: 0;
  --sf-fz-bold: 1rem;

  --sf-fz-h1: 3rem;
  --sf-fz-h2: 2.5rem;
  --sf-fz-h3: 2rem;
  --sf-fz-h4: 1.5rem;
  --sf-fz-h5: 1.25rem;
  --sf-fz-h6: 1rem;

  --sf-fz-small: 0.75rem; /* 12 */
  --sf-fz-small-1: 0.9375rem; /* 15 */
  --sf-fz-small-2: 0.875rem; /* 14 */
  --sf-fz-small-3: 0.8125rem; /* 13 */
  --sf-fz-small-4: 0.75rem; /* 12 */
  --sf-fz-small-5: 0.6875rem; /* 11 */
  --sf-fz-small-6: 0.625rem; /* 10 */

  --sf-fw: 400;
  --sf-fw-bold: 600;
  --sf-fw-small: 300;

  --sf-fw-h1: 700;
  --sf-fw-h2: 700;
  --sf-fw-h3: 700;
  --sf-fw-h4: 600;
  --sf-fw-h5: 600;
  --sf-fw-h6: 600;
}