Style-Forge.Media

Style-Forge.Media is a utility library that provides a comprehensive set of predefined CSS media query helpers to streamline responsive web development. With support for desktop, tablet, mobile, portrait, and landscape orientations, it ensures consistent and maintainable breakpoints for your projects, saving development time and effort.

Installation

npm i style-forge.media

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

Customization

@import 'style-forge.media/src/var.css';
@import 'style-forge.media/src/landscape/all.css';
@import 'style-forge.media/src/portrait/all.css';
@import 'style-forge.media/src/tablet/all.css';
@import 'style-forge.media/src/mobile/all.css';

Variables

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

  /* margin */
  --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);

  /* 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;
}