Structures

Table of content

What are Structures?

Layouts
Landing-Page

Structures are the most complex types. They may even consist of multiple molecules or other structures again. The header of this page is surely a structure.

To mark a variable or mixin as a structure, annotate it with the @structure tag, optionally followed by a sub-section.

Hint:
This is the generated style guide for Nucleus and it's documentation pages. These are the actual components used, and the pages are generated with Nucleus itself. Feel free to browse a bit and try things out.

Other

Header

Show example

Copy markup

Header bar with logo, navigation, and tool icons at the top of the page.

Nucleus

<div class="SG-header">
  <div class="SG-logo">
  <div class="SG-logo__icon SG-ico SG-ico--logo"></div>
  <div class="SG-logo__name">Nucleus</div>
</div>
  <ul class="SG-nav-icons">
  <li>
    <a class="SG-nav-icons__item">
      <i class="SG-ico SG-ico--question"></i>
    </a>
  </li>
  <li>
    <a class="SG-nav-icons__item">
      <i class="SG-ico SG-ico--copy"></i>
    </a>
  </li>
</ul>
  <ul class="SG-nav">
  <li>
    <a class="SG-nav__item" href='#'>Item #1</a>
  </li>
  <li>
    <a class="SG-nav__item SG-nav__item--active" href='#'>Item #2</a>
  </li>
  <li>
    <a class="SG-nav__item" href='#'>Item #3</a>
  </li>
</ul>
</div>

Script

$('body').on('click','button',function(){
      $(this).doSomething();
  });

Layouts

Single-column Layout

Show example

Copy markup

Basic layout container with a fixed width, centered horizontally in the page.

Veniam velit minim do dolore. Sint velit occaecat laboris adipisicing mollit nostrud commodo qui adipisicing minim ex do. Officia sunt eu nostrud Lorem culpa. Aute esse nostrud eu amet. Ea quis magna est excepteur pariatur nulla occaecat sit enim eu minim et fugiat elit. Magna occaecat labore qui sit duis ut nulla nulla ex elit ut aute laboris amet. Culpa ex consequat irure enim cupidatat deserunt anim sit consequat laborum. Voluptate reprehenderit reprehenderit sunt culpa velit eiusmod aliqua eu id.

Proident ex culpa eiusmod do quis officia eu nisi non mollit quis. Quis exercitation ut proident reprehenderit nisi labore ad irure est fugiat. Sunt voluptate nulla enim quis elit cillum nisi eu do. Irure nostrud ea do occaecat ut qui Lorem cillum ipsum consequat aute Lorem est labore. Aliquip aliquip veniam dolor enim qui. Nostrud laborum amet anim et elit.

<div class="SG-layout"><div class="SG-p">
  Veniam velit minim do dolore. Sint velit occaecat laboris adipisicing mollit nostrud commodo qui adipisicing minim ex do. Officia sunt eu nostrud Lorem culpa.

Aute esse nostrud eu amet. Ea quis magna est excepteur pariatur nulla occaecat sit enim eu minim et fugiat elit. Magna occaecat labore qui sit duis ut nulla nulla ex elit ut aute laboris amet. Culpa ex consequat irure enim cupidatat deserunt anim sit consequat laborum. Voluptate reprehenderit reprehenderit sunt culpa velit eiusmod aliqua eu id.
</div>
<div class="SG-p">
  Proident ex culpa eiusmod do quis officia eu nisi non mollit quis. Quis exercitation ut proident reprehenderit nisi labore ad irure est fugiat. Sunt voluptate nulla enim quis elit cillum nisi eu do. Irure nostrud ea do occaecat ut qui Lorem cillum ipsum consequat aute Lorem est labore. Aliquip aliquip veniam dolor enim qui. Nostrud laborum amet anim et elit.
</div></div>

Two-column layout

Show example

Copy markup

Two-colum layout with a wider main content and a narrow column next to it, providing space for the sidebar on the documentation pages.

Enim veniam dolor ad amet anim ea veniam. Minim excepteur ut qui nulla. Magna fugiat labore quis sunt. Minim magna incididunt irure eiusmod Lorem culpa reprehenderit duis quis. Incididunt est reprehenderit labore id quis labore voluptate. Ad cupidatat labore exercitation ut ut consectetur aute nisi est est pariatur velit. Culpa dolor incididunt commodo nisi exercitation aliquip ut ut magna ullamco culpa qui occaecat. Nulla culpa quis mollit excepteur voluptate enim eiusmod ea. Ipsum occaecat nulla qui voluptate ut eiusmod eu labore culpa adipisicing dolor tempor. Magna in veniam aliquip elit aliquip minim eiusmod dolore.

Amet excepteur nulla eu culpa culpa laboris eiusmod minim culpa est incididunt mollit. Elit do tempor cupidatat nisi. Ea voluptate aliquip nostrud anim id eiusmod et dolore.

<div class="SG-layout SG-layout--two-columns">
  <div class="SG-layout__sidebar">
    <div class="SG-toc">
  <ul>
    <li class="SG-toc__category">A category</li>
    <li>First Level #1</li>
    <li>
      First Level #2
      <ul>
        <li>Second Level #1</li>
        <li>Second Level #2</li>
      </ul>
    </li>
    <li class="SG-toc__category">A category</li>
    <li>First Level #3</li>
  </ul>
</div>
  </div>
  <div class="SG-layout__content">
    <div class="SG-p">
  Enim veniam dolor ad amet anim ea veniam. Minim excepteur ut qui nulla. Magna fugiat labore quis sunt. Minim magna incididunt irure eiusmod Lorem culpa reprehenderit duis quis. Incididunt est reprehenderit labore id quis labore voluptate. Ad cupidatat labore exercitation ut ut consectetur aute nisi est est pariatur velit.

Culpa dolor incididunt commodo nisi exercitation aliquip ut ut magna ullamco culpa qui occaecat. Nulla culpa quis mollit excepteur voluptate enim eiusmod ea. Ipsum occaecat nulla qui voluptate ut eiusmod eu labore culpa adipisicing dolor tempor. Magna in veniam aliquip elit aliquip minim eiusmod dolore.
</div>
<div class="SG-p">
  Amet excepteur nulla eu culpa culpa laboris eiusmod minim culpa est incididunt mollit. Elit do tempor cupidatat nisi. Ea voluptate aliquip nostrud anim id eiusmod et dolore.
</div>
  </div>
</div>

Landing-Page

Feature list

Show example

Copy markup

Fits well in new and mature projects Getting started Fits well in new and mature projects Getting started Fits well in new and mature projects Getting started Fits well in new and mature projects Getting started

<div class="feature-list">
  <a class="feature" href="#">
  <i class="ico ico--tools"></i>
  <span class="feature__description">
    Fits well in new and mature projects
  </span>
  <span class="SG-button">Getting started</a>
</a>
  <a class="feature" href="#">
  <i class="ico ico--tools"></i>
  <span class="feature__description">
    Fits well in new and mature projects
  </span>
  <span class="SG-button">Getting started</a>
</a>
  <a class="feature" href="#">
  <i class="ico ico--tools"></i>
  <span class="feature__description">
    Fits well in new and mature projects
  </span>
  <span class="SG-button">Getting started</a>
</a>
  <a class="feature" href="#">
  <i class="ico ico--tools"></i>
  <span class="feature__description">
    Fits well in new and mature projects
  </span>
  <span class="SG-button">Getting started</a>
</a>
</div>

Landing-Page Hero

Show example

Copy markup

Composition of various landing page components with a colorful background and the preview window in the center to give the first glimpse of what nuclues is doing.

Nucleus

Powerfull management for crafted styles A living style guide generator that will boost your efficiency

CODE GOES HERE

<div class="hero">
  <div class="SG-header">
  <div class="SG-logo">
  <div class="SG-logo__icon SG-ico SG-ico--logo"></div>
  <div class="SG-logo__name">Nucleus</div>
</div>
  <ul class="SG-nav-icons">
  <li>
    <a class="SG-nav-icons__item">
      <i class="SG-ico SG-ico--question"></i>
    </a>
  </li>
  <li>
    <a class="SG-nav-icons__item">
      <i class="SG-ico SG-ico--copy"></i>
    </a>
  </li>
</ul>
  <ul class="SG-nav">
  <li>
    <a class="SG-nav__item" href='#'>Item #1</a>
  </li>
  <li>
    <a class="SG-nav__item SG-nav__item--active" href='#'>Item #2</a>
  </li>
  <li>
    <a class="SG-nav__item" href='#'>Item #3</a>
  </li>
</ul>
</div>
  <h1>
    Powerfull management for crafted styles
    <small>A living style guide generator that will boost your efficiency</small>
  </h1>
  <div class="window">
  <div class="split-pane">
  <div class="split-pane__preview">
    <div class="split-pane__handle"></div>
  </div>
  <div class="split-pane__code SG-code code">
    CODE GOES HERE
  </div>
</div>
</div>
  <nav>
    <a class="SG-button SG-button--white SG-button--large">CTA Button</a>
  </nav>
</div>