Copy the boilerplate code below to start building with the latest version of Nucleotide. It comes loaded with a navbar & hero section ready. The header/nav and section.hero are designed to fit perfectly at the top of the page.
<!doctype html>
<html lang="en" class="nucleotide">
<head>
<!-- general meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- favicon -->
<link rel="shortcut icon" href="https://www.crigenetics.com/hubfs/CRI_Genetics_January2020/images/favicon.ico">
<!-- site title -->
<title>CRI Genetics</title>
<!-- Nucleotide CSS -->
<link rel="stylesheet" href="http://nucleotide.crigenetics.com/ui/latest/css/styles.css">
</head>
<body>
<header class="whole px2 py1 flex-space-between flex-center-y">
<!-- logo -->
<a href="#" class="logo flex-center">
<img height="40px" id="nav-logo" src="images/nucleotide_logo.svg"/>
<label class="ml1">nucleotide</label>
</a>
<nav>
<!-- mobile menu button-->
<span class="modal md-ghost" onclick="app.handleModalOpen(this)">
<button class="hamburger"></button>
<!-- whatever i used a modal... -->
<div class="modal-content md-ghost">
<div class="flex-center flex-vertical h100vh bg-default">
<img class="mb3"height="40px" id="nav-logo" src="images/nucleotide_logo.svg"/>
<a href="https://nucleotide.crigenetics.com/ui/dev/index.html" class="py2 whole flex-center">UI Web</a>
<hr>
<a href="https://api.crigenetics.com/docs/" class="py2 whole flex-center">API</a>
<hr>
<a class="disabled py2 whole flex-center" class="py2 whole flex-center">React</a>
<hr>
<a class="disabled py2 whole flex-center" class="py2 whole flex-center">React Native</a>
<button class="absolute close" style="top: var(--unit1); right: var(--unit2)" onclick="app.handleModalClose(this)"></button>
</div>
</div>
</span>
<!-- desktop menu -->
<ul class="ghost md-flex md-flex-center">
<li class="m0 md-ml2">
<a>UI Web</a>
</li>
<li class="m0 md-ml2">
<a href="https://api.crigenetics.com/docs/">API</a>
</li>
<li class="m0 md-ml2 disabled">
<a>React</a>
</li>
<li class="m0 md-ml2 disabled">
<a>React Native</a>
</li>
</ul>
</nav>
</header>
<main>
<!-- hero section -->
<section id="hero-section" class="hero flex-vertical flex-space-between">
<!-- section -->
<div class="flex-center flex-grow">
<div class="px3">
<h1>Hero Section</h1>
<p>The "Hero" <code><section></code> is designed to fit perfectly at the top of a page.</p>
</div>
</div>
</section>
</main>
<footer class="p4 bg-primary flex-center">It's footer time, yo!</footer>
<!-- Nucleotide Scripts -->
<script rel="script" src="http://nucleotide.crigenetics.com/ui/latest/js/scripts.js"></script>
</body>
</html>
You can use sections similar to the way "containers" are used in bootstrap.
This is a typical <section> element. Use it to separate your page layout into bigger sections, like the "testimonial" section, or the "customer review" section.
If you're familiar with bootstrap, use this in place of a ".container" element. For something similar to a '.flex-container' with a '.jumbotron', you can simply use a <section> element with the '.hero' classname
<section>
<div class="flex-center p3 bg-blue4">
<p>This is a typical section element. Use it to separate your page layout into bigger sections, like the "testimonial" section, or the "customer review" section.</p>
</div>
</section>There are only two in this UI kit. Both from Adobe
font-family: var(--defaultFont);Pragmatica
Regular
Basically everything is PragmaticaThis was the primary font for everything when I started working here... I hope to soon test out of this.
font-family: var(--dataFont);Antarctican Mono<h1>Header 1</h1><h2>Header 2</h1><h3>Header 3</h3><h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6>Paragraph
<p>Paragraph</p><a href="https://www.crigenetics.com">Link</a><data>data</data><label>label</label><b>Bold</b><strong>Strong Text</strong><i>Italicized text</i><em>Emphasized text</em><mark>Marked text</mark><small>Marked text</small><del>Marked text</del><ins>Inserted text</ins><u>Underlined text</u>subscript text
<p>
<sub>subscript text</sub>
</p>superscript text
<p>
<sup>subscript text</sup>
</p>In this UI Kit fonts are scaled using a "perfect 4th". In other words, every header size increase by ⅓
These font-size values are available via:
something
<p class="h3">
something
</p>Font sizes for <h1> - <h6> are also available as SASS Variable and CSS Custom Property.
$H3 var(--H3)This font-size is only used for elements: <h6>, <label>,<small> = 0.8rem
This font-size is only used for elements: <p>, <a>,<h5> and most other elements. This is our default font-size, otherwise known as "fontSizeDefault" = "var(--fontSizeDefault)" = "$fontSizeDefault" = 0.8rem
This font-size is only used in <h4> elements
This font-size is only used in <h3> elements
This font-size is only used in <h2> elements
This font-size is only used in <h1> elements
Basic coloring with Nucleotide...
#fff
Nothing fancy here, just good ole #fffIn March/April 2020 I did my skills test for CRI Genetics. I was asked to design a prototype of the dashboard. I sampled this set of colors from a version of the logo that I probably found on the website.
Most color problems in our UI can be solved with one of these colors.
These colors we're here since before time. I'm not sure how these colors were decided. These colors are in hsla() only because of the way I want to color this map. To view proof of concept, visit this codepen
Devs at CRI Genetics should never have to remember hex values for colors. PERIOD. Maybe designers should? Instead learn this system so you don't have to remember anything, just know how it works
transBlueC-75
trans + (Hue) + (Tint0-4 or ShadeA-D) + - + (% opacity)Each color has a name and a corresponding CSS Custom Property or SASS Variable
I'm still working on this section so you might notice some discrepencies here...Similar to the standardized fonts and color palettes in this UI kit, we also have standardized units of distance for spacing, sizing, margins, padding, grid-gap, static widths, etc.
These go up to unit9... i don't think there will be a need to go any higher than that
To create visual layouts that just seem to agree visually, it's important to use these standardized units throughout your design, rather than assigning arbitrary values to CSS attributes like padding and margins.
One way to access these units is by classname.
This example shows a <div> with the className "p3". The padding is illustrated here using the color "red4"
<div class="p3">
.p3
</div>
When writing custom styles you can access these units using Sass variables or CSS Custom Properties.
<div style="background: var(--aqua4); height: var(--unit3); width: var(--unit3)"></div>... But it's easier to just use classNames really
<div class="height3 width3 bg-aqua4"></div>There are 12 responsive prefixing options to build your responsive layout based on what I think are the most common device widths.
<label class="toggle">
<input type="checkbox" checked>
<div class="slider"></div>
<label class="on">On<label>
</label>
<div class="radio">
<type="radio" id="example-radio-id" name="example-radio-name" value="example-radio-value">
<label for="example-radio-id">Radio</label>
</div>
<div class="checkbox">
<type="checkbox" id="example-checkbox-id">
<label for="example-checkbox-id">Checkbox</label>
</div>
<details class="dropdown">
<summary>Dropdown<summary>
<div>Hidden Content</div>
<div>Stuff</div>
<div>Things</div>
</details>
<div class="toggle-group">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<div class="search">
<input type="search" name="example-search-name" aria-label="search-example-aria-label" placeholder="Search">
<button class="btn3" style="transform: rotate(180deg);">☌</button>
</div>
CRI Genetics has a unique approach to genealogical testing. We are an advanced team led by a professional molecular geneticist who has been studying DNA for over 35 years with the help of Nobel Prize winning scientists. At CRI Genetics, we have the education, tools, and skills to provide you the most accurate estimation of your BioGeographical Ancestry.
We combine Genetics with Anthropology to trace the migrations of the human race. When we test your DNA against the samples from around the globe, we can figure out where you fit in the rich history of our species.
Our tests examine 642,824 specific markers across your entire genome. These markers are hand-picked based on the latest breakthroughs and advancements in genetic science. These markers are specially chosen for their relevance to tracing ancestry, so that we can provide you with the most statistically likely estimation of your heritage.
<div class="accordion">
<div onClick="app.handleAccordionClick(this)" class="flex-center flex-vertical">
<div class="whole py1 px2 text-blue flex-space-between">
<h5>Accordion</h5>
<span>▼</span>
</div>
<div class="accordion-contents whole">
<!-- contents of your accordion goes here, feel free to delete these p elements -->
<p>CRI Genetics has a unique approach to genealogical testing. We are an advanced team led by a professional molecular geneticist who has been studying DNA for over 35 years with the help of Nobel Prize winning scientists. At CRI Genetics, we have the education, tools, and skills to provide you the most accurate estimation of your BioGeographical Ancestry.</p>
<p>We combine Genetics with Anthropology to trace the migrations of the human race. When we test your DNA against the samples from around the globe, we can figure out where you fit in the rich history of our species.</p>
<p>Our tests examine 642,824 specific markers across your entire genome. These markers are hand-picked based on the latest breakthroughs and advancements in genetic science. These markers are specially chosen for their relevance to tracing ancestry, so that we can provide you with the most statistically likely estimation of your heritage.</p>
</div>
</div>
</div>
<div class="progress-labels whole flex-space-between">
<data class="h6">Progress</data>
<data class="h6">33%</data>
</div>
<progress value="33" max="100"></progress>
<div class="progress-labels whole flex-space-between">
<data class="h6">Progress</data>
<data class="h6">33%</data>
</div>
<progress value="33" max="100"></progress>
this section coming soon
Carousel section coming soon
Slideshow
<div class="nucleotide-slideshow">
<div>
<!-- do whatever you want in here -->
<h2 class="p3 bg-blue4">slide1</h2>
</div>
<div>
<h2 class="p3 bg-aqua4">slide2</h2>
</div>
<div>
<h2 class="p3 bg-red4">slide3</h2>
</div>
<div>
<h2 class="p3 bg-neon-yellow">slide4</h2>
</div>
<div>
<h2 class="p3 bg-green4">slide5</h2>
</div>
</div>
Combine elements together to make more complex pieces of UI
| Account | Due Date | Amount | Period |
|---|---|---|---|
| Visa - 3412 | 04/01/2016 | $1,190 | 03/01/2016 - 03/31/2016 |
| Visa - 6076 | 03/01/2016 | $2,443 | 02/01/2016 - 02/29/2016 |
| Corporate AMEX | 03/01/2016 | $1,181 | 02/01/2016 - 02/29/2016 |
| Visa - 3412 | 02/01/2016 | $842 | 01/01/2016 - 01/31/2016 |
use the <dialog> element to make messages
<dialog class="error" open>This is an error message</dialog><dialog class="error" open>This is a warning message</dialog><dialog class="error" open>This is a danger message</dialog><dialog class="success" open>This is an success message</dialog>Click the button below to see how modals work in Nucleotide.
<span class="modal m-auto" onClick="app.handleModalOpen(this)">
<button class="modal-button">modal button</button>
<div class="modal-content">
<!-- starting here, things are optional -->
<div class="flex-center h100">
<div class="bg-white p2">
<h2 class="whole">Nice!</h2>
<br/>
<p>Well... Here's a basic modal you can use later. I hope you like it</p>
<hr class="my2">
<div class="flex-end">
<button class="btn3" onClick="app.handleModalClose(this)">Cancel</button>
<button class="ml1" onClick="app.handleModalClose(this)">OK</button>
</div>
</div>
</div>
<!-- this is where the optional stuff ends -->
</div>
</span>
In this UI Kit we give classNames to parent elements to get them to take shape using CSS Grid and Flexbox.
display: grid;. Use grid to make your broad strokes, designing larger chunks of your layouts<div class="three-columns bg-aqua3 p2 gap1">
<div class="bg-aqua4 p1">
1
</div>
<div class="bg-aqua4 p1">
2
</div>
<div class="bg-aqua4 p1">
3
</div>
</div>
If you need more than 12 columns take the time to learn CSS Grid.
display: flex;. Use these to control the alignment and direction of items in the cells of your grid layout.<div class="three-columns
bg-green3
p2
gap1
mt1">
<div class=" bg-green4
p1
flex">
.flex</div>
<div class="bg-green4 p1 flex-center">
.flex-center
</div>
<div class="bg-green4 p1 flex-end">
.flex-end
</div>
</div>
You will use this a lot. It centers content in your flex-containers vertically and horizontally with one easy className
Use this if you want to use flex-box and need things to align vertically
combine these classes to center align vertically
Use this to distribute elements evenly across a parent element, adding "space-between" each element
I haven't found a reason to use this yet but it's here.
I haven't found a reason to use this either but it's also here.
Float is dead! Use this to push elements to the right.
If you can't achieve what you're trying to do with these classNames, please take the time to learn Flexbox
Combine grid classes, flex classes, and responsive breakpoints to create a responsive layout without ever leaving your markup...
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<label>Example</label>
<div class="one-column md-two-columns">
<div>
<div class="nucleotide-slideshow">
<div>
<!-- do whatever you want in here -->
<h2 class="px3 py2 bg-blue3">slide1</h2>
</div>
<div>
<h2 class="px3 py2 bg-aqua4">slide2</h2>
</div>
<div>
<h2 class="px3 py2 bg-red4">slide3</h2>
</div>
<div>
<h2 class="px3 py2 bg-neon-yellow">slide4</h2>
</div>
<div>
<h2 class="px3 py2 bg-green4">slide5</h2>
</div>
</div>
</div>
<div class="md-pl3">
<div class="flex-vertical">
<h3 class="mt1 md-mt-none">The Future of Telemedicine is Here!</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<div class="whole mt2">
<button class="whole md-width-auto">Learn More</button>
</div>
</div>
</div>
</div>
<section>
<label class="text-center whole">sample section</label>
<div class="one-column lg-two-columns lg-gap4">
<div class="flex-center flex-vertical xl-pl4">
<div class="sm-half lg-whole">
<h2>Help us improve.</h2>
<p>We value your opinion and are always looking for ways to enhance our services to provide the best possible customer experience. Click here to fill out a brief 2 minute survey and let us know how we’re doing and how we can improve.</p>
<a href="" class="whole md-flex-end "><button class="mt1 bg-marketing-pink whole md-width-auto">Take a survey</button></a>
</div>
</div>
<span class="meowbert CS height5 lg-height6 order-1 lg-order1 sm-mx-2 lg-mx-none"></span>
</div>
</section>