Skip to content

Instantly share code, notes, and snippets.

@wrumsby

wrumsby/dabblet.css

Created February 10, 2014 03:46
Show Gist options
  • Save wrumsby/8910034 to your computer and use it in GitHub Desktop.
Save wrumsby/8910034 to your computer and use it in GitHub Desktop.
Download ZIP
Messing around in the SMACSS workshop at Webstock.
Raw
dabblet.css
/**
* Messing around in the SMACSS workshop at Webstock.
*/
/* BASE */
body {
margin: 0;
padding: 0;
background-color: #eee;
font-family: Open Sans, sans-serif;
}
header,
footer,
div,
ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
/* LAYOUT */
.layout-fixed {
margin-left: auto;
margin-right: auto;
width: 750px;
}
.layout-content {
}
.layout-sidebar {
}
/* MODULES */
.highlight {
background-color: #333;
color: #fff;
}
.nav {
}
/* no hyphen indicates this is NOT a submodule */
.navhorizontal {
}
.mainnav {
text-transform: uppercase;
}
.mainnav a {
color: #fff;
text-decoration: none;
}
.wrapper {
position: relative;
background-color: #fff;
padding: 10px;
}
.wrapper-header {
overflow: hidden;
}
.wrapper-header-ribbon {
position: absolute;
left: -20px;
padding: 4px;
background-color: #c11;
color: #fff;
text-transform: uppercase;
font-weight: bold;
transform: rotate(315deg);
text-align: center;
width: 100px;
box-shadow: 0px 4px 10px #555;
}
.wrapper-body {
border: 1px solid #666;
padding: 10px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<header class="highlight">
<div class="layout-fixed">
<nav>
<ul class="mainnav">
<li><a href="#">Live</a></li>
</ul>
</nav>
</div>
</header>
<div class="layout-fixed">
<div class="wrapper">
<div class="wrapper-header"><div class="wrapper-header-ribbon">New</div></div>
<div class="wrapper-body">
<ul>
<li>
<!-- .tile? -->
<div class="tile tile-large">
<img class="tile-image"/>
<span class="title-title">Incomparable #181</span>
<span class="title-date">Saturday, 8 February 2014</span>
</div>
</li>
...
</ul>
</div>
<div class="wrapper-footer wrapper-footer-right">
<a href="#">More New Episodes</a>
</div>
</div>
<div class="layout-content">
<div class="wrapper">
<div class="wrapper-body">
<ul>
<li>
<div class="tile tile">
<img class="tile-image"/>
<span class="title-title">Amplified</span>
</div>
</li>
...
</ul>
</div>
</div>
</div>
<div class="layout-sidebar">
<div class="wrapper">
<!-- HOW TO DO ICON? -->
<!-- .icon-flag too tied to current design? -->
<div class="wrapper-header wrapper-header-default icon icon-flag">Sponsored By</div>
<div class="wrapper-body">
</div>
</div>
</div>
</div>
<footer class="highlight">
<div class="layout-fixed">
</div>
</footer>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment