Package Exports

style-forge.patterns
style-forge.patterns/patterns.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (style-forge.patterns) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

style-forge.patterns

Patterns CSS for style-forge

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

Site model

Grid model for the site [media query for mobile devices]

<div pattern header footer menu aside>
  <div footer>Footer</div>
  <div header>Header</div>
  <div menu>Menu</div>
  <div aside>Aside</div>

  <!-- Should always be -->
  <div main>
    <h1>Main</h1>
  </div>
  <!-- // -->
</div>

Options

pattern - This is the main Grid block

<div pattern>
  <div main>
    <h1>Main</h1>
  </div>
</div>

header

<div pattern header>
  <div main>
    <h1>Main</h1>
  </div>
  <div header>Header</div>
</div>

footer

<div pattern footer>
  <div main>
    <h1>Main</h1>
  </div>
  <div footer>Footer</div>
</div>

menu

<div pattern menu>
  <div main>
    <h1>Main</h1>
  </div>
  <div menu>Menu</div>
</div>

aside

<div pattern aside>
  <div main>
    <h1>Main</h1>
  </div>
  <div aside>Aside</div>
</div>

Media model

Grid model for the media

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

Inheritance example

<article pattern media>
  <figure>
    <img src="https://via.placeholder.com/128x128" alt="" />
  </figure>
  <section 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 pattern media>
      <figure>
        <img src="https://via.placeholder.com/128x128" alt="" />
      </figure>
      <section 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.