Skip to content

Style-Forge.Patterns

npm license npm Codacy Badge build

Style-Forge.Patterns is a versatile and efficient CSS utility library designed to simplify the creation and management of CSS patterns and utilities. It offers a comprehensive collection of pre-defined CSS classes, enabling developers to rapidly build responsive and consistent user interfaces without the need for writing repetitive styles from scratch.

Installation

shell
npm i style-forge.patterns

Usage

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

css
@import 'style-forge.patterns';

Site



<div class="sf-pattern area-header area-menu area-aside area-footer">
  <div class="area-header">Header</div>
  <div class="area-menu">Menu</div>
  <div class="area-aside">Aside</div>
  <div class="area-footer">Footer</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>
html
Combinations
Header

Main

html
<div class="sf-pattern area-header">
  <div class="area-header">Header</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

html
<div class="sf-pattern area-header area-footer">
  <div class="area-header">Header</div>
  <div class="area-footer">Footer</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

html
<div class="sf-pattern area-header area-footer area-menu">
  <div class="area-header">Header</div>
  <div class="area-footer">Footer</div>
  <div class="area-menu">Menu</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

html
<div class="sf-pattern area-menu area-header area-aside area-footer">
  <div class="area-header">Header</div>
  <div class="area-footer">Footer</div>
  <div class="area-menu">Menu</div>
  <div class="area-aside">Aside</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

html
<div class="sf-pattern area-header area-aside area-footer">
  <div class="area-header">Header</div>
  <div class="area-footer">Footer</div>
  <div class="area-aside">Aside</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

Header
Menu

Main

html
<div class="sf-pattern area-menu area-header">
  <div class="area-header">Header</div>
  <div class="area-menu">Menu</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

Header
Menu
Aside

Main

html
<div class="sf-pattern area-menu area-header area-aside">
  <div class="area-header">Header</div>
  <div class="area-menu">Menu</div>
  <div class="area-aside">Aside</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

Header
Aside

Main

html
<div class="sf-pattern area-header area-aside">
  <div class="area-header">Header</div>
  <div class="area-aside">Aside</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

html
<div class="sf-pattern area-footer">
  <div class="area-footer">Footer</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

html
<div class="sf-pattern area-menu area-footer">
  <div class="area-footer">Footer</div>
  <div class="area-menu">Menu</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

html
<div class="sf-pattern area-menu area-aside area-footer">
  <div class="area-footer">Footer</div>
  <div class="area-menu">Menu</div>
  <div class="area-aside">Aside</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

html
<div class="sf-pattern area-aside area-footer">
  <div class="area-footer">Footer</div>
  <div class="area-aside">Aside</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

Menu

Main

html
<div class="sf-pattern area-menu">
  <div class="area-menu">Menu</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

Menu
Aside

Main

html
<div class="sf-pattern area-menu area-aside">
  <div class="area-menu">Menu</div>
  <div class="area-aside">Aside</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

Aside

Main

html
<div class="sf-pattern area-aside">
  <div class="area-aside">Aside</div>

  <div class="area-main">
    <h1>Main</h1>
  </div>
</div>

Media

64x64
Main

Some text... text... text... text... text... text... text... text... text... text... text... text... text... text... text...

32x32
Main

Some text... text... text... text... text... text... text... text... text... text... text... text... text... text... text...

html
<div class="sf-pattern area-media">
  <div class="area-media">
    <img src="..." alt="" />
  </div>

  <div class="area-main">
    <h2>Main</h2>
    <p>Some text</p>
    <div class="sf-pattern area-media">
      <div class="area-media">
        <img src="..." alt="" />
      </div>
      <div class="area-main">
        <h2>Main</h2>
        <p>Some text</p>
      </div>
    </div>
  </div>
</div>

Released under the MIT License