Pattern Library - Colour Palette

In this example below you will see how to do a Pattern Library - Colour Palette with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by sugarskill, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sugarskill ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pattern Library - Colour Palette</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1 class='ui-title'>Colour Palette</h1>
<article class='ui-colours'>
  <dl>
    <dt>
      <code>$black</code>
    </dt>
    <dd style='background-color: #171717'>#171717</dd>
  </dl>
  <dl>
    <dt>
      <code>$dark</code>
    </dt>
    <dd style='background-color: #2d2d2d'>#2d2d2d</dd>
  </dl>
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>
  <dl>
    <dt>
      <code>$white</code>
    </dt>
    <dd style='background-color: #fff; color: #999; box-shadow: inset 0 0 1px #999;'>#fff</dd>
  </dl>
</article>
<article class='ui-colours'>
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>
  <dl>
    <dt>
      <code>$page-alt</code>
    </dt>
    <dd style='background-color: #f0f0f0; color: #999;'>#f0f0f0</dd>
  </dl>
  <dl>
    <dt>
      <code>$page-colour</code>
    </dt>
    <dd style='background-color: #f7f7f7; color: #999;'>#f7f7f7</dd>
  </dl>
</article>
<article class='ui-colours'>
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>
  <dl>
    <dt>
      <code>$block-alt</code>
    </dt>
    <dd style='background-color: #454545'>#454545</dd>
  </dl>
  <dl>
    <dt>
      <code>$block-colour</code>
    </dt>
    <dd style='background-color: #e8e8e8'>#e8e8e8</dd>
  </dl>
</article>
<article class='ui-colours'>
  <dl>
    <dt>$borders</dt>
    <dd style='background-color: #dedede'>#dedede</dd>
  </dl>
  <dl>
    <dt>$borders-alt</dt>
    <dd style='background-color: #454545'>#454545</dd>
  </dl>
  <dl>
    <dt>$conversion-colour</dt>
    <dd style='background-color: #65b319'>#65b319</dd>
  </dl>
  <dl>
    <dt>$delete-colour</dt>
    <dd style='background-color: #e56e6e'>#e56e6e</dd>
  </dl>
  <dl>
    <dt>$error-colour</dt>
    <dd style='background-color: #e56e6e'>#e56e6e</dd>
  </dl>
  <dl>
    <dt>$error-background</dt>
    <dd style='background-color: #fff4f4'>#fff4f4</dd>
  </dl>
  <dl>
    <dt>$draft-colour</dt>
    <dd style='background-color: #ea9006'>#ea9006</dd>
  </dl>
  <dl>
    <dt>$icon-grey</dt>
    <dd style='background-color: #c6c6c6'>#c6c6c6</dd>
  </dl>
  <dl>
    <dt>$icon-light-grey</dt>
    <dd style='background-color: #e8e8e8'>#e8e8e8</dd>
  </dl>
  <dl>
    <dt>$header-dropdown</dt>
    <dd style='background-color: #202020'>#202020</dd>
  </dl>
</article>
<article class='ui-colours'>
  <dl>
    <dt>$home</dt>
    <dd style='background-color: #565656'>#565656</dd>
  </dl>
  <dl>
    <dt>$destinations</dt>
    <dd style='background-color: #225069'>#225069</dd>
  </dl>
  <dl>
    <dt>$things</dt>
    <dd style='background-color: #2c697b'>#2c697b</dd>
  </dl>
  <dl>
    <dt>$facts</dt>
    <dd style='background-color: #4a768c'>#4a768c</dd>
  </dl>
  <dl>
    <dt>$trips</dt>
    <dd style='background-color: #205876'>#205876</dd>
  </dl>
  <dl>
    <dt>$getting-here</dt>
    <dd style='background-color: #36585d'>#36585d</dd>
  </dl>
  <dl>
    <dt>$getting-around</dt>
    <dd style='background-color: #007776'>#007776</dd>
  </dl>
  <dl>
    <dt>$accommodation</dt>
    <dd style='background-color: #42666b'>#42666b</dd>
  </dl>
</article>
<article class='ui-colours'>
  <dl>
    <dt>$borders</dt>
    <dd style='background-color: #dedede'>#dedede</dd>
  </dl>
</article>
<article class='ui-colours'>
  <dl>
    <dt>$map-water</dt>
    <dd style='background-color: #bee1f8'>#bee1f8</dd>
  </dl>
  <dl>
    <dt>$map-street</dt>
    <dd style='background-color: #d1cabe'>#d1cabe</dd>
  </dl>
  <dl>
    <dt>$map-line</dt>
    <dd style='background-color: #aaa'>#aaa</dd>
  </dl>
  <dl>
    <dt>$map-path-primary-color</dt>
    <dd style='background-color: #4d4d4d'>#4d4d4d</dd>
  </dl>
  <dl>
    <dt>$map-path-secondary-color</dt>
    <dd style='background-color: #fc7244'>#fc7244</dd>
  </dl>
</article>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/sugarskill/pattern-library-colour-palette-qPKWEx */
@import url("https://fonts.googleapis.com/css?family=Bowlby+One+SC|Yantramanav");
body {
  font-family: proxima-nova, sans-serif;
  font-size: 16px;
  margin: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ui-title {
  font-size: 32px;
}

article {
  display: flex;
}
article.existing {
  padding: 20px;
  border-radius: 5px;
  background: #f0f0f0;
  margin: 0 -10px 20px;
}
article.existing a, article.existing button, article.existing input {
  margin-top: 0 !important;
  margin-bottom: 5px !important;
}

.ui-colours article {
  margin: 0 -5px;
}
.ui-colours dl {
  margin: 0 5px;
  width: 120px;
}
.ui-colours dt {
  font-size: 13px;
  font-weight: normal;
  margin: 0 0 10px;
  text-align: center;
  margin-bottom: 10px;
}
.ui-colours dt code {
  display: block;
  border: 1px solid #dedede;
  border-radius: 5px;
}
.ui-colours dd {
  padding: 0;
  margin: 0 0 20px;
  padding: 25px 10px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
}

Comments