Simple color-schemes with SCSS maps (example)

In this example below you will see how to do a Simple color-schemes with SCSS maps (example) with some HTML / CSS and Javascript

This is just a usecase example for this pen: http://codepen.io/pixelass/pen/roLBF

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

<head>
  <meta charset="UTF-8">
  <title>Simple color-schemes with SCSS maps (example)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<h1>Simple color-schemes with SCSS maps </h1>
<p>See my original pen  <a href="https://codepen.io/pixelass/pen/roLBF" target="_blank">here</a><br/>This is just a usecase example.</p>
<p>Switch the theme name in line 36 of the SCSS file to see how simple this is.
  <pre>$theme: $shades-of-gray;</pre>
  <pre>$theme: $rainbow;</pre>
  <pre>$theme: $minimal;</pre>
</p>
<div class="example">
  <header class="header">This is the header<br/><br/><br/><br/></header>
  <nav class="nav">This is the navigation
    <ul class="list">
      <li class="item">List item 1</li>
      <li class="item">List item 2</li>
      <li class="item">List item 3</li>
    </ul>
  </nav>
  <main class="main">This is the  main content area<br/><br/><br/>
    <section class="section">This is a section<br/><br/><br/>
      <article class="article">This is an article 
        <header class="header">This is an article header</header>
        <p class="copy">This is a copy text<br/><br/><br/><br/><br/></p>
        <footer class="footer">This is an article footer</footer>
      </article>
      <article class="article">This is an article 
        <header class="header">This is an article header</header>
        <p class="copy">This is a copy text<br/><br/><br/><br/><br/></p>
        <footer class="footer">This is an article footer        </footer>
      </article>
    </section>
  </main>
  <sidebar class="sidebar">This is the sidebar<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></sidebar>
  <footer class="footer">This is the footer<br/><br/><br/><br/></footer>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pixelass/simple-color-schemes-with-scss-maps-example-ndguj */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
.header {
  background: #f0f;
}

.nav {
  background: #f00;
}

.main {
  background: #fa0;
}

.sidebar {
  background: #ff0;
}

.article {
  background: #0f0;
}

.section {
  background: #0a0;
}

.copy {
  background: #0af;
}

.list {
  background: #0ff;
}

.item {
  background: #00f;
}

.footer {
  background: #a0f;
}

body {
  margin: 0;
  padding: 2em;
  font-family: 'Open sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
}

.example * {
  margin: 1%;
}

p {
  line-height: 1.4;
  margin: 1em 0;
}

h1 {
  font-size: 2em;
  font-weight: 400;
}

.sidebar,
.main {
  display: inline-block;
  vertical-align: top;
}

.main {
  width: 68%;
}

.sidebar {
  width: 28%;
}

Comments