style-forge.patterns v2.0.0

style-forge.patterns

Patterns CSS for style-forge

⚠️ The order in which elements are written within pattern is not important

Installation

npm install style-forge.patterns

yarn add style-forge.patterns

Site model

Grid model for the site media query for mobile devices

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

  <!-- Should always be -->
  <div class="area-main">
    <h1>Main</h1>
  </div>
  <!-- // -->
</div>

Options

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

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

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

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

<div class="sf-pattern area-aside">
  <div class="area-main">
    <h1>Main</h1>
  </div>
  <div class="area-aside">Aside</div>
</div>

Media model

Grid model for the media

<article class="sf-pattern area-media">
  <figure>
    <img src="https://via.placeholder.com/128x128" alt="" />
  </figure>
  <section class="area-main">
    <p>
      Our psychic everything for grace is to witness others safely.
    </p>
  </section>
</article>

<article class="sf-pattern area-media">
  <figure>
    <img src="https://via.placeholder.com/128x128" alt="" />
  </figure>
  <section class="area-main">
    <p>
      Our psychic everything for grace is to witness others safely.
    </p>
    <p>
      Our psychic everything for grace is to witness others safely.
    </p>
    <article class="sf-pattern area-media">
      <figure>
        <img src="https://via.placeholder.com/128x128" alt="" />
      </figure>
      <section class="area-main">
        <p>
          Our psychic everything for grace is to witness others safely.
        </p>
      </section>
    </article>
  </section>
</article>

License

Distributed under the MIT License. See LICENSE for more information.