Skip to content

Instantly share code, notes, and snippets.

@jlcarvalho

jlcarvalho/app.js

Last active August 29, 2015 14:18
Show Gist options
  • Save jlcarvalho/065554f22e6cd36dc3a6 to your computer and use it in GitHub Desktop.
Save jlcarvalho/065554f22e6cd36dc3a6 to your computer and use it in GitHub Desktop.
Download ZIP
Gistter: Learning & Presentation CSS Tool
Raw
app.js
// Rock
$(document).ready(function() {
console.clear();
var step = 1,
$steps = $('#cssteps'),
$steps_list = $('li', $steps),
steps = $steps_list.length;
$steps_list.attr('contenteditable','true');
var rockUpdate = function() {
var $li = $('li:nth-child('+ step +')', $steps);
$('#style-tag').html($li.html());
$steps.removeClass().addClass('step'+step);
$li.focus();
};
$("body").append('<style id="style-tag"></style><aside class="controls"><button class="back">Back</button><button class="next">Next</button></aside>');
var $next = $('.controls .next');
var $back = $('.controls .back');
$next.on('click', function(){
if(++step > steps) step = 1;
rockUpdate();
});
$back.on('click', function(){
if(--step < 1) step = steps;
rockUpdate();
});
rockUpdate();
$('body').keyup(function(){ rockUpdate(); });
});
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gistter</title>
<!-- Necessary to insert the styles -->
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Your code here -->
<!-- HTML -->
<div class="heart">
<div class="heart-body"></div>
</div>
<!--
CSS steps
Write your CSS in steps. Try it!:
-->
<ol id="cssteps">
<li>
.heart {
width: 300px;
height: 300px;
}
.heart-body {
width: 50%;
height: 50%;
background: tomato;
}
</li>
<li>
.heart {
width: 300px;
height: 300px;
margin: 100px auto;
}
.heart-body {
width: 50%;
height: 50%;
background: tomato;
}
</li>
<li>
.heart {
width: 300px;
height: 300px;
margin: 100px auto;
}
.heart-body {
width: 50%;
height: 50%;
transform: rotate(225deg);
background: tomato;
}
</li>
<li>
.heart {
width: 300px;
height: 300px;
margin: 100px auto;
}
.heart-body {
width: 50%;
height: 50%;
transform: rotate(225deg);
background: tomato;
}
.heart-body:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: green;
}
</li>
<li>
.heart {
width: 300px;
height: 300px;
margin: 100px auto;
}
.heart-body {
width: 50%;
height: 50%;
transform: rotate(225deg);
background: tomato;
}
.heart-body:after {
position: absolute;
left: 100%;
content: '';
width: 100%;
height: 100%;
background-color: green;
}
</li>
<li>
.heart {
width: 300px;
height: 300px;
margin: 100px auto;
}
.heart-body {
width: 50%;
height: 50%;
transform: rotate(225deg);
background: tomato;
}
.heart-body:after {
position: absolute;
left: 100%;
content: '';
width: 100%;
height: 100%;
background-color: green;
border-radius: 50%;
}
</li>
<li>
.heart {
width: 300px;
height: 300px;
margin: 100px auto;
}
.heart-body {
width: 50%;
height: 50%;
transform: rotate(225deg);
background: tomato;
}
.heart-body:after {
position: absolute;
left: 50%;
content: '';
width: 100%;
height: 100%;
background-color: green;
border-radius: 50%;
}
</li>
<li>
.heart {
width: 300px;
height: 300px;
margin: 100px auto;
}
.heart-body {
width: 50%;
height: 50%;
transform: rotate(225deg);
background: tomato;
}
.heart-body:before,
.heart-body:after {
position: absolute;
left: 50%;
content: '';
width: 100%;
height: 100%;
background-color: green;
border-radius: 50%;
}
</li>
<li>
.heart {
width: 300px;
height: 300px;
margin: 100px auto;
}
.heart-body {
width: 50%;
height: 50%;
transform: rotate(225deg);
background: tomato;
}
.heart-body:before,
.heart-body:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: green;
border-radius: 50%;
}
.heart-body:before { top: 50%; }
.heart-body:after { left: 50%; }
</li>
<li>
.heart {
width: 300px;
height: 300px;
margin: 100px auto;
}
.heart-body {
width: 50%;
height: 50%;
transform: rotate(225deg);
background: tomato;
}
.heart-body:before,
.heart-body:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: inherit;
border-radius: 50%;
}
.heart-body:before { top: 50%; }
.heart-body:after { left: 50%; }
</li>
</ol>
[[[//codepen.io/unavezfui/pen/FsGHp.slim]]]
<!-- Necessary to insert the javascript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Raw
main.css
/*
Your css should be written in HTML box.
Divided into steps in #cssteps list.
*/
#cssteps {
position: absolute;
top: 30px;
bottom: 15px;
right: 15px;
width: 320px;
padding: 0;
}
#cssteps * {
box-sizing: border-box;
}
#cssteps li {
display: none;
width: 100%;
height: 100%;
padding: 10px;
border: 1px solid #ddd;
background-color: #333;
color: #fff;
white-space: pre-wrap;
font-family: 'Courier New';
font-size: 14px;
outline: none;
overflow: auto;
}
#cssteps.step1 li:nth-child(1) {
display: block;
}
#cssteps.step2 li:nth-child(2) {
display: block;
}
#cssteps.step3 li:nth-child(3) {
display: block;
}
#cssteps.step4 li:nth-child(4) {
display: block;
}
#cssteps.step5 li:nth-child(5) {
display: block;
}
#cssteps.step6 li:nth-child(6) {
display: block;
}
#cssteps.step7 li:nth-child(7) {
display: block;
}
#cssteps.step8 li:nth-child(8) {
display: block;
}
#cssteps.step9 li:nth-child(9) {
display: block;
}
#cssteps.step10 li:nth-child(10) {
display: block;
}
#cssteps.step11 li:nth-child(11) {
display: block;
}
#cssteps.step12 li:nth-child(12) {
display: block;
}
#cssteps.step13 li:nth-child(13) {
display: block;
}
#cssteps.step14 li:nth-child(14) {
display: block;
}
#cssteps.step15 li:nth-child(15) {
display: block;
}
.controls {
position: absolute;
top: 15px;
right: 15px;
width: 320px;
}
.controls button {
border: 1px solid #ddd;
width: 50%;
height: 30px;
outline: 0;
cursor: pointer;
background: #ddd;
font-size: 14px;
color: #919191;
}
.controls button:hover {
background: #eaeaea;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment