Atoms
Table of content
What are Atoms?
Atoms are the very basic elements of the stylesheet. Imagine every single-class element or selector rules as an atom. Examples could be buttons, links, headlines, inputs ... you get it, right?
To mark an element as an atom, annotate it with the @atom tag, followed by the name of the component. Special atoms are @icons.
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
Button
Show example
 
Copy markup
Generic button styles for a subtile button on light background and a more present button for darker / colorful backgrounds. Comes in two sizes: default (no BEM modifier) and a larger version (with .SG-button--large modifier).
<button class="SG-button">.SG-button</button> <button class="SG-button SG-button--large">.SG-button</button> <div style="padding: 5px; background: #f15f79; display: inline-block; margin: 0 1em;"> <button class="SG-button SG-button--white">.SG-button</button> <button class="SG-button SG-button--white SG-button--large">.SG-button</button> </div>
Window
Show example
 
Copy markup
OS X window mockup. Fits well with the split-pane for the landing page - as shown in this example (we are using the @{include} substitution command here). In fact, you may put whatever content you like into the window.
CODE GOES HERE
<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>
Typography
Generic Code block
Show example
 
Copy markup
Dark box with monospaced font, used - for example - to display markup example for components.
Code
<div class="SG-code">Code</div>
Nucleus Code block
Show example
 
Copy markup
Alternative code block with monospaced font, maily used for code examples and command instructions on the documentation pages.
Example
<div class="SG-code-nucleus">Example</div>
Pill
Show example
 
Copy markup
Pill for encapsulated content or numerical counters.
Content
12
<div class="SG-pill">Content</div> <div class="SG-pill">12</div>
Headlines
Show example
 
Copy markup
Headlines which visually separate and introduce content. Both used on Nucleus pages and the documentation pages.
Headline H1
Headline H2
Headline H3
Headline H4
<div class="SG-h1">Headline H1</div> <div class="SG-h2">Headline H2</div> <div class="SG-h3">Headline H3</div> <div class="SG-h4">Headline H4</div>
Paragraph
Show example
 
Copy markup
Generic paragraph style for medium to long blocks of text. This element is using the @{lipsum} substitution to generate two blocks of text.
Labore officia aliquip ullamco proident. Labore consequat ipsum ea tempor cillum pariatur mollit. Duis eiusmod quis non ad sunt. Do ipsum excepteur dolor adipisicing Lorem nulla do commodo aute sunt aliquip ullamco laborum. Velit ex officia excepteur in incididunt eu culpa nostrud mollit dolore. Aliquip Lorem veniam nulla eiusmod aliquip nisi nulla. Deserunt tempor cillum exercitation ut culpa adipisicing quis consequat ipsum. Non labore nulla qui qui culpa ex deserunt incididunt aliquip laborum tempor. Non nulla sit et magna officia. Irure commodo id sint qui sint aute. Aute eu dolore anim sint Lorem ut cupidatat esse sint amet consectetur labore nostrud. Elit minim pariatur cillum magna magna magna nulla.
Ex occaecat ipsum sint Lorem esse ea tempor. Anim excepteur laboris amet qui velit amet reprehenderit. Et aliqua ea ipsum et nostrud. Consequat eiusmod laborum irure sunt minim incididunt deserunt nisi tempor. Ea labore est enim anim cupidatat aute sit culpa cillum dolore sint pariatur. Minim ullamco incididunt consectetur consequat do exercitation non enim adipisicing culpa ad. Adipisicing enim adipisicing voluptate cupidatat.
<div class="SG-p"> Labore officia aliquip ullamco proident. Labore consequat ipsum ea tempor cillum pariatur mollit. Duis eiusmod quis non ad sunt. Do ipsum excepteur dolor adipisicing Lorem nulla do commodo aute sunt aliquip ullamco laborum. Velit ex officia excepteur in incididunt eu culpa nostrud mollit dolore. Aliquip Lorem veniam nulla eiusmod aliquip nisi nulla. Deserunt tempor cillum exercitation ut culpa adipisicing quis consequat ipsum. Non labore nulla qui qui culpa ex deserunt incididunt aliquip laborum tempor. Non nulla sit et magna officia. Irure commodo id sint qui sint aute. Aute eu dolore anim sint Lorem ut cupidatat esse sint amet consectetur labore nostrud. Elit minim pariatur cillum magna magna magna nulla. </div> <div class="SG-p"> Ex occaecat ipsum sint Lorem esse ea tempor. Anim excepteur laboris amet qui velit amet reprehenderit. Et aliqua ea ipsum et nostrud. Consequat eiusmod laborum irure sunt minim incididunt deserunt nisi tempor. Ea labore est enim anim cupidatat aute sit culpa cillum dolore sint pariatur. Minim ullamco incididunt consectetur consequat do exercitation non enim adipisicing culpa ad. Adipisicing enim adipisicing voluptate cupidatat. </div>
Hint
Show example
 
Copy markup
Block-style paragraph for hints, with a yellow accent color. Best in combination with the generic paragraph class.
Adipisicing incididunt voluptate reprehenderit proident quis. Adipisicing voluptate nulla dolore minim cupidatat ea dolore aute sit amet proident aute qui. Do quis ullamco ad elit. Consectetur incididunt in sunt minim cupidatat. Minim adipisicing nulla amet reprehenderit fugiat dolor tempor id pariatur nostrud consequat. Sunt laboris minim elit voluptate pariatur eiusmod amet. Ea aliquip in reprehenderit eiusmod labore veniam qui enim commodo mollit cillum veniam cillum.
<div class="SG-hint SG-p"> Adipisicing incididunt voluptate reprehenderit proident quis. Adipisicing voluptate nulla dolore minim cupidatat ea dolore aute sit amet proident aute qui. Do quis ullamco ad elit. Consectetur incididunt in sunt minim cupidatat. Minim adipisicing nulla amet reprehenderit fugiat dolor tempor id pariatur nostrud consequat. Sunt laboris minim elit voluptate pariatur eiusmod amet. Ea aliquip in reprehenderit eiusmod labore veniam qui enim commodo mollit cillum veniam cillum. </div>
Basic Text Styles
Show example
 
Copy markup
Basic styles to decorate text. Since we don't want to use HTML markup to achieve bold text (in order to avoid style conflicts), we utilize those helper classes here. In general, every style coming from Nucleus is prefixed with SG- (for style guide).
Bold text
Italic text
Link-like
Accent Link
<span class="SG-strong">Bold text</span><br> <span class="SG-i">Italic text</span><br> <span class="SG-a">Link-like</span><br> <span class="SG-a SG-a--pink">Accent Link</span>
Icons
.SG-ico--logo
.SG-ico--code
.SG-ico--question
.SG-ico--copy
.SG-ico--seach
.ico--logodeprecated
.ico--github
.ico--tools
.ico--molecule
.ico--rescue
.ico--search
.ico--glide