mirror of
https://github.com/ethauvin/kobalt-doc.git
synced 2025-04-25 03:57:11 -07:00
First commit
This commit is contained in:
Cedric Beust
commit
000dd83bb2
3 changed files with 379 additions and 0 deletions
247
css/side-menu.css
Normal file
247
css/side-menu.css
Normal file
|
|
@ -0,0 +1,247 @@
|
||||||
|
body {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-img-responsive {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add transition to containers so they can push in and out.
|
||||||
|
*/
|
||||||
|
#layout,
|
||||||
|
#menu,
|
||||||
|
.menu-link {
|
||||||
|
-webkit-transition: all 0.2s ease-out;
|
||||||
|
-moz-transition: all 0.2s ease-out;
|
||||||
|
-ms-transition: all 0.2s ease-out;
|
||||||
|
-o-transition: all 0.2s ease-out;
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
This is the parent `<div>` that contains the menu and the content area.
|
||||||
|
*/
|
||||||
|
#layout {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
#layout.active #menu {
|
||||||
|
left: 150px;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#layout.active .menu-link {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
The content `<div>` is where all your content goes.
|
||||||
|
*/
|
||||||
|
.content {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2em;
|
||||||
|
max-width: 800px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2.5em 2em 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.header h1 {
|
||||||
|
margin: 0.2em 0;
|
||||||
|
font-size: 3em;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
.header h2 {
|
||||||
|
font-weight: 300;
|
||||||
|
color: #ccc;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-subhead {
|
||||||
|
margin: 50px 0 20px 0;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
|
||||||
|
appears on the left side of the page.
|
||||||
|
*/
|
||||||
|
|
||||||
|
#menu {
|
||||||
|
margin-left: -150px; /* "#menu" width */
|
||||||
|
width: 150px;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1000; /* so the menu or its navicon stays above all content */
|
||||||
|
background: #191818;
|
||||||
|
overflow-y: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
All anchors inside the menu should be styled like this.
|
||||||
|
*/
|
||||||
|
#menu a {
|
||||||
|
color: #999;
|
||||||
|
border: none;
|
||||||
|
padding: 0.6em 0 0.6em 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Remove all background/borders, since we are applying them to #menu.
|
||||||
|
*/
|
||||||
|
#menu .pure-menu,
|
||||||
|
#menu .pure-menu ul {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add that light border to separate items into groups.
|
||||||
|
*/
|
||||||
|
#menu .pure-menu ul,
|
||||||
|
#menu .pure-menu .menu-item-divided {
|
||||||
|
border-top: 1px solid #333;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Change color of the anchor links on hover/focus.
|
||||||
|
*/
|
||||||
|
#menu .pure-menu li a:hover,
|
||||||
|
#menu .pure-menu li a:focus {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
This styles the selected menu item `<li>`.
|
||||||
|
*/
|
||||||
|
#menu .pure-menu-selected,
|
||||||
|
#menu .pure-menu-heading {
|
||||||
|
background: #1f8dd6;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
This styles a link within a selected menu item `<li>`.
|
||||||
|
*/
|
||||||
|
#menu .pure-menu-selected a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
This styles the menu heading.
|
||||||
|
*/
|
||||||
|
#menu .pure-menu-heading {
|
||||||
|
font-size: 110%;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
The button to open/close the Menu is custom-made and not part of Pure. Here's
|
||||||
|
how it works:
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
`.menu-link` represents the responsive menu toggle that shows/hides on
|
||||||
|
small screens.
|
||||||
|
*/
|
||||||
|
.menu-link {
|
||||||
|
position: fixed;
|
||||||
|
display: block; /* show this only on small screens */
|
||||||
|
top: 0;
|
||||||
|
left: 0; /* "#menu width" */
|
||||||
|
background: #000;
|
||||||
|
background: rgba(0,0,0,0.7);
|
||||||
|
font-size: 10px; /* change this value to increase/decrease button size */
|
||||||
|
z-index: 10;
|
||||||
|
width: 2em;
|
||||||
|
height: auto;
|
||||||
|
padding: 2.1em 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-link:hover,
|
||||||
|
.menu-link:focus {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-link span {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-link span,
|
||||||
|
.menu-link span:before,
|
||||||
|
.menu-link span:after {
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-link span:before,
|
||||||
|
.menu-link span:after {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -0.6em;
|
||||||
|
content: " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-link span:after {
|
||||||
|
margin-top: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -- Responsive Styles (Media Queries) ------------------------------------- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
Hides the menu at `48em`, but modify this based on your app's needs.
|
||||||
|
*/
|
||||||
|
@media (min-width: 48em) {
|
||||||
|
|
||||||
|
.header,
|
||||||
|
.content {
|
||||||
|
padding-left: 2em;
|
||||||
|
padding-right: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#layout {
|
||||||
|
padding-left: 150px; /* left col width "#menu" */
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
#menu {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-link {
|
||||||
|
position: fixed;
|
||||||
|
left: 150px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#layout.active .menu-link {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 48em) {
|
||||||
|
/* Only apply this when the window is small. Otherwise, the following
|
||||||
|
case results in extra padding on the left:
|
||||||
|
* Make the window small.
|
||||||
|
* Tap the menu to trigger the active state.
|
||||||
|
* Make the window large again.
|
||||||
|
*/
|
||||||
|
#layout.active {
|
||||||
|
position: relative;
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
97
index.html
Normal file
97
index.html
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Kobalt">
|
||||||
|
<title>Kobalt</title>
|
||||||
|
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
|
||||||
|
<!--[if lte IE 8]>
|
||||||
|
<link rel="stylesheet" href="/combo/1.18.13?/css/layouts/side-menu-old-ie.css">
|
||||||
|
<![endif]-->
|
||||||
|
<!--[if gt IE 8]><!-->
|
||||||
|
<link rel="stylesheet" href="css/side-menu.css">
|
||||||
|
<!--<![endif]-->
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="layout">
|
||||||
|
<!-- Menu toggle -->
|
||||||
|
<a href="#menu" id="menuLink" class="menu-link">
|
||||||
|
<!-- Hamburger icon -->
|
||||||
|
<span></span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div id="menu">
|
||||||
|
<div class="pure-menu">
|
||||||
|
<a class="pure-menu-heading" href="#">Kobalt</a>
|
||||||
|
|
||||||
|
<ul class="pure-menu-list">
|
||||||
|
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
|
||||||
|
<ul>
|
||||||
|
<li>Sub 1</li>
|
||||||
|
<li>Sub 2</li>
|
||||||
|
</ul>
|
||||||
|
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
|
||||||
|
|
||||||
|
<li class="pure-menu-item" class="menu-item-divided pure-menu-selected">
|
||||||
|
<a href="#" class="pure-menu-link">Services</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div class="header">
|
||||||
|
<h1>Page Title</h1>
|
||||||
|
<h2>A subtitle for your page goes here</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<h2 class="content-subhead">How to use this layout</h2>
|
||||||
|
<p>
|
||||||
|
To use this layout, you can just copy paste the HTML, along with the CSS in <a href="/css/layouts/side-menu.css" alt="Side Menu CSS">side-menu.css</a>, and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="content-subhead">Now Let's Speak Some Latin</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="pure-g">
|
||||||
|
<div class="pure-u-1-4">
|
||||||
|
<img class="pure-img-responsive" src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake">
|
||||||
|
</div>
|
||||||
|
<div class="pure-u-1-4">
|
||||||
|
<img class="pure-img-responsive" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train">
|
||||||
|
</div>
|
||||||
|
<div class="pure-u-1-4">
|
||||||
|
<img class="pure-img-responsive" src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" alt="T-Shirt Store">
|
||||||
|
</div>
|
||||||
|
<div class="pure-u-1-4">
|
||||||
|
<img class="pure-img-responsive" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="content-subhead">Try Resizing your Browser</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="js/ui.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
35
js/ui.js
Normal file
35
js/ui.js
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
(function (window, document) {
|
||||||
|
|
||||||
|
var layout = document.getElementById('layout'),
|
||||||
|
menu = document.getElementById('menu'),
|
||||||
|
menuLink = document.getElementById('menuLink');
|
||||||
|
|
||||||
|
function toggleClass(element, className) {
|
||||||
|
var classes = element.className.split(/\s+/),
|
||||||
|
length = classes.length,
|
||||||
|
i = 0;
|
||||||
|
|
||||||
|
for(; i < length; i++) {
|
||||||
|
if (classes[i] === className) {
|
||||||
|
classes.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// The className is not found
|
||||||
|
if (length === classes.length) {
|
||||||
|
classes.push(className);
|
||||||
|
}
|
||||||
|
|
||||||
|
element.className = classes.join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
menuLink.onclick = function (e) {
|
||||||
|
var active = 'active';
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
toggleClass(layout, active);
|
||||||
|
toggleClass(menu, active);
|
||||||
|
toggleClass(menuLink, active);
|
||||||
|
};
|
||||||
|
|
||||||
|
}(this, this.document));
|
||||||
Loading…
Add table
Add a link
Reference in a new issue