Style-Forge

Appearance

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 ​


Footer
Header
Menu
Aside

Main


<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>
Header
Footer

Main

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>
Header
Footer
Menu

Main

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>
Header
Footer
Menu
Aside

Main

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>
Header
Footer
Aside

Main

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>
Footer

Main

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

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

Main

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>
Footer
Menu
Aside

Main

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>
Footer
Aside

Main

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>