jade Jade mixins的例子
Jade mixins的例子
mixins.pug
// Writing JS for everything is great and all, but I don't want to see JS
// inline in my Jade templates. Thankfully, there are ways of abstrating it
// into mixins!
// Want some Rails-like helpers?
mixin link_to(name, href)
- href = href || "#"
a(href="#{href}")= name
// How about a single editing point for a class name?
mixin button(name, href)
- href = href || "#"
a.button(href="#{href}")= name
// Iterating over collections to wrap them in an element? Send the tag name and
// collection to have it handle the syntax for you
mixin element_list(el, collection)
each item in collection
#{el}=item
// Convenience mixin for th elements
mixin th_list(collection)
+element_list("th", collection)
// Convenience mixin for li elements
mixin li_list(collection)
+element_list("li", collection)
// Repeat a block without writing inline JS
mixin times(limit)
- for (var i = 1; i <= limit; i++) {
block
- }
// And now for something completely different. Need to spit out the days of the
// week, but want to be able to specify a starting day? This baby takes the
// wrapping element and an optional string representing what day you want to
// start with. It outputs each day starting with that one.
mixin days_of_the_week(el, start)
- start = start || "Sunday"
- days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
- if (days.indexOf(start) === -1) { start = "Sunday"; }
- for (var i = days.indexOf(start); i < 7; i++) {
#{el}= days[i]
- }
- for (var i = 0, len = days.indexOf(start); i < len; i++) {
#{el}= days[i]
- }
jade jade mixins for knockout.js virtual element.https：//github.com/visionmedia/jade/pull/958
jade mixins for knockout.js virtual element.https：//github.com/visionmedia/jade/pull/958
virtual_knockout.pug
mixin with(val)
<!-- ko with: !{val} -->
block
<!-- /ko -->
mixin if(val)
<!-- ko if: !{val} -->
block
<!-- /ko -->
mixin each(val)
<!-- ko foreach: !{val} -->
block
<!-- /ko -->
jade Moncho Varela的钢笔。
Moncho Varela的钢笔。
style.less
@import url(http://fonts.googleapis.com/css?family=Monoton);
@import url(http://fonts.googleapis.com/css?family=Montserrat+Alternates);
@body:#95a5a6;
@main:#ecf0f1;
@link:#3498db;
@color:#7f8c8d;
.mst{font-family:'Montserrat Alternates', sans-serif;}
.text-shadow{text-shadow: 0 1px 2px @body;}
.rounded-corners (@radius: 4px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
body{
background:@body;
color:@color;
position:relative;
}
h1,h2,h3{.mst;}
a{color:@link;}
.main{
background:@main;
margin:0.5em auto;
padding:0.5em;
width:percentage(0.95);
min-height:600px;
.rounded-corners;
}
.main-header{
.mst;
text-align:center;
.text-shadow;
}
pre {
background: #26A4AD;
border: 2px solid #62D9FF;
padding: 0.5em;
color: #FFF;
box-shadow: 0 6px 6px -6px #000;
}
/* = Demo not less
------------------------*/
.result{position:relative;}
figure{
position:relative;
margin: 10% auto;
overflow:hidden;
border:5px solid white;
box-shadow: 0 6px 6px -6px black;}
figure,figure img,
figure:before{
width:300px; height:300px;}
figure:before{
position:absolute;
background: rgba(218, 61, 61, 0.7);
content:" ";
top:0;
left:0;
overflow:hidden;}
figure span{position:absolute;}
.bar-1,.bar-2,.bar-3,.bar-4,.bar-5{
background:white;
display:inline-block;
height:30px;
}
.firstName,.lastName{
font-family: 'Monoton', cursive;
font-size:2em;
line-height: normal;
}
.firstName{top:2em;left:3em;color: #FFF;}
.lastName{top: 6em;left:3em;color: #FFF;}
.bar-1{left: 0;top: 4.5em;width:4em;}
.bar-2{right: 0;top: 4.5em;width: 6em;}
.bar-3 {left: 0;top: 8.5em;width: 24em;}
.bar-3:before{
content: "My name is Alf and i love design.";
position: absolute;
line-height: 2em;
color: #777;
left: 6em;
width:24em;
}
.bar-4{left: 0;top: 12.5em;width: 5em;}
.bar-5{right: 0;top: 12.5em;width: 3.5em;}
.firstName{
animation: one 2.5s 1 ease;
-webkit-animation: one 2.5s 1 ease;
-moz-animation: one 2.5s 1 ease;
-o-animation: one 2.5s 1 ease;
-ms-animation: one 2.5s 1 ease;}
.lastName{
animation: two 2.5s 1 ease;
-webkit-animation: two 2.5s 1 ease;
-ms-animation: two 2.5s 1 ease;
-o-animation: two 2.5s 1 ease;
-moz-animation: two 2.5s 1 ease;}
.bar-1{
animation: three 1.5s 1 ease;
-webkit-animation: three 1.5s 1 ease;
-o-animation: three 1.5s 1 ease;
-ms-animation: three 1.5s 1 ease;
-moz-animation: three 1.5s 1 ease;}
.bar-2{
animation: three 3s 1 ease;
-webkit-animation: three 3s 1 ease;
-moz-animation: three 3s 1 ease;
-o-animation: three 3s 1 ease;
-ms-animation: three 3s 1 ease;}
.bar-3{
animation: three 2s 1 ease;
-webkit-animation: three 2s 1 ease;
-moz-animation: three 2s 1 ease;
-o-animation: three 2s 1 ease;
-ms-animation: three 2s 1 ease;}
.bar-4{
animation: three 0.5s 1 ease;
-webkit-animation: three 0.5s 1 ease;
-moz-animation: three 0.5s 1 ease;
-o-animation: three 0.5s 1 ease;
-ms-animation: three 0.5s 1 ease;}
.bar-5{
animation: three 1s 1 ease;
-webkit-animation: three 1s 1 ease;
-moz-animation: three 1s 1 ease;
-o-animation: three 1s 1 ease;
-ms-animation: three 1s 1 ease;}
figure:before{
animation: four 5s 1 ease;
-webkit-animation: four 5s 1 ease;
-moz-animation: four 5s 1 ease;
-o-animation: four 5s 1 ease;
-ms-animation: four 5s 1 ease;
}
.bar-3:before{
animation: five 3s 1 ease-in-out;
-webkit-animation: five 3s 1 ease-in-out;
-moz-animation: five 3s 1 ease-in-out;
-o-animation: five 3s 1 ease-in-out;
-ms-animation: five 3s 1 ease-in-out;
}
@keyframes one{from{top:-130em;}}
@keyframes two{from{top:185em;}}
@keyframes three{from{width:0}}
@keyframes four{from{background:rgba(61, 218, 205, 0.97);}}
@keyframes five{from{left:100em;}}
@-webkit-keyframes one{from{top:-130em;}}
@-webkit-keyframes two{from{top:185em;}}
@-webkit-keyframes three{from{width:0;}}
@-webkit-keyframes four{from{ background:rgba(61, 218, 205, 0.97);}}
@-webkit-keyframes five{from{left:100em;}}
@-moz-keyframes one{from{top:-130em;}}
@-moz-keyframes two{from{top:185em;}}
@-moz-keyframes three{from{width:0}}
@-moz-keyframes four{from{ background:rgba(61, 218, 205, 0.97);}}
@-moz-keyframes five{from{left:100em;}}
@-o-keyframes one{from{top:-130em;}}
@-o-keyframes two{from{top:185em;}}
@-o-keyframes three{from{width:0}}
@-o-keyframes four{from{background:rgba(61, 218, 205, 0.97);}}
@-o-keyframes five{from{left:100em;}}
@-ms-keyframes one{from{top:-130em;}}
@-ms-keyframes two{from{top:-85em;}}
@-ms-keyframes three{from{width:0}}
@-ms-keyframes four{from{ background:rgba(61, 218, 205, 0.97);}}
@-ms-keyframes five{from{left:100em;}}
script.js
(function(document,window){
'use-strict';
var main,result,stop = false;
if (typeof app === 'undefined')
app = {}
app.run = {
init: function() {
main = document.querySelector('.main-inner');
this.render();
},
// typing effect
typing:function (){
if (main){
main.innerHTML= t.substr(0, i);i++;
var time = setTimeout("app.run.typing()",50);
if(stop === true){
clearTimeout(time);console.log('ok');
}
}
},
// runTypin('hello')
runTyping:function(el){
t=el,i=1;app.run.typing();
},
// End typing effect
// render result
render:function(){
this.runTyping(this.words.one);
setTimeout(function(){
app.run.runTyping(app.run.words.two);},2500);
setTimeout(function(){
app.run.runTyping(app.run.words.three);},5000);
setTimeout(function(){
app.run.runTyping(app.run.words.four);},7500);
setTimeout(function(){
app.run.runTyping(app.run.words.five);},12500);
setTimeout(function(){
app.run.runTyping(app.run.words.six);},15000);
setTimeout(function(){
app.run.runTyping(app.run.words.seven);},20000);
setTimeout(function(){
app.run.runTyping(app.run.words.eight);},22500);
setTimeout(function(){
app.run.runTyping(app.run.words.nine);},27000);
setTimeout(function(){
app.run.runTyping(app.run.words.ten);},30000);
setTimeout(function(){
app.run.runTyping(app.run.words.eleven);},37000);
setTimeout(function(){
app.run.runTyping(app.run.words.twuelve);},40000);
setTimeout(function(){
app.run.runTyping(app.run.words.thirteen);},47000);
setTimeout(function(){
app.run.runTyping(app.run.words.fourteen);},50000);
setTimeout(function(){
app.run.runTyping(app.run.words.fiveteen);},57000);
setTimeout(function(){
app.run.runTyping(app.run.words.sixteen);},60000);
setTimeout(function(){
app.run.runTyping(app.run.words.seventeen);},67000);
setTimeout(function(){
app.run.runTyping(app.run.words.eighteen);},70000);
setTimeout(function(){stop = true;},72000);
},
// The words
words:{
'one': '<h3>Hello World',
'two': '<h3>I show how to make logo design.',
'three': '<h3>First the figure tag.',
'four': '<small>Figure <b>tag:</b><hr><pre><figure></figure></pre>',
'five': '<h3>Now the img.',
'six': '<small>Img <b>tag:</b><hr><pre><figure><br> <img src="http://labs.nakome.com/fotos/alf.jpg" alt="Alf design" /><br></figure></pre>',
'seven': '<h3>Now the span tags.',
'eight': '<small>Added span <b>tag:</b><hr><pre><figure><br> <span class="bar-1"></span><br> <span class="firstName">ALF</span><br> <span class="bar-2"></span><br> <span class="bar-3"></span> <br> <span class="bar-4"></span><br> <span class="lastName">Design</span><br> <span class="bar-5"></span><br> <img src="http://labs.nakome.com/fotos/alf.jpg" alt="Moncho Varela" /><br></figure></pre>',
'nine': '<h3>Now the css for figure.',
'ten': '<small>Added css <b>figure:</b><hr><pre>figure{ <br> position:relative;<br> margin: 10% auto;<br> overflow:hidden;<br> border:5px solid white;<br> box-shadow: 0 6px 6px -6px black;<br>}<br>figure,figure img,<br>figure:before{<br> width:300px; height:300px;<br>}<br>figure:before{<br> position:absolute;<br> background: rgba(218, 61, 61, 0.7);<br> content:" ";<br> top:0;<br> left:0;<br> overflow:hidden;<br>}</pre>',
'eleven': '<h3>Now the css for span.',
'twuelve': '<small>Added css <b>span:</b><hr><pre>figure span{<br> position:absolute;<br>}<br>.bar-1,.bar-2,.bar-3,.bar-4,.bar-5{<br> background:white;<br> display:inline-block;<br> height:30px;<br>}<br>.firstName,.lastName{<br> font-family: "Monoton", cursive;<br> font-size:2em;<br> line-height: normal;<br>}<br><br>.firstName{top:2em;left:3em;color: #FFF;}<br>.lastName{top: 6em;left:3em;color: #FFF;}<br>.bar-1{left: 0;top: 4.5em;width:4em;}<br>.bar-2{right: 0;top: 4.5em;width: 6em;}<br>.bar-3 {left: 0;top: 8.5em;width: 20em;}<br><br>.bar-3:before{ <br> content: "My name is Alf and i love design."; <br> position: absolute;<br> line-height: 2em; <br> color: #777;<br> left: 6em;<br> width:15em;<br>}<br>.bar-4{left: 0;top: 12.5em;width: 5em;}<br>.bar-5{right: 0;top: 12.5em;width: 3.5em;}</pre>',
'thirteen': '<h3>Now the effects.',
'fourteen': '<small>Added css <b>effects:</b><hr><pre>.firstName { animation: one 2.5s 1 ease;}<br>.lastName { animation: two 2.5s 1 ease;}<br>.bar-1 { animation: three 1.5s 1 ease;}<br>.bar-2 { animation: three 3s 1 ease;}<br>.bar-3 { animation: three 2s 1 ease;}<br>.bar-4 { animation: three 0.5s 1 ease;}<br>.bar-5 { animation: three 1s 1 ease;}<br>figure:before { animation: four 5s 1 ease;}<br>.bar-3:before { animation: five 3s 1 ease-in-out;}</pre>',
'fiveteen': '<h3>Now the keyframes.',
'sixteen': '<small>Added css <b>keyframes:</b><hr><pre>@keyframes one{from{top:-130em;}}<br>@keyframes two{from{top:185em;}}<br>@keyframes three{from{width:0}}<br>@keyframes four{from{background:rgba(61, 218, 205, 0.97);}}<br>@keyframes five{from{left:100em;}</pre>',
'seventeen': '<h3>And this is the result.',
'eighteen': '<small>Render <b>result:</b><hr><div class="result"><figure> <span class="bar-1"></span> <span class="firstName">ALF</span> <span class="bar-2"></span> <span class="bar-3"></span> <span class="bar-4"></span> <span class="lastName">Design</span> <span class="bar-5"></span> <img src="http://labs.nakome.com/fotos/alf.jpg" alt="Moncho Varela" /> </figure> </div><hr> thanks for view <a href="http://nakome.com">@nakome</a>',
}
};
// init
app.run.init();
})(document,window);
logo-design-experiment.markdown
logo design experiment
----------------------
inspired by http://codepen.io/chriscoyier/pen/lotjh
A [Pen](http://codepen.io/nakome/pen/rDIBo) by [Moncho Varela](http://codepen.io/nakome) on [CodePen](http://codepen.io/).
[License](http://codepen.io/nakome/pen/rDIBo/license).
index.jade
.main
.main-header
h1 Logo Design
h2 presentation.
.main-inner
jade Moncho Varela的钢笔。
Moncho Varela的钢笔。
style.less
@import url(http://fonts.googleapis.com/css?family=Monoton);
@import url(http://fonts.googleapis.com/css?family=Montserrat+Alternates);
@body:#95a5a6;
@main:#ecf0f1;
@link:#3498db;
@color:#7f8c8d;
.mst{font-family:'Montserrat Alternates', sans-serif;}
.text-shadow{text-shadow: 0 1px 2px @body;}
.rounded-corners (@radius: 4px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
body{
background:@body;
color:@color;
position:relative;
}
h1,h2,h3{.mst;}
a{color:@link;}
.main{
background:@main;
margin:0.5em auto;
padding:0.5em;
width:percentage(0.95);
min-height:600px;
.rounded-corners;
}
.main-header{
.mst;
text-align:center;
.text-shadow;
}
pre {
background: #26A4AD;
border: 2px solid #62D9FF;
padding: 0.5em;
color: #FFF;
box-shadow: 0 6px 6px -6px #000;
}
/* = Demo not less
------------------------*/
.result{position:relative;}
figure{
position:relative;
margin: 10% auto;
overflow:hidden;
border:5px solid white;
box-shadow: 0 6px 6px -6px black;}
figure,figure img,
figure:before{
width:300px; height:300px;}
figure:before{
position:absolute;
background: rgba(218, 61, 61, 0.7);
content:" ";
top:0;
left:0;
overflow:hidden;}
figure span{position:absolute;}
.bar-1,.bar-2,.bar-3,.bar-4,.bar-5{
background:white;
display:inline-block;
height:30px;
}
.firstName,.lastName{
font-family: 'Monoton', cursive;
font-size:2em;
line-height: normal;
}
.firstName{top:2em;left:3em;color: #FFF;}
.lastName{top: 6em;left:3em;color: #FFF;}
.bar-1{left: 0;top: 4.5em;width:4em;}
.bar-2{right: 0;top: 4.5em;width: 6em;}
.bar-3 {left: 0;top: 8.5em;width: 24em;}
.bar-3:before{
content: "My name is Alf and i love design.";
position: absolute;
line-height: 2em;
color: #777;
left: 6em;
width:24em;
}
.bar-4{left: 0;top: 12.5em;width: 5em;}
.bar-5{right: 0;top: 12.5em;width: 3.5em;}
.firstName{
animation: one 2.5s 1 ease;
-webkit-animation: one 2.5s 1 ease;
-moz-animation: one 2.5s 1 ease;
-o-animation: one 2.5s 1 ease;
-ms-animation: one 2.5s 1 ease;}
.lastName{
animation: two 2.5s 1 ease;
-webkit-animation: two 2.5s 1 ease;
-ms-animation: two 2.5s 1 ease;
-o-animation: two 2.5s 1 ease;
-moz-animation: two 2.5s 1 ease;}
.bar-1{
animation: three 1.5s 1 ease;
-webkit-animation: three 1.5s 1 ease;
-o-animation: three 1.5s 1 ease;
-ms-animation: three 1.5s 1 ease;
-moz-animation: three 1.5s 1 ease;}
.bar-2{
animation: three 3s 1 ease;
-webkit-animation: three 3s 1 ease;
-moz-animation: three 3s 1 ease;
-o-animation: three 3s 1 ease;
-ms-animation: three 3s 1 ease;}
.bar-3{
animation: three 2s 1 ease;
-webkit-animation: three 2s 1 ease;
-moz-animation: three 2s 1 ease;
-o-animation: three 2s 1 ease;
-ms-animation: three 2s 1 ease;}
.bar-4{
animation: three 0.5s 1 ease;
-webkit-animation: three 0.5s 1 ease;
-moz-animation: three 0.5s 1 ease;
-o-animation: three 0.5s 1 ease;
-ms-animation: three 0.5s 1 ease;}
.bar-5{
animation: three 1s 1 ease;
-webkit-animation: three 1s 1 ease;
-moz-animation: three 1s 1 ease;
-o-animation: three 1s 1 ease;
-ms-animation: three 1s 1 ease;}
figure:before{
animation: four 5s 1 ease;
-webkit-animation: four 5s 1 ease;
-moz-animation: four 5s 1 ease;
-o-animation: four 5s 1 ease;
-ms-animation: four 5s 1 ease;
}
.bar-3:before{
animation: five 3s 1 ease-in-out;
-webkit-animation: five 3s 1 ease-in-out;
-moz-animation: five 3s 1 ease-in-out;
-o-animation: five 3s 1 ease-in-out;
-ms-animation: five 3s 1 ease-in-out;
}
@keyframes one{from{top:-130em;}}
@keyframes two{from{top:185em;}}
@keyframes three{from{width:0}}
@keyframes four{from{background:rgba(61, 218, 205, 0.97);}}
@keyframes five{from{left:100em;}}
@-webkit-keyframes one{from{top:-130em;}}
@-webkit-keyframes two{from{top:185em;}}
@-webkit-keyframes three{from{width:0;}}
@-webkit-keyframes four{from{ background:rgba(61, 218, 205, 0.97);}}
@-webkit-keyframes five{from{left:100em;}}
@-moz-keyframes one{from{top:-130em;}}
@-moz-keyframes two{from{top:185em;}}
@-moz-keyframes three{from{width:0}}
@-moz-keyframes four{from{ background:rgba(61, 218, 205, 0.97);}}
@-moz-keyframes five{from{left:100em;}}
@-o-keyframes one{from{top:-130em;}}
@-o-keyframes two{from{top:185em;}}
@-o-keyframes three{from{width:0}}
@-o-keyframes four{from{background:rgba(61, 218, 205, 0.97);}}
@-o-keyframes five{from{left:100em;}}
@-ms-keyframes one{from{top:-130em;}}
@-ms-keyframes two{from{top:-85em;}}
@-ms-keyframes three{from{width:0}}
@-ms-keyframes four{from{ background:rgba(61, 218, 205, 0.97);}}
@-ms-keyframes five{from{left:100em;}}
script.js
(function(document,window){
'use-strict';
var main,result,stop = false;
if (typeof app === 'undefined')
app = {}
app.run = {
init: function() {
main = document.querySelector('.main-inner');
this.render();
},
// typing effect
typing:function (){
if (main){
main.innerHTML= t.substr(0, i);i++;
var time = setTimeout("app.run.typing()",50);
if(stop === true){
clearTimeout(time);console.log('ok');
}
}
},
// runTypin('hello')
runTyping:function(el){
t=el,i=1;app.run.typing();
},
// End typing effect
// render result
render:function(){
this.runTyping(this.words.one);
setTimeout(function(){
app.run.runTyping(app.run.words.two);},2500);
setTimeout(function(){
app.run.runTyping(app.run.words.three);},5000);
setTimeout(function(){
app.run.runTyping(app.run.words.four);},7500);
setTimeout(function(){
app.run.runTyping(app.run.words.five);},12500);
setTimeout(function(){
app.run.runTyping(app.run.words.six);},15000);
setTimeout(function(){
app.run.runTyping(app.run.words.seven);},20000);
setTimeout(function(){
app.run.runTyping(app.run.words.eight);},22500);
setTimeout(function(){
app.run.runTyping(app.run.words.nine);},27000);
setTimeout(function(){
app.run.runTyping(app.run.words.ten);},30000);
setTimeout(function(){
app.run.runTyping(app.run.words.eleven);},37000);
setTimeout(function(){
app.run.runTyping(app.run.words.twuelve);},40000);
setTimeout(function(){
app.run.runTyping(app.run.words.thirteen);},47000);
setTimeout(function(){
app.run.runTyping(app.run.words.fourteen);},50000);
setTimeout(function(){
app.run.runTyping(app.run.words.fiveteen);},57000);
setTimeout(function(){
app.run.runTyping(app.run.words.sixteen);},60000);
setTimeout(function(){
app.run.runTyping(app.run.words.seventeen);},67000);
setTimeout(function(){
app.run.runTyping(app.run.words.eighteen);},70000);
setTimeout(function(){stop = true;},72000);
},
// The words
words:{
'one': '<h3>Hello World',
'two': '<h3>I show how to make logo design.',
'three': '<h3>First the figure tag.',
'four': '<small>Figure <b>tag:</b><hr><pre><figure></figure></pre>',
'five': '<h3>Now the img.',
'six': '<small>Img <b>tag:</b><hr><pre><figure><br> <img src="http://labs.nakome.com/fotos/alf.jpg" alt="Alf design" /><br></figure></pre>',
'seven': '<h3>Now the span tags.',
'eight': '<small>Added span <b>tag:</b><hr><pre><figure><br> <span class="bar-1"></span><br> <span class="firstName">ALF</span><br> <span class="bar-2"></span><br> <span class="bar-3"></span> <br> <span class="bar-4"></span><br> <span class="lastName">Design</span><br> <span class="bar-5"></span><br> <img src="http://labs.nakome.com/fotos/alf.jpg" alt="Moncho Varela" /><br></figure></pre>',
'nine': '<h3>Now the css for figure.',
'ten': '<small>Added css <b>figure:</b><hr><pre>figure{ <br> position:relative;<br> margin: 10% auto;<br> overflow:hidden;<br> border:5px solid white;<br> box-shadow: 0 6px 6px -6px black;<br>}<br>figure,figure img,<br>figure:before{<br> width:300px; height:300px;<br>}<br>figure:before{<br> position:absolute;<br> background: rgba(218, 61, 61, 0.7);<br> content:" ";<br> top:0;<br> left:0;<br> overflow:hidden;<br>}</pre>',
'eleven': '<h3>Now the css for span.',
'twuelve': '<small>Added css <b>span:</b><hr><pre>figure span{<br> position:absolute;<br>}<br>.bar-1,.bar-2,.bar-3,.bar-4,.bar-5{<br> background:white;<br> display:inline-block;<br> height:30px;<br>}<br>.firstName,.lastName{<br> font-family: "Monoton", cursive;<br> font-size:2em;<br> line-height: normal;<br>}<br><br>.firstName{top:2em;left:3em;color: #FFF;}<br>.lastName{top: 6em;left:3em;color: #FFF;}<br>.bar-1{left: 0;top: 4.5em;width:4em;}<br>.bar-2{right: 0;top: 4.5em;width: 6em;}<br>.bar-3 {left: 0;top: 8.5em;width: 20em;}<br><br>.bar-3:before{ <br> content: "My name is Alf and i love design."; <br> position: absolute;<br> line-height: 2em; <br> color: #777;<br> left: 6em;<br> width:15em;<br>}<br>.bar-4{left: 0;top: 12.5em;width: 5em;}<br>.bar-5{right: 0;top: 12.5em;width: 3.5em;}</pre>',
'thirteen': '<h3>Now the effects.',
'fourteen': '<small>Added css <b>effects:</b><hr><pre>.firstName { animation: one 2.5s 1 ease;}<br>.lastName { animation: two 2.5s 1 ease;}<br>.bar-1 { animation: three 1.5s 1 ease;}<br>.bar-2 { animation: three 3s 1 ease;}<br>.bar-3 { animation: three 2s 1 ease;}<br>.bar-4 { animation: three 0.5s 1 ease;}<br>.bar-5 { animation: three 1s 1 ease;}<br>figure:before { animation: four 5s 1 ease;}<br>.bar-3:before { animation: five 3s 1 ease-in-out;}</pre>',
'fiveteen': '<h3>Now the keyframes.',
'sixteen': '<small>Added css <b>keyframes:</b><hr><pre>@keyframes one{from{top:-130em;}}<br>@keyframes two{from{top:185em;}}<br>@keyframes three{from{width:0}}<br>@keyframes four{from{background:rgba(61, 218, 205, 0.97);}}<br>@keyframes five{from{left:100em;}</pre>',
'seventeen': '<h3>And this is the result.',
'eighteen': '<small>Render <b>result:</b><hr><div class="result"><figure> <span class="bar-1"></span> <span class="firstName">ALF</span> <span class="bar-2"></span> <span class="bar-3"></span> <span class="bar-4"></span> <span class="lastName">Design</span> <span class="bar-5"></span> <img src="http://labs.nakome.com/fotos/alf.jpg" alt="Moncho Varela" /> </figure> </div><hr> thanks for view <a href="http://nakome.com">@nakome</a>',
}
};
// init
app.run.init();
})(document,window);
logo-design-experiment.markdown
logo design experiment
----------------------
inspired by http://codepen.io/chriscoyier/pen/lotjh
A [Pen](http://codepen.io/nakome/pen/rDIBo) by [Moncho Varela](http://codepen.io/nakome) on [CodePen](http://codepen.io/).
[License](http://codepen.io/nakome/pen/rDIBo/license).
index.jade
.main
.main-header
h1 Logo Design
h2 presentation.
.main-inner