Skip to content
This repository has been archived by the owner on Mar 2, 2019. It is now read-only.

include system using grunt-bake #46

Closed
wants to merge 3 commits into from
Closed

include system using grunt-bake #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
09b88cf
include system using grunt-bake
mbrandorff Jul 4, 2013
ab854e9
Merge remote-tracking branch 'upstream/master'
mbrandorff Jul 4, 2013
645aa5f
include system using grunt-bake
mbrandorff Jul 4, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
27 changes: 26 additions & 1 deletion Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,12 @@ module.exports = function(grunt) {
pkg: grunt.file.readJSON( 'package.json' ),

watch: {
bake: {
files: [ "includes/**/*.html" ],
tasks: "bake:build"
},
build: {
files: ['scss/**/*.{sass,scss}', '**/*.html'],
files: ['scss/**/*.{sass,scss}', '**/*.html', '!includes/**'],
tasks: 'default',
options: {
livereload: true
Expand Down Expand Up @@ -59,8 +63,29 @@ module.exports = function(grunt) {
}
});

bake: {
build: {
options: {
content: "includes/content.json",
section: "default"
},

files: [
{
src : ['**/*.html', '!files/*.html'],
cwd : 'includes/',
dest : '.',
expand : true
}
]
},
}
});

// Default task
grunt.registerTask('default', ['sass', 'autoprefixer']);
grunt.registerTask('dev', ['connect', 'watch']);
grunt.registerTask('includes', ['bake']);

require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
};
143 changes: 143 additions & 0 deletions demos/buttons-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<title>Effeckt.css</title>

<meta name="description" content="UI-Less & Performant Transitions & Animations">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<link rel="stylesheet" href="../css/demo/demo.autoprefixed.css">

<!-- Individual module CSS files here -->
<!-- Should we combine or not combine? -->

<link rel="stylesheet" href="../css/modules/modals.autoprefixed.css">
<link rel="stylesheet" href="../css/modules/modals-1.autoprefixed.css">
<link rel="stylesheet" href="../css/modules/modals-2.autoprefixed.css">

<link rel="stylesheet" href="../css/modules/buttons-1.autoprefixed.css">

<link rel="stylesheet" href="../css/modules/list-items-1.autoprefixed.css">
</head>

<body>


<!-- dialogs first is important for ~ selector -->
<div class="effeckt-modal" id="effeckt-modal">
<h3>Modal Dialog</h3>
<div class="effeckt-modal-content">
<p>This is a modal window.</p>
<button class="effeckt-modal-close">Close me!</button>
</div>
</div>
<!-- overlay coming after is important for ~ selector -->
<div class="effeckt-overlay no-transitions" id="effeckt-overlay"></div>



<div class="page-wrap no-transitions" id="page-wrap">

<h1>
<span>E</span>
<span>f</span>
<span>f</span>
<span>e</span>
<span>c</span>
<span>k</span>
<span>t</span>
<span>.</span>
<span>c</span>
<span>s</span>
<span>s</span>
</h1>
<subhead>Performant CSS transitions & animations</subhead>

<!-- TODO: Break this up into separate files -->
<!-- Possibilities:
1. Grunt includes https://github.com/vanetix/grunt-includes
2. Jade includes
3. $.load with jQuery
4. Something else? PHP?
-->

<div class="effeckt effeckt-demo-buttons-1 group">
<h2>
Buttons 1
<a href="http://lab.hakim.se/ladda/">(source)</a>
<a href="../demos/buttons-1.html">#</a>
</h2>
<div class="button-demo-wrap">
<button class="ladda-button expand-right"><span class="label">Expand Right</span> <span class="spinner"></span></button>
</div>

<div class="button-demo-wrap">
<button class="ladda-button expand-left"><span class="label">Expand Left</span> <span class="spinner"></span></button>
</div>

<div class="button-demo-wrap">
<button class="ladda-button expand-up"><span class="label">Expand Up</span> <span class="spinner"></span></button>
</div>

<div class="button-demo-wrap">
<button class="ladda-button expand-down"><span class="label">Expand Down</span> <span class="spinner"></span></button>
</div>

<div class="button-demo-wrap">
<button class="ladda-button slide-left"><span class="label">Slide Left</span> <span class="spinner"></span></button>
</div>

<div class="button-demo-wrap">
<button class="ladda-button slide-right"><span class="label">Slide Right</span> <span class="spinner"></span></button>
</div>

<div class="button-demo-wrap">
<button class="ladda-button slide-up"><span class="label">Slide Up</span> <span class="spinner"></span></button>
</div>

<div class="button-demo-wrap">
<button class="ladda-button slide-down"><span class="label">Slide Down</span> <span class="spinner"></span></button>
</div>

<div class="button-demo-wrap">
<button class="ladda-button zoom-out"><span class="label">Zoom Out</span> <span class="spinner"></span></button>
</div>

<div class="button-demo-wrap">
<button class="ladda-button zoom-in"><span class="label">Zoom in</span> <span class="spinner"></span></button>
</div>

</div>

</div><!-- div.page-wrap -->



<!-- libs -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<!-- for modals-2 -->
<script src="../js/libs/classie.js"></script>

<!-- demo -->
<script src="../js/demo/demo.js"></script>


<!-- Individual module JS files here -->
<!-- Should we combine or not combine? -->
<!-- Should we provide minified versions? -->
<script src="../js/modules/modals-1.js"></script>
<script src="../js/modules/modals-2.js"></script>

<script src="../js/modules/buttons-1.js"></script>

<script src="../js/modules/list-items-1.js"></script>
</body>

</html>
125 changes: 125 additions & 0 deletions demos/listitems-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<title>Effeckt.css</title>

<meta name="description" content="UI-Less & Performant Transitions & Animations">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<link rel="stylesheet" href="../css/demo/demo.autoprefixed.css">

<!-- Individual module CSS files here -->
<!-- Should we combine or not combine? -->

<link rel="stylesheet" href="../css/modules/modals.autoprefixed.css">
<link rel="stylesheet" href="../css/modules/modals-1.autoprefixed.css">
<link rel="stylesheet" href="../css/modules/modals-2.autoprefixed.css">

<link rel="stylesheet" href="../css/modules/buttons-1.autoprefixed.css">

<link rel="stylesheet" href="../css/modules/list-items-1.autoprefixed.css">
</head>

<body>


<!-- dialogs first is important for ~ selector -->
<div class="effeckt-modal" id="effeckt-modal">
<h3>Modal Dialog</h3>
<div class="effeckt-modal-content">
<p>This is a modal window.</p>
<button class="effeckt-modal-close">Close me!</button>
</div>
</div>
<!-- overlay coming after is important for ~ selector -->
<div class="effeckt-overlay no-transitions" id="effeckt-overlay"></div>



<div class="page-wrap no-transitions" id="page-wrap">

<h1>
<span>E</span>
<span>f</span>
<span>f</span>
<span>e</span>
<span>c</span>
<span>k</span>
<span>t</span>
<span>.</span>
<span>c</span>
<span>s</span>
<span>s</span>
</h1>
<subhead>Performant CSS transitions & animations</subhead>

<!-- TODO: Break this up into separate files -->
<!-- Possibilities:
1. Grunt includes https://github.com/vanetix/grunt-includes
2. Jade includes
3. $.load with jQuery
4. Something else? PHP?
-->

<div class="effeckt effeckt-demo-listitems-1 group">
<h2>
List Items 1
<a href="http://css-tricks.com/transitional-interfaces-coded/">(source)</a>
<a href="../demos/listitems-1.html">#</a>
</h2>
<div class="effeckt-list-wrap" style="padding-right: 20px;">
<h4>Gap, Slide In</h4>
<ul class="effeckt-list" data-type="pop-in">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<button class="">Add</button>
</div>

<div class="effeckt-list-wrap">
<h4>Expand In</h4>
<ul class="effeckt-list" data-type="expand-in">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<button>Add</button>
</div>

</div>

</div><!-- div.page-wrap -->



<!-- libs -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<!-- for modals-2 -->
<script src="../js/libs/classie.js"></script>

<!-- demo -->
<script src="../js/demo/demo.js"></script>


<!-- Individual module JS files here -->
<!-- Should we combine or not combine? -->
<!-- Should we provide minified versions? -->
<script src="../js/modules/modals-1.js"></script>
<script src="../js/modules/modals-2.js"></script>

<script src="../js/modules/buttons-1.js"></script>

<script src="../js/modules/list-items-1.js"></script>
</body>

</html>