Style Guideline

In this example below you will see how to do a Style Guideline with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dplum128, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dplum128 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>29. Style Guideline</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="header"><img src="" alt=""/></div>
<div class="content content_grey">
  <div class="max_width">
    <h6>STYLE GUIDELINE</h6>
    <h1>網頁視覺引導-30px 大標題</h1>
    <h1 class="small_english">English Style guideline for h1 title</h1>
    <h2>網頁視覺引導-20px 中標題</h2>
    <h2 class="small_english">English Style guideline for h2 title</h2>
    <div class="title_hr"></div>
    <h3>網頁視覺引導-18px 表頭字</h3>
    <h3 class="small_english">English Style guideline for h3 title</h3>
    <h4>網頁視覺引導-16px 小標題</h4>
    <h4 class="small_english">English Style guideline for h4 title</h4>
    <h5 class="navline">網頁視覺引導-15px 導覽字</h5>
    <h5 class="navline">網頁視覺引導-15px 導覽字</h5>
    <h5 class="navline small_english">English Style guideline for h5 title</h5>
    <p>網頁視覺引導-16px 內文</p>
    <p class="small_english">English Style guideline for p title</p>
    <div class="content_hr"></div>
    <hr/>
    <h6>VI COLOR</h6>
    <div class="color_chip">
      <div class="color_tag">RBG(64,66,73)</div>
      <div class="color_block color_block_grey">Grey</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(15,15,15)</div>
      <div class="color_block color_block_black">Black</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(50,175,194)</div>
      <div class="color_block color_block_hrBlue">hr</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(209,248,248)</div>
      <div class="color_block color_block_lightBlue">Light</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(152,223,223)</div>
      <div class="color_block color_block_darlBlue">Dark</div>
    </div>
    <h6>BOX EXAMPLE</h6>
    <div class="box box_lightBlue">框框範例</div>
    <div class="box box_darkBlue">框框範例</div>
  </div>
</div>
<!-- ---------------------- -->
<div class="content content_white">
  <div class="max_width">
    <h6>STYLE GUIDELINE</h6>
    <h1>網頁視覺引導-30px 大標題</h1>
    <h1 class="small_english">English Style guideline for h1 title</h1>
    <h2>網頁視覺引導-20px 中標題</h2>
    <h2 class="small_english">English Style guideline for h2 title</h2>
    <div class="title_hr"></div>
    <h3>網頁視覺引導-18px 表頭字</h3>
    <h3 class="small_english">English Style guideline for h3 title</h3>
    <h4>網頁視覺引導-16px 小標題</h4>
    <h4 class="small_english">English Style guideline for h4 title</h4>
    <h5 class="navline">網頁視覺引導-15px 導覽字</h5>
    <h5 class="navline">網頁視覺引導-15px 導覽字</h5>
    <h5 class="navline small_english">English Style guideline for h5 title</h5>
    <p>網頁視覺引導-16px 內文</p>
    <p class="small_english">English Style guideline for p title</p>
    <div class="content_hr"></div>
    <hr/>
    <h6>VI COLOR</h6>
    <div class="color_chip">
      <div class="color_tag">RBG(64,66,73)</div>
      <div class="color_block color_block_grey">Grey</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(15,15,15)</div>
      <div class="color_block color_block_black">Black</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(50,175,194)</div>
      <div class="color_block color_block_hrBlue">hr</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(209,248,248)</div>
      <div class="color_block color_block_lightBlue">Light</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(152,223,223)</div>
      <div class="color_block color_block_darlBlue">Dark</div>
    </div>
    <h6>BOX EXAMPLE</h6>
    <div class="box box_lightBlue">框框範例</div>
    <div class="box box_darkBlue">框框範例</div>
  </div>
</div>
<div class="content content_blue">
  <div class="max_width">
    <h6>STYLE GUIDELINE</h6>
    <h1>網頁視覺引導-30px 大標題</h1>
    <h1 class="small_english">English Style guideline for h1 title</h1>
    <h2>網頁視覺引導-20px 中標題</h2>
    <h2 class="small_english">English Style guideline for h2 title</h2>
    <div class="title_hr"></div>
    <h3>網頁視覺引導-18px 表頭字</h3>
    <h3 class="small_english">English Style guideline for h3 title</h3>
    <h4>網頁視覺引導-16px 小標題</h4>
    <h4 class="small_english">English Style guideline for h4 title</h4>
    <h5 class="navline">網頁視覺引導-15px 導覽字</h5>
    <h5 class="navline">網頁視覺引導-15px 導覽字</h5>
    <h5 class="navline small_english">English Style guideline for h5 title</h5>
    <p>網頁視覺引導-16px 內文</p>
    <p class="small_english">English Style guideline for p title</p>
    <div class="content_hr"></div>
    <hr/>
    <h6>VI COLOR</h6>
    <div class="color_chip">
      <div class="color_tag">RBG(64,66,73)</div>
      <div class="color_block color_block_grey">Grey</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(15,15,15)</div>
      <div class="color_block color_block_black">Black</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(50,175,194)</div>
      <div class="color_block color_block_hrBlue">hr</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(209,248,248)</div>
      <div class="color_block color_block_lightBlue">Light</div>
    </div>
    <div class="color_chip">
      <div class="color_tag">RBG(152,223,223)</div>
      <div class="color_block color_block_darlBlue">Dark</div>
    </div>
    <h6>BOX EXAMPLE</h6>
    <div class="box box_lightBlue">框框範例</div>
    <div class="box box_darkBlue">框框範例</div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dplum128/style-guideline-xgmOaj */
@charset "UTF-8";
* {
  position: relation;
}

html, body {
  margin: 0;
  padding: 0;
}

.max_width {
  max-width: 890px;
  margin-left: auto;
  margin-right: auto;
}

.content {
  font-family: "Roboto Condensed", Microsoft JhengHei, "微軟正黑體";
  padding: 35px;
  margin: 10px 0;
}
.content h6 {
  margin-top: 10px;
  font-weight: bold;
  font-size: 15px;
}
.content .title_hr {
  border: solid 1px #32afc2;
  margin: 2px auto 12px auto;
}
.content .content_hr {
  border-top: solid 1px #32afc2;
  margin: 20px 5px;
}
.content .small_english {
  margin-top: -15px;
  margin-bottom: 15px;
}
.content h1 {
  font-size: 30px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 20px;
}
.content h1.small_english {
  font-size: 24px;
}
.content h2 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 0px;
}
.content h2.small_english {
  font-size: 18px;
  margin-top: 0px;
}
.content h3 {
  font-size: 18px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.content h3.small_english {
  font-size: 15px;
  margin-top: 0px;
}
.content h4 {
  font-size: 16px;
  font-weight: normal;
  margin-top: 20px;
  margin-bottom: 20px;
}
.content h4.small_english {
  font-size: 14px;
}
.content h5 {
  font-size: 15px;
  font-weight: normal;
  font-style: italic;
  display: inline-block;
  margin-top: 0px;
  margin-bottom: 0px;
}
.content h5:nth-of-type(n+2).navline::before {
  content: " > ";
  color: #0f0f0f;
}
.content h5.small_english {
  font-size: 12px;
}
.content p {
  font-size: 16px;
}
.content p.small_english {
  font-size: 14px;
}
.content .box {
  display: inline-block;
  box-sizing: border-box;
  padding: 5px 25px;
  margin-right: 14px;
  width: 162px;
  height: 150px;
  border-radius: 5px;
  text-align: center;
}
.content .box.box_lightBlue {
  background-color: #d1f8f8;
}
.content .box.box_darkBlue {
  background-color: #98dfdf;
}
.content .color_chip {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 10px;
}
.content .color_chip .color_block, .content .color_chip .color_tag {
  vertical-align: middle;
}
.content .color_chip .color_tag {
  width: 120px;
}
.content .color_chip .color_block {
  border: solid 2px #0f0f0f;
  text-align: center;
  width: 35px;
  height: 35px;
}
.content .color_chip .color_block.color_block_grey {
  background-color: #404249;
  color: #FFF;
}
.content .color_chip .color_block.color_block_black {
  background-color: #0f0f0f;
  color: #FFF;
}
.content .color_chip .color_block.color_block_hrBlue {
  background-color: #32afc2;
}
.content .color_chip .color_block.color_block_lightBlue {
  background-color: #d1f8f8;
}
.content .color_chip .color_block.color_block_darlBlue {
  background-color: #98dfdf;
}

.content_grey {
  background-color: #404249;
  color: #FFF;
}
.content_grey .small_english {
  color: #98dfdf;
}
.content_grey h1, .content_grey h2, .content_grey h3 {
  font-weight: normal;
}
.content_grey h5:nth-of-type(n+2).navline::before {
  color: #FFF;
}
.content_grey .box_lightBlue, .content_grey .box_darkBlue, .content_grey .color_block_lightBlue, .content_grey .color_block_darlBlue {
  color: #0f0f0f;
}

.content_white {
  background-color: #FFF;
  color: #0f0f0f;
}

.content_blue {
  background-color: #98dfdf;
}
.content_blue .box_darkBlue {
  border: solid 1px #FFF;
}

Comments