Cre8 CMS UI - v1

by PhilQ

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="sidebar">
    <div class="ul-wrapper">
    <ul class="menu">
        <li class="caption">Menu</li>
        <li><a href="" marked="12">Pagina beheer</a></li>
        <li><a href="">Gebruiker beheer</a></li>
        <li class="caption-small">Modules</li>
        <li><a href="">Foto beheer</a></li>
        <li><a href="">Cursus beheer</a></li>
        <li class="caption-small">Profiel</li>
        <li><a href="">Wachtwoord wijzigen</a></li>
        <li><a href="">Uitloggen</a></li>
    </ul>
    </div>
</div>
<div id="sidebar-close"> </div>
<div id="topbar">
    <a href="#" id="panelBut"> </a>
    <b>Cre8 CMS</b>
</div>
<div id="content">
    <div id="content-wrapper">
        <div class="content-wrapper-box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
        </div>
    <Br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
        <br /><br />
        <a href="" class="cre8-button">Klik hier</a><div href="" class="cre8-button">Klik hier</div><input type="submit" class="cre8-button" value="Klik hier" />
        <br /><br />
        <a href="" class="cre8-button cre8-ok">Opslaan</a><div href="" class="cre8-button cre8-ok">Opslaan</div><input type="submit" class="cre8-button cre8-ok" value="Opslaan" />
        <br /><br />
        <a href=""...

CSS

@font-face{font-family:'Glyphicons Regular';src:url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.eot');src:url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.woff') format('woff'),url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.ttf') format('truetype'),url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');font-weight:normal;font-style:normal}

.glyphicons{display:inline-block;position:relative;padding-left:48px;color:#1d1d1b;text-decoration:none;*display:inline;*zoom:1;vertical-align:middle}
.glyphicons:before{position:absolute;left:0;top:0;display:inline-block;margin:0 5px 0 0;font:24px/1em 'Glyphicons Regular';font-style:normal;font-weight:normal;color:#1d1d1b;*display:inline;*zoom:1;vertical-align:middle;text-transform:none;-webkit-font-smoothing:antialiased}

html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    font-family: sans-serif;
    color: #2e2e2e;
    background-color: #f2f2f2;
    /*
    background-image: radial-gradient(center 80px, ellipse cover, #fdfdfd, #d2d2d2);
	background-image: -o-radial-gradient(center 80px, ellipse cover, #fdfdfd, #d2d2d2);
	background-image: -ms-radial-gradient(center 80px, ellipse cover, #fdfdfd, #d2d2d2);
	background-image: -moz-radial-gradient(center 80px, ellipse cover, #fdfdfd, #d2d2d2);
	background-image: -webkit-radial-gradient(center 80px, ellipse cover, #fdfdfd, #d2d2d2);
    background-attachment: fixed;
    */
}
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
}

#content {
    width: 100%;
    z-index: 1;
    margin-top: 59px;
}

#topbar {
   ...

JavaScript

$(document).ready(function() {

    $("#panelBut, #sidebar-close").click(function(e) {
        e.preventDefault();
        $("#sidebar, #topbar, #sidebar-close").toggleClass("sidebar-opened");
    });
    $(".cre8-button").mousedown(function() {
        $(this).addClass("down");
    }).mouseup(function() {
        $(this).removeClass("down");
    }).disableSelection();
});