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.
Icons
.ico--github
.ico--glide
.ico--logodeprecated
.ico--molecule
.ico--rescue
.ico--search
.ico--tools
.SG-ico--code
.SG-ico--copy
.SG-ico--logo
.SG-ico--question
.SG-ico--seach
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
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>
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>
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>
Hint
Show example
 
Copy markup
Block-style paragraph for hints, with a yellow accent color. Best in combination with the generic paragraph class.
Exercitation Lorem cupidatat cupidatat pariatur culpa consectetur commodo nulla. Ex occaecat esse non duis amet mollit quis. Dolore irure occaecat sint irure aute adipisicing ex duis fugiat adipisicing magna culpa cupidatat. Consectetur laboris minim proident ut eiusmod velit duis pariatur labore cupidatat adipisicing. Ut amet ad exercitation anim nostrud eiusmod.
<div class="SG-hint SG-p"> Exercitation Lorem cupidatat cupidatat pariatur culpa consectetur commodo nulla. Ex occaecat esse non duis amet mollit quis. Dolore irure occaecat sint irure aute adipisicing ex duis fugiat adipisicing magna culpa cupidatat. Consectetur laboris minim proident ut eiusmod velit duis pariatur labore cupidatat adipisicing. Ut amet ad exercitation anim nostrud eiusmod. </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>
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.
Aliquip amet laboris ex tempor id qui veniam. Enim nisi enim aute Lorem aliquip exercitation eu deserunt exercitation sunt id labore. Ex ipsum amet qui cillum laborum et et qui consequat voluptate sunt. Eu occaecat exercitation veniam culpa amet ea. Aliqua amet velit fugiat culpa minim ea. Do exercitation nisi ullamco mollit enim do deserunt aute deserunt minim mollit. Nostrud commodo ad sint reprehenderit ut culpa ullamco incididunt ipsum culpa aute dolore. Veniam ullamco sint elit dolore quis. Elit id nostrud ea amet labore incididunt minim nostrud dolor elit cupidatat adipisicing culpa. Anim Lorem dolor do nostrud ut tempor eu esse Lorem ad dolore amet. Incididunt aliquip ipsum nisi dolor enim Lorem quis ut ad ut ex incididunt irure.
Aute culpa aliquip ex cupidatat sint quis ullamco pariatur consectetur irure. Ullamco eu velit excepteur tempor. Nulla exercitation culpa eu laborum esse aute magna.
<div class="SG-p"> Aliquip amet laboris ex tempor id qui veniam. Enim nisi enim aute Lorem aliquip exercitation eu deserunt exercitation sunt id labore. Ex ipsum amet qui cillum laborum et et qui consequat voluptate sunt. Eu occaecat exercitation veniam culpa amet ea. Aliqua amet velit fugiat culpa minim ea. Do exercitation nisi ullamco mollit enim do deserunt aute deserunt minim mollit. Nostrud commodo ad sint reprehenderit ut culpa ullamco incididunt ipsum culpa aute dolore. Veniam ullamco sint elit dolore quis. Elit id nostrud ea amet labore incididunt minim nostrud dolor elit cupidatat adipisicing culpa. Anim Lorem dolor do nostrud ut tempor eu esse Lorem ad dolore amet. Incididunt aliquip ipsum nisi dolor enim Lorem quis ut ad ut ex incididunt irure. </div> <div class="SG-p"> Aute culpa aliquip ex cupidatat sint quis ullamco pariatur consectetur irure. Ullamco eu velit excepteur tempor. Nulla exercitation culpa eu laborum esse aute magna. </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>