Last active
June 26, 2016 22:32
-
-
Save wookiecooking/7508761 to your computer and use it in GitHub Desktop.
Working Example of Using Jade Mixins
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| +header | |
| +cont | |
| +row | |
| +col(class="col-md-12") | |
| +article('Hello world') | |
| +placehold('200','200') | |
| p | |
| +lorem(36, "words") | |
| +buckets([{title:'test bucket 1', content:'Bucket One', url:'google.com' },{title:'test bucket 1',content:'Bucket One', url:'google.com' },{title:'test bucket 1',content:'Bucket One', url:'google.com' }]); | |
| +cont | |
| +row | |
| +bucket("whatever", "google.com", "this is content") | |
| +bucket("whatever", "google.com", "this is content") | |
| +bucket("whatever", "google.com", "this is content") | |
| +footer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //- BELOW BE DRAGONS | |
| //- | |
| //- To get a better idea on how this | |
| //- works, below you will find the mixins | |
| //- with usage/output examples. | |
| //- | |
| //- /| | |
| //- // | |
| //- .==. .==. // | |
| //- //`^\ //^`\ // | |
| //- // ^ ^\(\__/)/^ ^^\// | |
| //- //^ ^^ ^/6 6\ ^^ ^//\ | |
| //- //^ ^^ ^/( .. )\^ _// \ | |
| //- // ^^ ^/\| v""v |/@@@) ^\ | |
| //- // ^^/\/ / `~~` @"/\^ ^\ | |
| //- \^ / _/ /IIII. \_/ \^ // | |
| //- \/ /( (IIIIII/ \ \// | |
| //- ^ / \ \IIII' \ ^ | |
| //- \ ((((`II' / | |
| //- .--' /\_____/\ `--. | |
| //- ((((--' '--)))) | |
| //- EXTERNAL LIBRARIES VARS | |
| - var jquery = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" | |
| - var modernizr = "//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" | |
| - var less = "//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js" | |
| - var angular = "//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.min.js" | |
| - var bootstrapcss = "//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" | |
| - var bootstrapjs = "//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" | |
| //- Hyperlink | |
| - +link('http://reddit.com') | |
| - Goto Reddit | |
| - <a href="http://reddit.com">Goto Reddit</a> | |
| mixin link(href) | |
| a(class=attributes.class, href=href) | |
| block | |
| //- Cycle through list | |
| - Usage: +list('google','microsoft','apple') | |
| - Output: | |
| - <ul> | |
| - <li>google</li> | |
| - ... | |
| mixin list(items) | |
| - each item in items | |
| li= item | |
| //- Stylesheet Include | |
| - Usage: +style('style.css') | |
| - Output: | |
| - <link href='style' rel='stylesheet'> | |
| mixin style(url) | |
| link(rel="stylesheet", href=url) | |
| //- Script Include | |
| - Usage: +script(jquery) | |
| - Output: | |
| - <script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | |
| mixin script(url) | |
| script(async, src=url) | |
| //- Sets up HTML5 | |
| - Usage: +h5 | |
| - Output: | |
| - <!DOCTYPE html> | |
| - <meta charset="utf-8"> | |
| - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| - <meta name="viewport" content="width=device-width; initial-scale=1.0"> | |
| mixin h5 | |
| !!! | |
| meta(charset="utf-8") | |
| meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1") | |
| meta(name="viewport", content="width=device-width; initial-scale=1.0") | |
| //- Include Bootstrap | |
| mixin bootstrap | |
| +style(bootstrapcss) | |
| +script(bootstrapjs) | |
| mixin placehold(width, height) | |
| img(src="http://placehold.it/"+width+"x"+height) | |
| //- Simple Article Wrapper | |
| mixin article(title) | |
| .article | |
| .article-wrapper | |
| h1= title | |
| if block | |
| block | |
| else | |
| p No content provided | |
| //- Container <div class="container">...</div> | |
| mixin cont | |
| .container | |
| block | |
| //- Row <div class="row">...</div> | |
| mixin row | |
| .row | |
| block | |
| //- Column <div class="col-md-6">...</div> | |
| mixin col | |
| div(class=attributes.class) | |
| block | |
| //- BUCKET SINGLE | |
| //- | |
| //- <div class=" col-lg-4 col-md-6 col-xs-12"> | |
| //- <h2>test bucket 1</h2> | |
| //- <p>Bucket One</p> | |
| //- <p><a href="google.com" roll="button" class="btn btn-default">View Details</a></p> | |
| //- </div> | |
| //- | |
| //- | |
| mixin bucket(heading, link, content) | |
| +col(class=" col-lg-4 col-md-6 col-xs-12") | |
| h2= heading | |
| p= content | |
| p | |
| a(class="btn btn-default", href=link, roll="button") View Details | |
| //- BUCKETS MULTIPLE ROW | |
| //- | |
| //- <div class="container"> | |
| //- <div class="row"> | |
| //- <div class=" col-lg-4 col-md-6 col-xs-12"> | |
| //- <h2>test bucket 1</h2> | |
| //- <p>Bucket One</p> | |
| //- <p><a href="google.com" roll="button" class="btn btn-default">View Details</a></p> | |
| //- </div> | |
| //- <div class=" col-lg-4 col-md-6 col-xs-12"> | |
| //- <h2>test bucket 1</h2> | |
| //- <p>Bucket One</p> | |
| //- <p><a href="google.com" roll="button" class="btn btn-default">View Details</a></p> | |
| //- </div> | |
| //- <div class=" col-lg-4 col-md-6 col-xs-12"> | |
| //- <h2>test bucket 1</h2> | |
| //- <p>Bucket One</p> | |
| //- <p><a href="google.com" roll="button" class="btn btn-default">View Details</a></p> | |
| //- </div> | |
| //- </div> | |
| //- </div> | |
| //- | |
| //- | |
| mixin buckets(items) | |
| +cont | |
| +row | |
| each item in items | |
| +bucket(item.title, item.url, item.content) | |
| //- HEAD STUFF | |
| //- | |
| //- <!DOCTYPE html> | |
| //- <meta charset="utf-8"> | |
| //- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| //- <meta name="viewport" content="width=device-width; initial-scale=1.0"> | |
| //- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"/> | |
| //- <script async="async" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> | |
| //- | |
| //- | |
| mixin header | |
| +h5 | |
| +bootstrap | |
| //- FOOTER STUFF | |
| //- | |
| //- <script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | |
| //- <script async="async" src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script> | |
| //- | |
| //- | |
| mixin footer | |
| +script(jquery) | |
| +script(less) | |
| //- type is a string that defines why kind of content to get back; | |
| //- the possible values are: characters, words, sentences; | |
| //- amount is a number that defines how many of the "type" to get back; | |
| //- lipsum(3, "words") > "maecenas accumsan aliquet"; always lowercase, no punctuation; | |
| //- lipsum(32, "characters") > "Cras pede libero, dapibus necp u"; | |
| //- lipsum(2, "sentences") > "Nam quis nulla. Integer malesuada."; | |
| mixin lorem(amount, type) | |
| //- this array will be loremText (by sentences); | |
| - var loremArray = new Array(); | |
| //- this string is cherry picked (by sentences) to build a random piece of content; | |
| - var loremText = "Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Pellentesque ipsum. Nulla non arcu lacinia neque faucibus fringilla. Nulla non lectus sed nisl molestie malesuada. Proin in tellus sit amet nibh dignissim sagittis. Vivamus luctus egestas leo. Maecenas sollicitudin. Nullam rhoncus aliquam metus. Etiam egestas wisi a erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna. Fusce nibh. Duis risus. Curabitur sagittis hendrerit ante. Aliquam erat volutpat. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Duis condimentum augue id magna semper rutrum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Fusce consectetuer risus a nunc. Aliquam ornare wisi eu metus. Integer pellentesque quam vel velit. Duis pulvinar. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia. Quisque tincidunt scelerisque libero. Maecenas libero. Etiam dictum tincidunt diam. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Suspendisse nisl. Sed convallis magna eu sem. Cras pede libero, dapibus nec, pretium sit amet, tempor quis, urna. Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer vulputate sem a nibh rutrum consequat. Maecenas lorem. Pellentesque pretium lectus id turpis. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Fusce wisi. Phasellus faucibus molestie nisl. Fusce eget urna. Curabitur vitae diam non enim vestibulum interdum. Nulla quis diam. Ut tempus purus at lorem. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dictum facilisis augue. Fusce tellus. Pellentesque arcu. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu, urna. Nullam at arcu a est sollicitudin euismod. Praesent dapibus. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nam sed tellus id magna elementum tincidunt. Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante orci, molestie vitae, vehicula venenatis, tincidunt ac, pede. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Etiam commodo dui eget wisi. Donec iaculis gravida nulla. Donec quis nibh at felis congue commodo. Etiam bibendum elit eget erat. Praesent in mauris eu tortor porttitor accumsan. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aenean fermentum risus id tortor. Integer imperdiet lectus quis justo. Integer tempor. Vivamus ac urna vel leo pretium faucibus. Mauris elementum mauris vitae tortor. In dapibus augue non sapien. Aliquam ante. Curabitur bibendum justo non orci. Integer in sapien. Fusce tellus odio, dapibus id, fermentum quis, suscipit id, erat. Fusce aliquam vestibulum ipsum. Aliquam erat volutpat. Pellentesque sapien. Cras elementum. Nulla pulvinar eleifend sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque porta. Vivamus porttitor turpis ac leo. Maecenas ipsum velit, consectetuer eu, lobortis ut, dictum at, dui. In rutrum. Sed ac dolor sit amet purus malesuada congue. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Suspendisse sagittis ultrices augue. Mauris metus. Nunc dapibus tortor vel mi dapibus sollicitudin. Etiam posuere lacus quis dolor. Praesent id justo in neque elementum ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In convallis. Fusce suscipit libero eget elit. Praesent vitae arcu tempor neque lacinia pretium. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam neque. Curabitur ligula sapien, pulvinar a, vestibulum quis, facilisis vel, sapien. Nullam eget nisl. Donec vitae arcu."; | |
| //- what we use to split the string on; | |
| - var sentenceSplit = ". "; | |
| //- the array to collect our random selection of content from loremText; | |
| - var lipsumArray = new Array(); | |
| //- a string of our randomly selected content; | |
| - var lipsumText = ""; | |
| //- our content to output; | |
| - var loremIpsum = ""; | |
| //- randomize the content; | |
| //- turn that giant string into an array (of sentences) so we can work with it; | |
| - loremArray = loremText.split(sentenceSplit); | |
| //- build a new random collection to work with; | |
| - loremArray.forEach(function() { | |
| //- grab a random sentence (might grab the same random sentences - it is random); | |
| - var randomSentence = loremArray[Math.floor(Math.random() * loremArray.length)]; | |
| //- insert it into the working array; | |
| - lipsumArray.push(randomSentence + sentenceSplit); | |
| //- insert it inot the working string; | |
| - lipsumText += randomSentence + sentenceSplit; | |
| - }); | |
| //- output the content based on the options passed into the mixin; | |
| //- output characters; | |
| - if (type === "characters") { | |
| //- we already created a random string of lorem ipsum, now we just need to grab X characters of it; | |
| - loremIpsum = lipsumText.substr(0, amount); | |
| //- output words | |
| - } else if (type === "words") { | |
| //- we have a random string of words, but we dont want punctuation; | |
| - lipsumText = lipsumText.toLowerCase(); | |
| - lipsumText = lipsumText.split(".").join(""); | |
| - lipsumText = lipsumText.split(",").join(""); | |
| - lipsumArray = lipsumText.split(" "); | |
| //- now we have an array of words without punctuation, we can grab X number of words; | |
| - for (var i = 0; i < amount; i++) { | |
| - loremIpsum += lipsumArray[i] + " "; | |
| - } | |
| //- capitalize the first letter of the first word; | |
| - loremIpsum = loremIpsum.charAt(0).toUpperCase() + loremIpsum.slice(1); | |
| //- output sentences; | |
| - } else if (type === "sentences") { | |
| //- we already created an array of random content, now we just need to grab X items from it; | |
| - for (var i = 0; i < amount; i++) { | |
| - loremIpsum += lipsumArray[i]; | |
| - } | |
| - } | |
| //- output what the dev asked for; | |
| =loremIpsum |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="width=device-width; initial-scale=1.0"> | |
| <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"/> | |
| <script async="async" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="article"> | |
| <div class="article-wrapper"> | |
| <h1>Hello world</h1><img src="http://placehold.it/200x200"> | |
| <p> Nulla turpis magna cursus sit amet suscipit a interdum id felis morbi gravida libero nec velit in rutrum aliquam erat volutpat fusce consectetuer risus a nunc phasellus faucibus molestie nisl nulla non lectus sed nisl molestie | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class=" col-lg-4 col-md-6 col-xs-12"> | |
| <h2>test bucket 1</h2> | |
| <p>Bucket One</p> | |
| <p><a href="google.com" roll="button" class="btn btn-default">View Details</a></p> | |
| </div> | |
| <div class=" col-lg-4 col-md-6 col-xs-12"> | |
| <h2>test bucket 1</h2> | |
| <p>Bucket One</p> | |
| <p><a href="google.com" roll="button" class="btn btn-default">View Details</a></p> | |
| </div> | |
| <div class=" col-lg-4 col-md-6 col-xs-12"> | |
| <h2>test bucket 1</h2> | |
| <p>Bucket One</p> | |
| <p><a href="google.com" roll="button" class="btn btn-default">View Details</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class=" col-lg-4 col-md-6 col-xs-12"> | |
| <h2>whatever</h2> | |
| <p>this is content</p> | |
| <p><a href="google.com" roll="button" class="btn btn-default">View Details</a></p> | |
| </div> | |
| <div class=" col-lg-4 col-md-6 col-xs-12"> | |
| <h2>whatever</h2> | |
| <p>this is content</p> | |
| <p><a href="google.com" roll="button" class="btn btn-default">View Details</a></p> | |
| </div> | |
| <div class=" col-lg-4 col-md-6 col-xs-12"> | |
| <h2>whatever</h2> | |
| <p>this is content</p> | |
| <p><a href="google.com" roll="button" class="btn btn-default">View Details</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| <script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | |
| <script async="async" src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is very very cool.