Core

Logos-Branding   

Inrupt

Solid

Copy
Edit
<!-- components/Core/Logos-Branding.php --> <h4>Inrupt</h4> <section class="logos"> <div class="logo logo__item"><img src="/atomic-core/img/inrupt.svg" /></div> <div class="logo logo__item--primary-color"><img src="/atomic-core/img/inrupt-white.svg" /></div> </section> <h4>Solid</h4> <section class="logos"> <div class="logo logo__item"><img class="logo-small" src="/atomic-core/img/solid.svg" /></div> <div class="logo logo__item--primary-color"><img class="logo-small" src="/atomic-core/img/solid-white.svg" /></div> </section>
Copy
Copy
Edit
/* scss/Core/_Logos-Branding.scss */ .logo__item { display: flex; width: 50%; &--primary-color { background: $primary-color; } } .logos { display: flex; justify-content: space-around; .logo { max-width: 45%; width: 100%; display: flex; align-items: center; padding-bottom: 2em; > img { width: 100%; height: 100%; padding-bottom: 2em; &.logo-small { width: 200px; margin: 0 auto; margin-top: 1rem; } } } }
Copy
Edit
/* js/Logos-Branding.js */

Colors   

Primary Colors

Royal Lavendar

#7C4DFF

Accent Colors

Deep Sky Blue

#01C9EA

Cerulean

#18A9E6

Geyser

#DAE0E6

Catalina Blue

#083575

Medium Spring Green

#01FAAB

Utility Colors

Warning Orange

#FFA600

Error Red

#D0021B

Gradients

Three-Tone Gradient

#7C4DFF-#18A9E6-#01C9EA

Copy
Edit
<!-- components/Core/Colors.php --> <h4> Primary Colors <h4> <section class="swatch-wrap"> <div class="swatch swatch__item--primary"> <p class="swatch__item__title">Royal Lavendar</p> <p class="swatch__item__value">#7C4DFF</p> </div> </section> <h4> Accent Colors <h4> <section class="grid grid__three-column"> <div class="swatch swatch__item--secondary"> <p class="swatch__item__title">Deep Sky Blue</p> <p class="swatch__item__value">#01C9EA</p> </div> <div class="swatch swatch__item--tertiary"> <p class="swatch__item__title">Cerulean</p> <p class="swatch__item__value">#18A9E6</p> </div> <div class="swatch swatch__item--tertiary-1"> <p class="swatch__item__title">Geyser</p> <p class="swatch__item__value">#DAE0E6</p> </div> <div class="swatch swatch__item--tertiary-2"> <p class="swatch__item__title">Catalina Blue</p> <p class="swatch__item__value">#083575</p> </div> <div class="swatch swatch__item--tertiary-3"> <p class="swatch__item__title">Medium Spring Green</p> <p class="swatch__item__value">#01FAAB</p> </div> </section> <h4> Utility Colors <h4> <section class="grid grid__three-column"> <div class="swatch swatch__item--warning"> <p class="swatch__item__title">Warning Orange</p> <p class="swatch__item__value">#FFA600</p> </div> <div class="swatch swatch__item--error"> <p class="swatch__item__title">Error Red</p> <p class="swatch__item__value">#D0021B</p> </div> </section> <h4> Gradients </h4> <section class="swatch-wrap"> <div class="swatch swatch__item--primary-gradient"> <p class="swatch__item__title">Three-Tone Gradient</p> <p class="swatch__item__value">#7C4DFF-#18A9E6-#01C9EA</p> </div> </section>
Copy
Copy
Edit
/* scss/Core/_Colors.scss */ .swatch-wrap { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; } .swatch { display: flex; flex-wrap: wrap; align-content: center; justify-content: space-around; padding: 1em; height: 250px; flex-basis: 30%; border-radius: 4px; margin: 1em; &__item { display: flex; flex-wrap: wrap; align-content: center; justify-content: space-around; padding: 1em; height: 300px; flex-basis: 33%; border-radius: 4px; &__title { color: #fff; width: 100%; text-align: center; line-height: 1; margin: 0; text-transform: uppercase; font-weight: 700; } &__value { font-weight: 300; color: #fff; width: 100%; text-align: center; line-height: 1; margin: 0; text-transform: uppercase; } &--primary { background-color: $primary-color; } &--secondary { background-color: $secondary-color; } &--tertiary { background-color: $tertiary-color; } &--tertiary-1 { background-color: $tertiary-color-1; } &--tertiary-2{ background-color: $tertiary-color-2; } &--tertiary-3 { background-color: $tertiary-color-3; } &--warning { background-color: $warning-color; } &--error { background-color: $error-color; } /* Gradients */ &--primary-gradient { @include linear-gradient(to right, $primary-color 0%, $tertiary-color 50%, $secondary-color 100%); } } }
Copy
Edit
/* js/Colors.js */

Typography   

Raleway

Primary Typography - Regular, Bold


Aa Bb Cc Dd Ee Ff 1 2 3 4 5 6 7 8 9 0 ” @ $ ? !

Aa Bb Cc Dd Ee Ff 1 2 3 4 5 6 7 8 9 0 ” @ $ ? !

Roboto

Secondary Typography - Light, Regular, Bold


Aa Bb Cc Dd Ee Ff 1 2 3 4 5 6 7 8 9 0 ” @ $ ? !

Aa Bb Cc Dd Ee Ff 1 2 3 4 5 6 7 8 9 0 ” @ $ ? !

Aa Bb Cc Dd Ee Ff 1 2 3 4 5 6 7 8 9 0 ” @ $ ? !

Example Typography Styles

h1 Heading - Raleway - Bold

h2 Heading - Raleway - Light

h3 Heading - Roboto - Light

h4 Heading - Raleway - Bold

h5 Heading - Raleway - Bold
h6 Heading - Roboto - Bold

lorem ipsum dolor sit amet. This is a Link.

lorem ipsum dolor sit amet.

  • lorem ipsum unordered list item.
  • lorem ipsum unordered list item.
  • lorem ipsum unordered list item.
  1. lorem ipsum ordered list item.
  2. lorem ipsum ordered list item.
  3. lorem ipsum ordered list item.
this is small text.
Copy
Edit
<!-- components/Core/Typography.php --> <div class="grid grid__two-column demo"> <section class="text-raleway card"> <h5 class="text-raleway__title">Raleway</h5> <p class="text-raleway__sub-title">Primary Typography - Regular, Bold </p> <br/> <p>Aa Bb Cc Dd Ee Ff 1 2 3 4 5 6 7 8 9 0 ” @ $ ? !</p> <p class="text-raleway--bold-text">Aa Bb Cc Dd Ee Ff 1 2 3 4 5 6 7 8 9 0 ” @ $ ? !</p> </section> <section class="text-roboto card"> <h5 class="text-roboto__title">Roboto</h5> <p class="text-roboto__sub-title">Secondary Typography - Light, Regular, Bold</p> <br/> <p class="text-roboto--light-text">Aa Bb Cc Dd Ee Ff 1 2 3 4 5 6 7 8 9 0 ” @ $ ? !</p> <p>Aa Bb Cc Dd Ee Ff 1 2 3 4 5 6 7 8 9 0 ” @ $ ? !</p> <p class="text-raleway--bold-text">Aa Bb Cc Dd Ee Ff 1 2 3 4 5 6 7 8 9 0 ” @ $ ? !</p> </section> </div> <h4>Example Typography Styles</h4> <h1>h1 Heading - Raleway - Bold </h1> <h2>h2 Heading - Raleway - Light </h2> <h3>h3 Heading - Roboto - Light </h3> <h4>h4 Heading - Raleway - Bold </h4> <h5>h5 Heading - Raleway - Bold </h5> <h6>h6 Heading - Roboto - Bold </h6> <p>lorem ipsum dolor sit amet. <a href="">This is a Link.</a></p> <p>lorem <em>ipsum</em> dolor <b>sit</b> amet.</p> <ul> <li>lorem ipsum unordered list item.</li> <li>lorem ipsum unordered list item.</li> <li>lorem ipsum unordered list item.</li> </ul> <ol> <li>lorem ipsum ordered list item.</li> <li>lorem ipsum ordered list item.</li> <li>lorem ipsum ordered list item.</li> </ol> <small>this is small text.</small>
Copy
Copy
Edit
/* scss/Core/_Typography.scss */ .text-raleway { font-family: $primary-font-stack; padding-bottom: 1em; &__title { text-transform: uppercase; line-height: 1; margin-bottom: 0.2em; font-size: 1.2em; } &__sub-title { font-weight: 300; font-size: 0.8em; color: darken($tertiary-color-1, 15%); line-height: 1; margin: 0; } &--bold-text { font-weight: 700; } } .text-roboto { font-family: $secondary-font-stack; font-weight: 400; padding-bottom: 1em; &__title { text-transform: uppercase; line-height: 1; margin-bottom: 0.2em; font-size: 1.2em; } &__sub-title { font-weight: 300; font-size: 0.8em; color: darken($tertiary-color-1, 15%); line-height: 1; margin: 0; } &--bold-text { font-weight: 700; } &--light-text { font-weight: 300; } } /* Default Color overrides - White Text */ .title--white, .text--white { color: #ffffff; } h1, h2, h3, h4, h5, h6, p, em, b, small { color: $primary-text-color; } h1 { font-family: $primary-font-stack; font-weight: 700; font-size: 2.5rem; &.title--white { color: #ffffff; } } h2 { font-family: $primary-font-stack; font-weight: 300; font-size: 2rem; } h3 { font-family: $secondary-font-stack; font-weight: 300; font-size: 1.9rem; } h4 { font-family: $primary-font-stack; text-transform: uppercase; font-weight: 900; color: $neon-blue; font-size: 1.25rem; } h5 { font-family: $primary-font-stack; text-transform: uppercase; font-size: 1rem; color: $concord-gray; } h6 { font-family: $secondary-font-stack; text-transform: uppercase; font-size: 0.8rem; } h1, h2, h3, h5, h6 { a { text-decoration: none; } } small { font-family: $secondary-font-stack; font-size: 0.625rem; font-weight: 300; } em { font-style: italic; } b { font-weight: 700; } p { font-family: $secondary-font-stack; font-size: 1em; line-height: 1.2; font-weight: 300; color: $steel; } a { font-family: $secondary-font-stack; color: $primary-color; text-decoration: underline; } ul, ol { color: $primary-text-color; li { font-family: $secondary-font-stack; font-size: 1em; line-height: 1.6; font-weight: 300; } }
Copy
Edit
/* js/Typography.js */

Grid   

1
2
3
4
1 (spans 2 columns)
2
3
1
2 (spans 3 columns)
1 (spans 4 columns)
Copy
Edit
<!-- components/Core/Grid.php --> <section class="ids-container__four-column grid demoContainer"> <div class="demoBlock item">1</div> <div class="demoBlock item">2</div> <div class="demoBlock item">3</div> <div class="demoBlock item">4</div> </section> <section class="ids-container__four-column grid demoContainer"> <div class="demoBlock item__span-2-columns">1 (spans 2 columns)</div> <div class="demoBlock item">2</div> <div class="demoBlock item">3</div> </section> <section class="ids-container__four-column grid demoContainer"> <div class="demoBlock item ">1</div> <div class="demoBlock item__span-3-columns">2 (spans 3 columns)</div> </section> <section class="ids-container__four-column grid demoContainer"> <div class="demoBlock item__span-4-columns">1 (spans 4 columns)</div> </section>
Copy
Copy
Edit
/* scss/Core/_Grid.scss */ /* Grid System */ .grid, .ids-container { display: grid; &__two-column { grid-template-columns: 1fr 1fr; } &__three-column { grid-template-columns: 1fr 1fr 1fr; } &__four-column { grid-template-columns: 1fr 1fr 1fr 1fr; } &__five-column { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .item { &__span-2-columns { grid-column: span 2; } &__span-3-columns { grid-column: span 3; } &__span-4-columns { grid-column: span 4; } &__span-5-columns { grid-column: span 5; } } } /* Demo Styles for Style Guide */ .grid__two-column.demo { padding: 1em 0; grid-gap: 1%; grid-row-gap: 1em; } .demoBlock { background: $primary-color; color: #fff; margin: 1em; justify-self: stretch; line-height: 5; text-align: center; @include borderRadius(2px); } .demoContainer { background: rgba($tertiary-color-2, 0.05); }
Copy
Edit
/* js/Grid.js */