Structures

Table of content

What are Structures?

Landing-Page
Layouts

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.

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>

Layouts

Single-column Layout

Show example

Copy markup

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

Et eu ullamco non elit ipsum. Nostrud exercitation fugiat amet nostrud exercitation. Dolore pariatur magna exercitation dolor pariatur elit cillum. Exercitation adipisicing velit sint excepteur quis velit labore. Sit dolor pariatur cillum elit reprehenderit irure velit et dolor. Nulla exercitation commodo voluptate minim anim elit mollit ut anim fugiat sint. Ipsum ullamco enim elit laboris do esse. Dolore ex excepteur deserunt eu non irure dolore fugiat voluptate.

Aliqua ullamco reprehenderit eiusmod magna dolor sunt excepteur irure veniam nisi excepteur. Ullamco voluptate tempor dolor sit id. Adipisicing tempor tempor incididunt quis duis laborum voluptate minim dolor in sit do. Id laborum occaecat ex irure adipisicing ullamco tempor deserunt officia non officia laboris mollit aliquip. Tempor ullamco culpa consectetur enim sit ipsum veniam est. In Lorem deserunt non deserunt ipsum laboris.

<div class="SG-layout"><div class="SG-p">
  Et eu ullamco non elit ipsum. Nostrud exercitation fugiat amet nostrud exercitation. Dolore pariatur magna exercitation dolor pariatur elit cillum. Exercitation adipisicing velit sint excepteur quis velit labore.

Sit dolor pariatur cillum elit reprehenderit irure velit et dolor. Nulla exercitation commodo voluptate minim anim elit mollit ut anim fugiat sint. Ipsum ullamco enim elit laboris do esse. Dolore ex excepteur deserunt eu non irure dolore fugiat voluptate.
</div>
<div class="SG-p">
  Aliqua ullamco reprehenderit eiusmod magna dolor sunt excepteur irure veniam nisi excepteur. Ullamco voluptate tempor dolor sit id. Adipisicing tempor tempor incididunt quis duis laborum voluptate minim dolor in sit do. Id laborum occaecat ex irure adipisicing ullamco tempor deserunt officia non officia laboris mollit aliquip. Tempor ullamco culpa consectetur enim sit ipsum veniam est. In Lorem deserunt non deserunt ipsum laboris.
</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.

Tempor non anim mollit velit aliquip ex ipsum excepteur ex. Tempor fugiat sint consequat sit. Id adipisicing excepteur culpa dolor ullamco ipsum. Cillum qui sint veniam aute aute excepteur laboris irure aute minim. Incididunt in ea tempor incididunt deserunt incididunt do exercitation tempor cupidatat aliqua et cillum. Lorem consequat officia et excepteur proident. Labore exercitation sit amet voluptate eu ullamco voluptate cillum ea.

Consequat sunt nostrud dolore anim aliquip fugiat aute ea. Quis occaecat minim dolore proident ad sit ipsum elit nostrud. Cillum exercitation adipisicing irure incididunt laboris elit deserunt ut duis consectetur id mollit. Nulla enim aliqua nulla id est velit mollit. Est ex sit fugiat proident aute commodo officia esse ut id. Non eu incididunt pariatur do incididunt velit consectetur voluptate irure quis consequat.

<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">
  Tempor non anim mollit velit aliquip ex ipsum excepteur ex. Tempor fugiat sint consequat sit. Id adipisicing excepteur culpa dolor ullamco ipsum.

Cillum qui sint veniam aute aute excepteur laboris irure aute minim. Incididunt in ea tempor incididunt deserunt incididunt do exercitation tempor cupidatat aliqua et cillum. Lorem consequat officia et excepteur proident. Labore exercitation sit amet voluptate eu ullamco voluptate cillum ea.
</div>
<div class="SG-p">
  Consequat sunt nostrud dolore anim aliquip fugiat aute ea. Quis occaecat minim dolore proident ad sit ipsum elit nostrud. Cillum exercitation adipisicing irure incididunt laboris elit deserunt ut duis consectetur id mollit. Nulla enim aliqua nulla id est velit mollit. Est ex sit fugiat proident aute commodo officia esse ut id. Non eu incididunt pariatur do incididunt velit consectetur voluptate irure quis consequat.
</div>
  </div>
</div>

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();
  });