Style-Forge.Patterns

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

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:

@import 'style-forge.patterns';

Site

Header Menu Aside Footer

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>

Combinations

Header

Main

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

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

---

Header

Footer

Main

<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

<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

<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

<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

<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

<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

<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

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

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

---

Footer

Menu

Main

<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

<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

<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

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

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

---

Menu

Aside

Main

<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

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

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