Codemo Digital Nomad version 0.7.4

Codemo Digital Nomad

Style Guide

Codemo Digital Nomad

The purpose of this style guide is to provide a set of rules for Codemo web site.
This guide does not include any extensions, just the default items.

Color Palette

Brand colors with HSL lightness default value 50% and subtracted values for darker colors.

  • primary
    #9a8b60
    50%25%
  • 35%20%
  • 25%12%
  • 12%0%
  • secondary
    #858585
    50%25%
  • 35%20%
  • 25%12%
  • 12%0%
  • dark
    #131313
    50%75%
  • 35%50%
  • 25%25%
  • 12%0%

Gradients

Transitions between two or more specified colors.

  • bg-linear
    #9a8b60
    #4d4630
  • bg-linear
    #9a8b60
    #4d4630
  • bg-radial
    #858585
  • bg-secondary
    #858585
    #131313
  • bg-linear2
    #858585
    #131313

Textures

Re-usable image file or repeating patterns.

  • bg-dots
    #858585
    #131313
  • bg-dots
    #858585
    #131313
  • bg-grid-5
    #9a8b60
    #4d4630
  • bg-grid-10
    #858585
    #131313
  • bg-lines
    #858585
    #131313
  • bg-stripes
    #858585
    #131313

Layouts

Containers, sections, grid and flex, tables.

Grid

class="grid"

div 1
div 2
div 3
div 4

class="grid container"

div 1
div 2
div 3
div 4

class="grid space"

div 1
div 2
div 3
div 4

Flexbox Grid

flexbox grid block
flexbox grid block
flexbox grid block

Responsive Table

Browser Sessions Percentage
Chrome 9,562 68.81%
Firefox 2,403 17.29%
Safari 1,089 2.63%

Components

Accordion, card, carousel, notification, pagination.

Aspect-Ratio

Example of aspect-ratio property that affects only the height of the elements.

1/1
0.5
1
1/0.5
16/9

Tabs

Content for Tab Cover
Content for Tab #1
Content for Tab #2
Content for Tab #3

Notifications

Information

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et tenetur cupiditate provident repellendus suscipit soluta omnis ratione a autem ex laudantium facilis voluptatum dolorem error nemo consequatur facere veniam.

Error

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et tenetur cupiditate provident repellendus suscipit soluta omnis ratione a autem ex laudantium facilis voluptatum dolorem error nemo consequatur facere veniam.

Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et tenetur cupiditate provident repellendus suscipit soluta omnis ratione a autem ex laudantium facilis voluptatum dolorem error nemo consequatur facere veniam.

Warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et tenetur cupiditate provident repellendus suscipit soluta omnis ratione a autem ex laudantium facilis voluptatum dolorem error nemo consequatur facere veniam.

Iconography

Scalable vectors Icons that can be customized with CSS

icon-card
icon-chevron
icon-code
icon-color
icon-build
icon-css
icon-edit
icon-git
icon-graphic
icon-html
icon-js
icon-layout-grid
icon-layout-list
icon-responsive
icon-search
icon-settings
icon-share
icon-table
icon-template
icon-themes
icon-tree
icon-typo
icon-updir
icon-video
icon-view2
icon-view

Typography

Typeface and fonts used for text elements.

Aa

Nunito-Sans

Font-weight 300
bold 16px
Text for your project
Regular 16px
Some text for your project
Light 16px

Aa

system-ui

Simple regular text paragraph
bold 16px
Text for your project
Regular 16px
Some text for your project
Light 16px

Aa

serif

Simple regular text paragraph
bold 16px
Text for your project
Regular 16px
Some text for your project
Light 16px

Aa

monospace

Simple regular text paragraph
bold 16px
Text for your project
Regular 16px
Some text for your project
Light 16px

Aa

emoji

Using font-variant-emoji
size 16px
Normal: ☎📧📅📁📝📑☕
Text: 💡🎨📷🖼📋🔔◕◷ ⥅
Emoji: 🔒📱🖥🎮🎲🎯☁☀
Unicode: ☑ ☒ ⮿ ⮽ ⮾ ⯑ 🡪 🡭

Heading 1 Link

Heading 2 Link

Heading 3 Link

Heading 4 Link

Heading 5 Link
Heading 6 Link

A Link inside a paragraph.

<em> Emphasized Text italic

"light-text" class light text

"muted" class muted text

<abbr> Abbreviation

<address> contact information.

<code> fragment of computer code

<dfn> a term to be defined

<del> text deleted from a document.

<ins> text inserted into a document.

<kbd> keyboard k or any other entry device.

<samp> a sample output from a computer program.

<small> Small text

<strong> Strong Text bold

<sub> subscript -1 sub

<sup> superscript +1 sup

<time> include the datetime attribute e.g.

<mark> text marked or highlighted for reference or notation.

<rt> explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.

<var> a variable in programming or mathematical expression.

<var> underline

<blockquote> Blockquote a longer quotation

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

—Aldous Huxley, Brave New World

<q> short quotation
Build a future where people live in harmony with nature.

<pre> Preformatted Text element

<article> 
<h3>Flexbox Grid</h3> 
<div class="flexbox-grid"> 
  <div> flexbox grid block </div> 
  <div> flexbox grid block </div> 
  <div> flexbox grid block </div> 
  </div> 
</article>

If you have to display reserved characters such as <, >, &, and " within the <pre> tag, the characters must be escaped using their respective character references.

Form elements

Style common form elements with CSS.

Input Radio
Input checkbox
Input Switch

Buttons

Responsive Form