<!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%;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
