Molecules
Table of content
What are Molecules?
Molecules consist of one or more nested rules, but each of them must not be more than an atom itself. For example, using icons or buttons in molecules is valid, but using other molecules is not.
To mark an element as molecule, annotate it with the @molecule tag, followed by the name of the component.
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.
Navigation
Icon Buttons
Show example
 
Copy markup
Buttons with icons, either in combination with a label, or just icon only. Works well with the different styles and sizes, which are defined in the button atom.
With text
<div class="SG-button"> <i class="SG-ico SG-ico--question"></i> </div> <div class="SG-button SG-button--ico"> <i class="SG-ico SG-ico--question"></i> With text </div>
Navigation-List
Show example
 
Copy markup
Navigation bar for the top-level navigation on both style guide and documentation pages. The active element is marked by a BEM modifier.
<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>
Icon-Navigation
Show example
 
Copy markup
Icon navigation for the right section of the header. This molecule basically composes icon-links with a reasonable spacing in between.
<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>
Table of content
Show example
 
Copy markup
A nested table of content list, suitable for two-level navigation.
  • A category
  • First Level #1
  • First Level #2
    • Second Level #1
    • Second Level #2
  • A category
  • First Level #3
<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>
Previews
Color Preview
Show example
 
Copy markup
A circular and textual preview for colors. For the circle, an inline style for the background and border colors has to be set, whereas an inline style for the color of the typographic preview is required.
Aa
<div class="SG-color-preview"> <div class="SG-color-preview__circle" style="background-color: #999; border-color: #888;"></div> <div class="SG-color-preview__typo" style="color: #999">Aa</div> </div>
Mixin Function Definition
Show example
 
Copy markup
A special style for mixin titles, with a parameter list. Best in combination with H3.
mixinFunction (param1, param2, ...)
mixinFunction (param1, param2, ...)
<div class="SG-mixin"> mixinFunction <span class="SG-mixin__parameters">(param1, param2, ...)</span> </div> <div class="SG-h3 SG-mixin"> mixinFunction <span class="SG-mixin__parameters">(param1, param2, ...)</span> </div>
Labeled Value List
Show example
 
Copy markup
Table-style display for label-value pairs. Used for Nuclide output and the configuration reference on the documentation pages.
Label
Label
<div class="SG-config"> <div class="SG-config__row"> <div clasS="SG-config__label">Label</div> <div clasS="SG-config__value">Label</div> </div> </duv>
Other
Logo
Show example
 
Copy markup
The logo, composed from icon and name, used on both style guide and documentation pages. Anyway, it does not scale well and is prone to style influences by the surrounding container.
<div class="SG-logo"> <div class="SG-logo__icon SG-ico SG-ico--logo"></div> <div class="SG-logo__name">Nucleus</div> </div>
Generic Tabledeprecated
Show example
 
Copy markup
A generic table style with header row. Previously used on documentation pages, but has been repaced by the Nuclide preview.
Head #1 Head #2 Head #3
Cell #1 Cell #2 Cell #3
Cell #1 Cell #2 Cell #3
<table class="SG-table"> <thead> <tr> <th class="SG-table__cell SG-table__head">Head #1</th> <th class="SG-table__cell SG-table__head">Head #2</th> <th class="SG-table__cell SG-table__head">Head #3</th> </tr> </thead> <tbody> <tr> <td class="SG-table__cell">Cell #1</td> <td class="SG-table__cell">Cell #2</td> <td class="SG-table__cell">Cell #3</td> </tr> <tr> <td class="SG-table__cell">Cell #1</td> <td class="SG-table__cell">Cell #2</td> <td class="SG-table__cell">Cell #3</td> </tr> </tbody> </table>
Sponsors
Show example
 
Copy markup
Yo, this is where it all began. Nucleus started as a hackday project - and look at it! It's in puberty now. Damn, they grow up really fast. Anyway, if you love to code and would like to hack with us, check out our open positions: https://www.urlaubspiraten.de/jobs
<div class="sponsors"> <div class="sponsors__sponsor sponsors--hp"></div> <div class="sponsors__sponsor sponsors--pt"></div> </div>
Landing-Page
Split-Pane
Show example
 
Copy markup
Dragabble split-canvas for the rendered Nucleus preview in the landing-page hero. Right now, we're not including the necessary JavaScript for this dynamic functionality, that's why it is just a static rendering.
CODE GOES HERE
<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>
Feature
Show example
 
Copy markup
List entry for the feature list on the landing page, consisting of an icon, a brief description and a link to the corresponding documentation page.
Fits well in new and mature projects Getting started
<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>