deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-07 00:12:29 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' of github.com:papercss/papercss into gulpfile

Browse source
This commit is contained in:
Thomas Cazade 2017-12-08 11:49:09 +01:00
parent 838d41d6df 4bb6627ecc
commit 52ac6a22f1
31 changed files with 16151 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -1,3 +1,4 @@
/node_modules
npm-debug.log
/dist
/dist
/tests/node_modules

27
.travis.yml Normal file
View file

@ -0,0 +1,27 @@
language: node_js
node_js: "8.8.1"
notifications:
slack:
rooms:
- papercss:1MrmPTVH6FLA95Oa5IfXl7xQ#travis
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable fluxbox
before_script:
- "sh -e /etc/init.d/xvfb start"
- sleep 3
- fluxbox >/dev/null 2>&1 &
- chmod +x ./jake.sh
- chmod +x ./tests/build/scripts/run_jake.sh
- export DISPLAY=:99.0
- npm install karma-firefox-launcher
- node node_modules/gulp/bin/gulp.js build
script: "./jake.sh loose=true capture=Firefox"

117
Jakefile.js Normal file
View file

@ -0,0 +1,117 @@
// Copyright (c) 2012-2014 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
// Main build file. Contains all tasks needed for normal development.
// There's no Quixote-specific configuration in this file.
(function() {
"use strict";
var startTime = Date.now();
var shell = require("shelljs");
var karma = require("simplebuild-karma");
var browserify = require("./tests/build/util/browserify_runner.js");
var browsers = require("./tests/build/config/tested_browsers.js");
var paths = require("./tests/build/config/paths.js");
var KARMA_CONFIG = "./tests/build/config/karma.conf.js";
var strict = !process.env.loose;
//*** GENERAL
desc("Lint and test");
task("default", [ "lint", "test" ], function() {
var elapsedSeconds = (Date.now() - startTime) / 1000;
console.log("\n\nBUILD OK (" + elapsedSeconds.toFixed(2) + "s)");
});
desc("Start server (for manual testing)");
task("run", [ "build" ], function() {
jake.exec("node ../node_modules/http-server/bin/http-server " + paths.clientDistDir, { interactive: true }, complete);
}, { async: true });
desc("Delete generated files");
task("clean", function() {
shell.rm("-rf", paths.generatedDir);
});
//*** LINT
/** */
desc("Lint everything");
task("lint", ["lintNode", "lintClient"]);
task("lintNode", function() {
process.stdout.write("Linting Node.js code: ");
}, { async: false });
task("lintClient", function() {
process.stdout.write("Linting browser code: ");
}, { async: false });
//*** TEST
desc("Start Karma server -- run this first");
task("karma", function() {
karma.start({
configFile: KARMA_CONFIG
}, complete, fail);
}, { async: true });
desc("Run tests");
task("test", function() {
console.log("Testing browser code: ");
var browsersToCapture = process.env.capture ? process.env.capture.split(",") : [];
karma.run({
configFile: KARMA_CONFIG,
expectedBrowsers: browsers,
strict: strict,
capture: browsersToCapture
}, complete, fail);
}, { async: true });
//*** BUILD
desc("Build distribution package");
task("build", [ "prepDistDir", "buildClient" ]);
task("prepDistDir", function() {
shell.rm("-rf", paths.distDir);
});
task("buildClient", [ paths.clientDistDir, "bundleClientJs" ], function() {
console.log("Copying client code: .");
shell.cp(
paths.clientDir + "/*.html",
paths.clientDir + "/*.css",
paths.clientDir + "/*.svg",
paths.clientDistDir
);
});
task("bundleClientJs", [ paths.clientDistDir ], function() {
console.log("Bundling browser code with Browserify: .");
browserify.bundle({
entry: paths.clientEntryPoint,
outfile: paths.clientDistBundle,
options: {
standalone: "toggle",
debug: true
}
}, complete, fail);
}, { async: true });
//*** CREATE DIRECTORIES
directory(paths.testDir);
directory(paths.clientDistDir);
}());

2
README.md
View file

@ -1,6 +1,8 @@
# PaperCSS
### The Less Formal CSS Framework
[![Build Status](https://travis-ci.org/papercss/papercss.svg?branch=master)](https://travis-ci.org/papercss/papercss)
## Demo & Docs
View the demo & docs at [getpapercss.com](https://www.getpapercss.com)

19
demo.css
View file

@ -13,4 +13,23 @@ body {
}
.summary a {
color: #41403e;
}
.to-top {
opacity: 1;
display: inline-block;
padding: 1em;
position: fixed;
bottom: 1em;
right: 1em
}
.to-top .paper-btn {
padding: .6em 1em;
background: #fff;
border-top-left-radius: 185px 160px;
border-top-right-radius: 200px 195px;
border-bottom-right-radius: 160px 195px;
border-bottom-left-radius: 185px 190px
}
.demo-title:hover + .to-top {
opacity: 0
}

291
index.html
View file

@ -30,7 +30,7 @@
<body>
<div class="container">
<div class=" paper">
<div class="demo-title">
<div id="top" class="demo-title">
<div class="row flex-center">
<div class="text-center">
<h1>PaperCSS</h1>
@ -63,10 +63,13 @@
<li><a href="#utilities">Utilities</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#article">Article</a></li>
</ul>
</div>
<div class="to-top">
<a href="#top" class="paper-btn margin">^</a>
</div>
<div id="flexbox" class="section">
<h2>Flexbox</h2>
<h4>Flexgrid</h4>
@ -141,8 +144,7 @@
</div>
</div>
<div class="docs">
<pre>
&lt;div class=&quot;row&quot;&gt;
<pre><code>&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-4 col&quot;&gt;col-4 col&lt;/div&gt;
&lt;div class=&quot;col-4 col&quot;&gt;col-4 col&lt;/div&gt;
&lt;div class=&quot;col-4 col&quot;&gt;col-4 col&lt;/div&gt;
@ -206,7 +208,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code></pre>
</div>
</div>
<div id="typography" class="section">
@ -224,14 +226,13 @@
imperdiet sapien nec, interdum fringilla lorem. Morbi sed arcu facilisis, maximus justo vel, porttitor nisl. Nam
suscipit metus facilisis iaculis vestibulum.</p>
<div class="docs">
<pre>
&lt;h1&gt;Heading 1&lt;/h1&gt;
<pre><code>&lt;h1&gt;Heading 1&lt;/h1&gt;
&lt;h2&gt;Heading 2&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;/h3&gt;
&lt;h4&gt;Heading 4&lt;/h4&gt;
&lt;h5&gt;Heading 5&lt;/h5&gt;
&lt;h6&gt;Heading 6&lt;/h6&gt;
&lt;p&gt;Lorem ipsum dolor....&lt;/p&gt;</pre>
&lt;p&gt;Lorem ipsum dolor....&lt;/p&gt;</code></pre>
</div>
</div>
<div id="buttons" class="section">
@ -249,8 +250,7 @@
<button class="disabled">Disabled</button>
<button disabled>Disabled</button>
<div class="docs">
<pre>
&lt;p&gt;Insprired by &lt;a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank"&gt;Imperfect Buttons&lt;/a&gt;&lt;/p&gt;
<pre><code>&lt;p&gt;Insprired by &lt;a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank"&gt;Imperfect Buttons&lt;/a&gt;&lt;/p&gt;
&lt;button class="btn-large"&gt;Large&lt;/button&gt;
&lt;button&gt;Default&lt;/button&gt;
&lt;button class="btn-small"&gt;Small&lt;/button&gt;
@ -261,7 +261,7 @@
&lt;/div&gt;
&lt;/div&gt;
&lt;button class="disabled"&gt;Disabled&lt;/button&gt;
&lt;button disabled&gt;Disabled&lt;/button&gt;</pre>
&lt;button disabled&gt;Disabled&lt;/button&gt;</code></pre>
</div>
<h4>Colors</h4>
<input type="button" class="paper-btn btn-primary" value="Primary"/>
@ -270,13 +270,12 @@
<button class="btn-warning">Warning</button>
<button class="btn-danger">Danger</button>
<div class="docs">
<pre>
&lt;input type="button" class="paper-btn btn-primary" value="Primary"/&gt;
<pre><code> &lt;input type="button" class="paper-btn btn-primary" value="Primary"/&gt;
&lt;input type="button" class="btn-secondary" value="Secondary"/&gt;
&lt;button class="btn-success"&gt;Success&lt;/button&gt;
&lt;button class="btn-warning"&gt;Warning&lt;/button&gt;
&lt;button class="btn-danger"&gt;Danger&lt;/button&gt;
</pre>
</code></pre>
</div>
</div>
<div id="forms" class="section">
@ -338,8 +337,7 @@
</label>
</fieldset>
<div class="docs">
<pre>
&lt;div class="form-group"&gt;
<pre><code>&lt;div class="form-group"&gt;
&lt;label for="paperInputs1"&gt;Input&lt;/label&gt;
&lt;input type="text" placeholder="Nice input" id="paperInputs1"&gt;
&lt;/div&gt;
@ -395,7 +393,7 @@
&lt;input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"&gt; &lt;span&gt;This is the second check&lt;/span&gt;
&lt;/label&gt;
&lt;/fieldset&gt;
</pre>
</code></pre>
</div>
</div>
<div id="lists" class="section">
@ -445,9 +443,15 @@
</ul>
<li>And now we're are the top!</li>
</ul>
<h4>Inline List</h4>
<ul class="inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<div class="docs">
<pre>
&lt;ol&gt;
<pre><code>&lt;ol&gt;
&lt;li&gt;Do this&lt;/li&gt;
&lt;li&gt;Then this&lt;/li&gt;
&lt;li&gt;Finally this&lt;/li&gt;
@ -471,7 +475,7 @@
&lt;li&gt;But don't forget this&lt;/li&gt;
&lt;/ol&gt;
&lt;!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! --&gt;</pre>
&lt;!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! --&gt;</code></pre>
</div>
</div>
<div id="code" class="section">
@ -479,20 +483,18 @@
<p>Let's make some pretty <code>&lt;code&gt;</code></p>
<p>Print files backwards using <kbd>tac</kbd></p>
<p>To stop a process, hit <kbd>ctrl + c</kbd></p>
<pre>
function add(x, y) {
<pre><code>function add(x, y) {
return x + y;
} </pre>
} </code></pre>
<div class="docs">
<pre>
&lt;p&gt;Let's make some pretty &lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt;&lt;/p&gt;
<pre><code>&lt;p&gt;Let's make some pretty &lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Print files backwards using &lt;kbd&gt;tac&lt;/kbd&gt;&lt;/p&gt;
&lt;p&gt;To stop a process, hit &lt;kbd&gt;ctrl + c&lt;/kbd&gt;&lt;/p&gt;
&lt;pre&gt;
function add(x, y) {
return x + y;
}
&lt;/pre&gt;</pre>
&lt;/pre&gt;</code></pre>
</div>
</div>
<div id="tables" class="section">
@ -591,8 +593,7 @@ function add(x, y) {
</tbody>
</table>
<div class="docs">
<pre>
&lt;table&gt;
<pre><code>&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;#&lt;/th&gt;
@ -625,7 +626,7 @@ function add(x, y) {
&lt;!-- Add table-hover or table-alternating to change the style of the table --&gt;
&lt;table class=&quot;table-hover&quot;&gt;
&lt;table class=&quot;table-alternating&quot;&gt;</pre>
&lt;table class=&quot;table-alternating&quot;&gt;</code></pre>
</div>
</div>
<div id="popovers" class="section">
@ -649,11 +650,10 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;p popover-left="Popover on left"&gt;Popover left position&lt;/p&gt;
<pre><code>&lt;p popover-left="Popover on left"&gt;Popover left position&lt;/p&gt;
&lt;p popover-top="Popover on top"&gt;Popover top position&lt;/p&gt;
&lt;p popover-bottom="Popover on bottom"&gt;Popover bottom position&lt;/p&gt;
&lt;p popover-right="Popover on right"&gt;Popover right position&lt;/p&gt;</pre>
&lt;p popover-right="Popover on right"&gt;Popover right position&lt;/p&gt;</code></pre>
</div>
<p>But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...</p>
@ -665,11 +665,10 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;button popover-top="Popover on top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
<pre><code>&lt;button popover-top="Popover on top"&gt;Popover on top and on a button!&lt;/button&gt;</code></pre>
</div>
</div>
<div id="cards" class="section">
<h2>Cards</h2>
<h4>Full card example</h4>
@ -688,8 +687,7 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
<pre><code>&lt;div class="card" style="width: 20rem;"&gt;
&lt;img src="https://picsum.photos/768" alt="Card example image"&gt;
&lt;div class="card-body"&gt;
@ -698,7 +696,7 @@ function add(x, y) {
&lt;p class="card-text"&gt;Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.&lt;/p&gt;
&lt;button&gt;Let me go here!&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Card title, text, links</h4>
@ -715,8 +713,7 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
<pre><code>&lt;div class="card" style="width: 20rem;"&gt;
&lt;div class="card-body"&gt;
&lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
&lt;h5 class="card-subtitle"&gt;Nice looking subtitle.&lt;/h5&gt;
@ -724,7 +721,7 @@ function add(x, y) {
&lt;a class="card-link" href="#"&gt;First link&lt;/a&gt;
&lt;a class="card-link" href="#"&gt;Second link&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Image on top or bottom</h4>
@ -741,8 +738,7 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
<pre><code>&lt;div class="card" style="width: 20rem;"&gt;
&lt;div class="card-body"&gt;
&lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
&lt;h5 class="card-subtitle"&gt;Nice looking subtitle.&lt;/h5&gt;
@ -750,7 +746,7 @@ function add(x, y) {
&lt;button&gt;Let me go here!&lt;/button&gt;
&lt;/div&gt;
&lt;img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image"&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Header and footer</h4>
@ -768,8 +764,7 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
<pre><code>&lt;div class="card" style="width: 20rem;"&gt;
&lt;div class="card-header"&gt;Header&lt;/div&gt;
&lt;div class="card-body"&gt;
&lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
@ -779,7 +774,7 @@ function add(x, y) {
&lt;/div&gt;
&lt;div class="card-footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;
</pre>
</code></pre>
</div>
</div>
@ -796,13 +791,12 @@ function add(x, y) {
<h6>Example h6 heading <span class="badge">123</span></h6>
<div class="docs">
<pre>
&lt;h1&gt;Example h1 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h1&gt;
<pre><code>&lt;h1&gt;Example h1 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Example h2 heading &lt;span class="badge secondary"&gt;123&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Example h3 heading &lt;span class="badge success"&gt;123&lt;/span&gt;&lt;/h3&gt;
&lt;h4&gt;Example h4 heading &lt;span class="badge warning"&gt;123&lt;/span&gt;&lt;/h4&gt;
&lt;h5&gt;Example h5 heading &lt;span class="badge danger"&gt;123&lt;/span&gt;&lt;/h5&gt;
&lt;h6&gt;Example h6 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h6&gt;</pre>
&lt;h6&gt;Example h6 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h6&gt;</code></pre>
</div>
</div>
@ -816,13 +810,12 @@ function add(x, y) {
<p class="text-danger">Text danger</p>
<p class="text-muted">Text muted</p>
<div class="docs">
<pre>
&lt;p class=&quot;text-primary&quot;&gt;Text primary&lt;/p&gt;
<pre><code>&lt;p class=&quot;text-primary&quot;&gt;Text primary&lt;/p&gt;
&lt;p class=&quot;text-secondary&quot;&gt;Text secondary&lt;/p&gt;
&lt;p class=&quot;text-success&quot;&gt;Text success&lt;/p&gt;
&lt;p class=&quot;text-warning&quot;&gt;Text warning&lt;/p&gt;
&lt;p class=&quot;text-danger&quot;&gt;Text danger&lt;/p&gt;
&lt;p class="text-muted"&gt;Text muted&lt;/p&gt; </pre>
&lt;p class="text-muted"&gt;Text muted&lt;/p&gt; </code></pre>
</div>
<h4>Backgrounds</h4>
<div class="row flex-center">
@ -833,14 +826,13 @@ function add(x, y) {
<div class="sm-2 col background-danger">Background danger</div>
</div>
<div class="docs">
<pre>
&lt;div class=&quot;row flex-center&quot;&gt;
<pre><code>&lt;div class=&quot;row flex-center&quot;&gt;
&lt;div class=&quot;sm-2 col background-primary&quot;&gt;Background primary&lt;/div&gt;
&lt;div class=&quot;sm-2 col background-secondary&quot;&gt;Background secondary&lt;/div&gt;
&lt;div class=&quot;sm-2 col background-success&quot;&gt;Background success&lt;/div&gt;
&lt;div class=&quot;sm-2 col background-warning&quot;&gt;Background warning&lt;/div&gt;
&lt;div class=&quot;sm-2 col background-danger&quot;&gt;Background danger&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
</div>
<div id="borders" class="section">
@ -857,8 +849,7 @@ function add(x, y) {
<div class="sm-3 col border border-6 border-primary">Border-6</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces"&gt;
<pre><code>&lt;div class="row flex-spaces"&gt;
&lt;div class="sm-3 col border border-primary"&gt;Default Border&lt;/div&gt;
&lt;div class="sm-3 col border border-2 border-primary"&gt;Border-2&lt;/div&gt;
&lt;div class="sm-3 col border border-3 border-primary"&gt;Border-3&lt;/div&gt;
@ -867,7 +858,7 @@ function add(x, y) {
&lt;div class="sm-3 col border border-4 border-primary"&gt;Border-4&lt;/div&gt;
&lt;div class="sm-3 col border border-5 border-primary"&gt;Border-5&lt;/div&gt;
&lt;div class="sm-3 col border border-6 border-primary"&gt;Border-6&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Border Colors</h4>
<div class="row child-borders">
@ -879,8 +870,7 @@ function add(x, y) {
<div class="sm-2 col border background-primary border-white">Border white</div>
</div>
<div class="docs">
<pre>
&lt;div class="row child-borders"&gt;
<pre><code>&lt;div class="row child-borders"&gt;
&lt;div class="sm-2 col border border-primary"&gt;Border primary&lt;/div&gt;
&lt;div class="sm-2 col border border-secondary"&gt;Border secondary&lt;/div&gt;
&lt;div class="sm-2 col border border-success"&gt;Border success&lt;/div&gt;
@ -895,7 +885,7 @@ function add(x, y) {
&lt;div class="sm-2 col border border-warning"&gt;Border warning&lt;/div&gt;
&lt;div class="sm-2 col border border-danger"&gt;Border danger&lt;/div&gt;
&lt;div class="sm-2 col border background-primary border-white"&gt;Border white&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Child Borders</h4>
<p>Use this if you want all children to have a border. This will alternate through the different border styles defined above instead of having to add the border class for each element.</p>
@ -908,15 +898,14 @@ function add(x, y) {
<div class="sm-2 col">6</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-center child-borders"&gt;
<pre><code>&lt;div class="row flex-center child-borders"&gt;
&lt;div class="sm-2 col"&gt;1&lt;/div&gt;
&lt;div class="sm-2 col"&gt;2&lt;/div&gt;
&lt;div class="sm-2 col"&gt;3&lt;/div&gt;
&lt;div class="sm-2 col"&gt;4&lt;/div&gt;
&lt;div class="sm-2 col"&gt;5&lt;/div&gt;
&lt;div class="sm-2 col"&gt;6&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Border Styles</h4>
<div class="row flex-spaces child-borders">
@ -926,13 +915,12 @@ function add(x, y) {
<div class="sm-3 col border-dotted border-thick">Dotted Thick</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders"&gt;
&lt;div class="sm-3 col border-dashed"&gt;Dashed&lt;/div&gt;
&lt;div class="sm-3 col border-dotted"&gt;Dotted&lt;/div&gt;
&lt;div class="sm-3 col border-dashed border-thick"&gt;Dashed Thick&lt;/div&gt;
&lt;div class="sm-3 col border-dotted border-thick"&gt;Dotted Thick&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Shadows</h4>
<div class="row flex-spaces child-borders">
@ -942,13 +930,12 @@ function add(x, y) {
<div class="sm-3 col shadow shadow-hover">Hover</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders"&gt;
&lt;div class="sm-3 col shadow shadow-large"&gt;Large&lt;/div&gt;
&lt;div class="sm-3 col shadow"&gt;Default&lt;/div&gt;
&lt;div class="sm-3 col shadow shadow-small"&gt;Small&lt;/div&gt;
&lt;div class="sm-3 col shadow shadow-hover"&gt;Hover&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Child Shadows</h4>
<p>Use this if you want all children to have a shadow.</p>
@ -958,12 +945,11 @@ function add(x, y) {
<div class="sm-3 col">Shadow</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders child-shadows"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders child-shadows"&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Child Shadows Hover</h4>
<p>Use this if you want all children to have a shadow... that changes on hover</p>
@ -973,12 +959,11 @@ function add(x, y) {
<div class="sm-3 col">Shadow</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders child-shadows-hover"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders child-shadows-hover"&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
</div>
<div id="utilities" class="section">
@ -990,12 +975,11 @@ function add(x, y) {
<div class="sm-3 col margin-top-small">Margin-top-small</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders"&gt;
&lt;div class="sm-3 col margin"&gt;Margin&lt;/div&gt;
&lt;div class="sm-3 col margin-large"&gt;Margin-large&lt;/div&gt;
&lt;div class="sm-3 col margin-top-small"&gt;Margin-top-small&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Padding</h4>
<div class="row flex-spaces child-borders">
@ -1004,12 +988,11 @@ function add(x, y) {
<div class="sm-3 col padding-left-large">Padding-left-large</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders"&gt;
&lt;div class="sm-3 col padding-small"&gt;Padding-small&lt;/div&gt;
&lt;div class="sm-3 col padding-none"&gt;Padding-none&lt;/div&gt;
&lt;div class="sm-3 col padding-left-large"&gt;Padding-left-large&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
</div>
<div id="images" class="section">
@ -1018,8 +1001,7 @@ function add(x, y) {
<p>Images by default are responsive</p>
<img src="https://unsplash.it/900" alt="Random Unsplash">
<div class="docs">
<pre>
&lt;img src="https://unsplash.it/900" alt="Random Unsplash"&gt;</pre>
<pre><code>&lt;img src="https://unsplash.it/900" alt="Random Unsplash"&gt;</code></pre>
</div>
<h4>Float</h4>
<p>You can also float responsive images to fit neatly with your text</p>
@ -1031,20 +1013,18 @@ function add(x, y) {
Aenean mauris tellus, facilisis sed quam non, tincidunt rutrum risus. Fusce quam urna, commodo vitae nunc condimentum, efficitur commodo libero. Sed dignissim odio enim, ac pharetra dui laoreet id. Suspendisse nec accumsan erat. Integer sit amet leo arcu. Proin sagittis blandit tempor. Vivamus at egestas lectus. Mauris eros tellus, egestas ac neque eget, lacinia sagittis ante. Phasellus faucibus suscipit erat, eget malesuada neque congue non.
</p>
<div class="docs">
<pre>
&lt;p&gt;
<pre><code>&lt;p&gt;
&lt;img src="https://unsplash.it/200" class="float-left"&gt;
Lorem ipsum dolor.......
&lt;img src="https://unsplash.it/100" class="float-right"&gt;
Aenean mauris tellus......
&lt;/p&gt;</pre>
&lt;/p&gt;</code></pre>
</div>
<h4>No Responsive &amp; No Borders</h4>
<p>If you don't like the default, you can just add the class <code>no-responsive</code> to prevent the image from being responsive. You can also remove the default border with <code>no-border</code>.</p>
<img src="https://unsplash.it/300" alt="Not responsive Unsplash" class="no-responsive no-border">
<div class="docs">
<pre>
&lt;img src="https://unsplash.it/300" class="no-responsive no-border"&gt;</pre>
<pre><code>&lt;img src="https://unsplash.it/300" class="no-responsive no-border"&gt;</code></pre>
</div>
</div>
<div id="alerts" class="section">
@ -1067,22 +1047,125 @@ function add(x, y) {
</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces"&gt;
&lt;div class="alert alert-primary"&gt;Alert-primary&lt;/div&gt;
&lt;div class="alert alert-secondary"&gt;Alert-secondary&lt;/div&gt;
&lt;div class="alert alert-success"&gt;Alert-success&lt;/div&gt;
&lt;div class="alert alert-warning"&gt;Alert-warning&lt;/div&gt;
&lt;div class="alert alert-danger"&gt;Alert-danger&lt;/div&gt;
&lt;/div&gt;</pre>
<pre><code>&lt;div class="row flex-spaces"&gt;
&lt;div class="alert alert-primary"&gt;Alert-primary&lt;/div&gt;
&lt;div class="alert alert-secondary"&gt;Alert-secondary&lt;/div&gt;
&lt;div class="alert alert-success"&gt;Alert-success&lt;/div&gt;
&lt;div class="alert alert-warning"&gt;Alert-warning&lt;/div&gt;
&lt;div class="alert alert-danger"&gt;Alert-danger&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
<div id="tabs" class="section">
<h2>Tabs</h2>
<div class="row flex-spaces tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Tab 4</label>
<div class="content" id="content1">
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter
rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump.
Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</div>
<div class="content" id="content2">
<p>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball
t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine
chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock.
Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork
chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank.
Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami
beef ribs.
</p>
</div>
<div class="content" id="content3">
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter
rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump.
Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</div>
<div class="content" id="content4">
<p>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball
t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine
chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock.
Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork
chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank.
Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami
beef ribs.
</p>
</div>
</div>
<div class="docs">
<pre><code>&lt;div class="row flex-spaces tabs"&gt;
&lt;input id="tab1" type="radio" name="tabs" checked&gt;
&lt;label for="tab1"&gt;Tab 1&lt;/label&gt;
&lt;input id="tab2" type="radio" name="tabs"&gt;
&lt;label for="tab2"&gt;Tab 2&lt;/label&gt;
&lt;input id="tab3" type="radio" name="tabs"&gt;
&lt;label for="tab3"&gt;Tab 3&lt;/label&gt;
&lt;input id="tab4" type="radio" name="tabs"&gt;
&lt;label for="tab4"&gt;Tab 4&lt;/label&gt;
&lt;div class="content" id="content1"&gt;
&lt;p&gt;
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa...
&lt;/p&gt;
&lt;p&gt;
Brisket meatball turkey short loin boudin leberkas meatloaf...
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="content" id="content2"&gt;
&lt;p&gt;
Bacon ipsum dolor sit amet landjaeger sausage brisket...
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="content" id="content3"&gt;
&lt;p&gt;
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa...
&lt;/p&gt;
&lt;p&gt;
Brisket meatball turkey short loin boudin leberkas meatloaf...
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="content" id="content4"&gt;
&lt;p&gt;
Bacon ipsum dolor sit amet landjaeger sausage brisket...
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
<div id="article" class="section">
<h2>Article</h2>
<article class="article">
<h1 class="article-title"><a href="">Article Title</a></h1>
<p class="article-meta">Written by <a href="#">Super User</a> on 24 November 2017. Posted in <a href="#">Blog</a></p>
@ -1098,8 +1181,7 @@ function add(x, y) {
</article>
<div class="docs">
<pre>
&lt;article class="article"&gt;
<pre><code>&lt;article class="article"&gt;
&lt;h1 class="article-title"&gt;&lt;a href=""&gt;Article Title&lt;/a&gt;&lt;/h1&gt;
&lt;p class="article-meta"&gt;Written by &lt;a href="#"&gt;Super User&lt;/a&gt;&lt;/p&gt;
&lt;p class="text-lead"&gt; Lorem... &lt;/p&gt;
@ -1110,7 +1192,7 @@ function add(x, y) {
&lt;button&gt;5 Comments&lt;/button&gt;
&lt;/div&gt;
&lt;/article&gt;
</pre>
</code></pre>
</div>
</div>
@ -1141,8 +1223,7 @@ function add(x, y) {
</ul>
<p>Here's a quck snippet to get started with PaperCSS:</p>
<div class="docs">
<pre>
&lt;!DOCTYPE html&gt;
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
@ -1159,7 +1240,7 @@ function add(x, y) {
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
&lt;/html&gt;</code></pre>
</div>
<h4>Build it Yourself</h4>
<p>If you'd rather customize things, you can build the CSS yourself via the git repo</p>

1
jake.bat Normal file
View file

@ -0,0 +1 @@
@call tests\build\scripts\run_jake -f tests\build\scripts\build.Jakefile.js %*

2
jake.sh Normal file
View file

@ -0,0 +1,2 @@
#!/bin/sh
. tests/build/scripts/run_jake.sh -f tests/build/scripts/build.Jakefile.js $*

25
package.json
View file

@ -20,6 +20,8 @@
},
"homepage": "https://github.com/rhyneav/papercss#readme",
"devDependencies": {
"browserify": "^14.1.0",
"chai": "^4.1.2",
"gulp": "3.9.1",
"gulp-clean-css": "3.9.0",
"gulp-connect": "5.0.0",
@ -27,10 +29,33 @@
"gulp-plumber": "1.1.0",
"gulp-rename": "1.2.2",
"gulp-watch-less": "1.0.1",
"http-server": "^0.9.0",
"install": "0.10.1",
"jake": "^8.0.15",
"jshint": "^2.9.4",
"karma": "^1.7.1",
"karma-chai": "^0.1.0",
"karma-commonjs": "1.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.3.0",
"karma-node-modules-middleware": "^1.0.1",
"karma-quixote": "^1.0.0",
"karma-requirejs": "^1.1.0",
"less": "2.7.2",
"mocha": "^4.0.1",
"nodemon": "^1.11.0",
"normalize.css": "7.0.0",
"npm": "5.3.0",
"object-merge": "^2.5.1",
"os": "^0.1.1",
"procfile": "^0.1.1",
"quixote": "^0.14.0",
"request": "^2.83.0",
"requirejs": "^2.3.5",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"simplebuild-jshint": "^1.3.0",
"simplebuild-karma": "^1.0.0",
"webpack-dev-server": "2.7.1"
}
}

10
src/code.less
View file

@ -26,5 +26,13 @@ pre {
border: 1px solid lighten(@primary, 50%);
border-radius: 3px;
overflow-x: auto;
white-space: pre-wrap;
white-space: pre;
}
pre code{
color: inherit;
background: transparent;
display: block;
font-size: inherit;
padding: initial;
white-space:pre;
}

4
src/lists.less
View file

@ -41,4 +41,8 @@ ul {
}
}
}
&.inline li{
display: inline;
margin-left: 5px;
}
}

3
src/styles.less
View file

@ -17,4 +17,5 @@
@import (less) "./cards.less";
@import (less) "./badges.less";
@import (less) "./alerts.less";
@import (less) "./article.less";
@import (less) "./tabs.less";
@import (less) "./article.less";

38
src/tabs.less Normal file
View file

@ -0,0 +1,38 @@
.tabs {
.content {
display: none;
padding: 0.75rem 0 0;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 0.75rem 0.75rem;
font-weight: 600;
text-align: center;
color: @primary-light;
}
label:hover {
color: @muted;
cursor: pointer;
}
input:checked+label {
color: @primary;
border-bottom: solid 3px @secondary;
}
.loop(@num) when (@num > 0) {
.loop((@num - 1));
input[id = ~"tab@{num}"]:checked~div[id = ~"content@{num}"]{
display:block;
}
}
.loop(5);
}

17
tests/build/config/build_command.js Normal file
View file

@ -0,0 +1,17 @@
// Copyright (c) 2012 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
// A cross-platform mechanism for determining how to run the build.
(function() {
"use strict";
var UNIX_BUILD_COMMAND = "./jake.sh";
var WINDOWS_BUILD_COMMAND = "jake.bat";
var os = require("os");
exports.get = function() {
return os.platform() === "win32" ? WINDOWS_BUILD_COMMAND : UNIX_BUILD_COMMAND;
//return WINDOWS_BUILD_COMMAND;
};
}());

79
tests/build/config/karma.conf.js Normal file
View file

@ -0,0 +1,79 @@
// Karma configuration
// Quixote-specific configuration starts with "QUIXOTE:"
(function() {
"use strict";
var paths = require("./paths.js");
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '../../..',
// frameworks to use
frameworks: ['mocha', 'commonjs'],
middleware: ['node-modules'],
// list of files / patterns to load in the browser
files: [
'tests/*.js',
'tests/vendor/*.js',
"node_modules/chai/chai.js",
//'tests/**/*.js',
//'node_modules/**/*.js',
//'node_modules/**/*.js',
// QUIXOTE: Serve the CSS file so we can load it in our tests
// Mark it `included: false` so Karma doesn't load it automatically
{ pattern: 'dist/paper.css', included: false }
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'tests/*.js': ['commonjs'],
'tests/vendor/*.js': ['commonjs'],
},
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['dots'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: [],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};
}());

20
tests/build/config/paths.js Normal file
View file

@ -0,0 +1,20 @@
// Copyright (c) 2015 Titanium I.T. LLC. All rights reserved. For license, see "README" or "LICENSE" file.
// Lists commonly-used directories. They're all relative to the project root.
(function() {
"use strict";
module.exports = {
generatedDir: "generated",
testDir: "generated/test",
distDir: "generated/dist",
clientDistDir: "generated/dist/client",
buildDir: "build",
clientDir: "src",
clientEntryPoint: "src/toggle.js",
clientDistBundle: "generated/dist/client/bundle.js"
};
}());

17
tests/build/config/tested_browsers.js Normal file
View file

@ -0,0 +1,17 @@
// Copyright (c) 2014 Titanium I.T. LLC. All rights reserved. For license, see "README" or "LICENSE" file.
(function() {
"use strict";
// Uncomment and modify the following list to cause the build to fail unless these browsers are tested.
// There's no Quixote-specific configuration in this file.
module.exports = [
//"IE 10.0.0 (Windows 7 0.0.0)",
//"Firefox 41.0.0 (Mac OS X 10.10.0)",
//"Chrome 46.0.2490 (Mac OS X 10.10.5)",
//"Safari 9.0.1 (Mac OS X 10.10.5)",
//"Mobile Safari 8.0.0 (iOS 8.4.0)",
//"Chrome Mobile 44.0.2403 (Android 6.0.0)"
];
}());

117
tests/build/scripts/Jakefile.js Normal file
View file

@ -0,0 +1,117 @@
// Copyright (c) 2012-2014 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
// Main build file. Contains all tasks needed for normal development.
// There's no Quixote-specific configuration in this file.
(function() {
"use strict";
var startTime = Date.now();
var shell = require("../../../node_modules/shelljs/shell.js");
var karma = require("simplebuild-karma");
var browserify = require("../util/browserify_runner.js");
var browsers = require("../config/tested_browsers.js");
var paths = require("../config/paths.js");
var KARMA_CONFIG = "./tests/build/config/karma.conf.js";
var strict = !process.env.loose;
//*** GENERAL
desc("Lint and test");
task("default", [ "lint", "test" ], function() {
var elapsedSeconds = (Date.now() - startTime) / 1000;
console.log("\n\nBUILD OK (" + elapsedSeconds.toFixed(2) + "s)");
});
desc("Start server (for manual testing)");
task("run", [ "build" ], function() {
jake.exec("node ../node_modules/http-server/bin/http-server " + paths.clientDistDir, { interactive: true }, complete);
}, { async: true });
desc("Delete generated files");
task("clean", function() {
shell.rm("-rf", paths.generatedDir);
});
//*** LINT
/** */
desc("Lint everything");
task("lint", ["lintNode", "lintClient"]);
task("lintNode", function() {
process.stdout.write("Linting Node.js code: ");
}, { async: false });
task("lintClient", function() {
process.stdout.write("Linting browser code: ");
}, { async: false });
//*** TEST
desc("Start Karma server -- run this first");
task("karma", function() {
karma.start({
configFile: KARMA_CONFIG
}, complete, fail);
}, { async: true });
desc("Run tests");
task("test", function() {
console.log("Testing browser code: ");
var browsersToCapture = process.env.capture ? process.env.capture.split(",") : [];
karma.run({
configFile: KARMA_CONFIG,
expectedBrowsers: browsers,
strict: strict,
capture: browsersToCapture
}, complete, fail);
}, { async: true });
//*** BUILD
desc("Build distribution package");
task("build", [ "prepDistDir", "buildClient" ]);
task("prepDistDir", function() {
shell.rm("-rf", paths.distDir);
});
task("buildClient", [ paths.clientDistDir, "bundleClientJs" ], function() {
console.log("Copying client code: .");
shell.cp(
paths.clientDir + "/*.html",
paths.clientDir + "/*.css",
paths.clientDir + "/*.svg",
paths.clientDistDir
);
});
task("bundleClientJs", [ paths.clientDistDir ], function() {
console.log("Bundling browser code with Browserify: .");
browserify.bundle({
entry: paths.clientEntryPoint,
outfile: paths.clientDistBundle,
options: {
standalone: "toggle",
debug: true
}
}, complete, fail);
}, { async: true });
//*** CREATE DIRECTORIES
directory(paths.testDir);
directory(paths.clientDistDir);
}());

117
tests/build/scripts/build.jakefile.js Normal file
View file

@ -0,0 +1,117 @@
// Copyright (c) 2012-2014 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
// Main build file. Contains all tasks needed for normal development.
// There's no Quixote-specific configuration in this file.
(function() {
"use strict";
var startTime = Date.now();
var shell = require("../../../node_modules/shelljs/shell.js");
var karma = require("simplebuild-karma");
var browserify = require("../util/browserify_runner.js");
var browsers = require("../config/tested_browsers.js");
var paths = require("../config/paths.js");
var KARMA_CONFIG = "./tests/build/config/karma.conf.js";
var strict = !process.env.loose;
//*** GENERAL
desc("Lint and test");
task("default", [ "lint", "test" ], function() {
var elapsedSeconds = (Date.now() - startTime) / 1000;
console.log("\n\nBUILD OK (" + elapsedSeconds.toFixed(2) + "s)");
});
desc("Start server (for manual testing)");
task("run", [ "build" ], function() {
jake.exec("node ../node_modules/http-server/bin/http-server " + paths.clientDistDir, { interactive: true }, complete);
}, { async: true });
desc("Delete generated files");
task("clean", function() {
shell.rm("-rf", paths.generatedDir);
});
//*** LINT
/** */
desc("Lint everything");
task("lint", ["lintNode", "lintClient"]);
task("lintNode", function() {
process.stdout.write("Linting Node.js code: ");
}, { async: false });
task("lintClient", function() {
process.stdout.write("Linting browser code: ");
}, { async: false });
//*** TEST
desc("Start Karma server -- run this first");
task("karma", function() {
karma.start({
configFile: KARMA_CONFIG
}, complete, fail);
}, { async: true });
desc("Run tests");
task("test", function() {
console.log("Testing browser code: ");
var browsersToCapture = process.env.capture ? process.env.capture.split(",") : [];
karma.run({
configFile: KARMA_CONFIG,
expectedBrowsers: browsers,
strict: strict,
capture: browsersToCapture
}, complete, fail);
}, { async: true });
//*** BUILD
desc("Build distribution package");
task("build", [ "prepDistDir", "buildClient" ]);
task("prepDistDir", function() {
shell.rm("-rf", paths.distDir);
});
task("buildClient", [ paths.clientDistDir, "bundleClientJs" ], function() {
console.log("Copying client code: .");
shell.cp(
paths.clientDir + "/*.html",
paths.clientDir + "/*.css",
paths.clientDir + "/*.svg",
paths.clientDistDir
);
});
task("bundleClientJs", [ paths.clientDistDir ], function() {
console.log("Bundling browser code with Browserify: .");
browserify.bundle({
entry: paths.clientEntryPoint,
outfile: paths.clientDistBundle,
options: {
standalone: "toggle",
debug: true
}
}, complete, fail);
}, { async: true });
//*** CREATE DIRECTORIES
directory(paths.testDir);
directory(paths.clientDistDir);
}());

7
tests/build/scripts/run_jake.bat Normal file
View file

@ -0,0 +1,7 @@
@echo off
REM Runs Jake from node_modules directory, preventing it from needing to be installed globally
REM Also ensures node modules have been installed
REM There's no Quixote-specific configuration in this file.
if not exist node_modules\.bin\jake.cmd call npm install
node_modules\.bin\jake %*

6
tests/build/scripts/run_jake.sh Normal file
View file

@ -0,0 +1,6 @@
# Runs Jake from node_modules directory, preventing it from needing to be installed globally
# Also ensures node modules have been installed
# There's no Quixote-specific configuration in this file.
[ ! -f node_modules/.bin/jake ] && echo "Installing npm modules:" && npm install
node_modules/.bin/jake $*

28
tests/build/scripts/watch.js Normal file
View file

@ -0,0 +1,28 @@
// Copyright (c) 2015 Titanium I.T. LLC. All rights reserved. For license, see "README" or "LICENSE" file.
// Automatically runs build when files change.
// There's no Quixote-specific configuration in this file.
(function() {
"use strict";
var nodemon = require("nodemon");
var buildCommand = require("../config/build_command.js");
var paths = require("../config/paths.js");
console.log("*** Using nodemon to run " + buildCommand.get() + ". Type 'rs<enter>' to force restart.");
nodemon({
ext: "sh bat json js html css",
ignore: paths.generatedDir,
exec: buildCommand.get() + " " + process.argv.slice(2).join(" "),
execMap: {
sh: "/bin/sh",
bat: "cmd.exe /c",
cmd: "cmd.exe /c"
}
}).on("restart", function(files) {
if (files) console.log("*** Restarting due to", files);
else console.log("*** Restarting");
});
}());

21
tests/build/util/browserify_runner.js Normal file
View file

@ -0,0 +1,21 @@
/* Copyright (c) 2014 Titanium I.T. LLC - See LICENSE.txt for license */
// Helper function for running Browserify
// There's no Quixote-specific configuration in this file.
"use strict";
var fs = require("fs");
var path = require("path");
var browserify = require("browserify");
exports.bundle = function(config, success, failure) {
var b = browserify(config.options);
b.add(path.resolve(config.entry));
b.bundle(function(err, bundle) {
if (err) return failure(err);
fs.writeFileSync(config.outfile, bundle);
return success();
});
};

76
tests/build/util/karma_runner.js Normal file
View file

@ -0,0 +1,76 @@
// Copyright (c) 2012-2015 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
// Helper functions for running Karma
// There's no Quixote-specific configuration in this file.
(function() {
"use strict";
var path = require("path");
var sh = require("./sh.js");
var runner = require("karma/lib/runner");
var server = require("karma/lib/server");
var KARMA = "node node_modules/karma/bin/karma";
exports.serve = function(configFile, success, fail) {
var command = KARMA + " start " + configFile;
sh.run(command, success, function () {
fail("Could not start Karma server");
});
};
exports.runTests = function(options, success, fail) {
options.capture = options.capture || [];
var config = {
configFile: path.resolve(options.configFile),
browsers: options.capture,
singleRun: options.capture.length > 0
};
var runKarma = runner.run.bind(runner);
if (config.singleRun) runKarma = server.start.bind(server);
var stdout = new CapturedStdout();
runKarma(config, function(exitCode) {
stdout.restore();
if (exitCode) return fail("Client tests failed (did you start the Karma server?)");
var browserMissing = checkRequiredBrowsers(options.browsers, stdout);
if (browserMissing && options.strict) return fail("Did not test all browsers");
if (stdout.capturedOutput.indexOf("TOTAL: 0 SUCCESS") !== -1) return fail("No tests were run!");
return success();
});
};
function checkRequiredBrowsers(requiredBrowsers, stdout) {
var browserMissing = false;
requiredBrowsers.forEach(function(browser) {
browserMissing = lookForBrowser(browser, stdout.capturedOutput) || browserMissing;
});
return browserMissing;
}
function lookForBrowser(browser, output) {
var missing = output.indexOf(browser + ": Executed") === -1;
if (missing) console.log("Warning: " + browser + " was not tested!");
return missing;
}
function CapturedStdout() {
var self = this;
self.oldStdout = process.stdout.write;
self.capturedOutput = "";
process.stdout.write = function(data) {
self.capturedOutput += data;
self.oldStdout.apply(this, arguments);
};
}
CapturedStdout.prototype.restore = function() {
process.stdout.write = this.oldStdout;
};
}());

54
tests/build/util/mocha_runner.js Normal file
View file

@ -0,0 +1,54 @@
// Copyright (c) 2014-2015 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
// Helper function for running Mocha
// There's no Quixote-specific configuration in this file.
(function() {
"use strict";
var Mocha = require("mocha");
var jake = require("jake");
exports.runTests = function runTests(options, success, failure) {
var mocha = new Mocha(options.options);
var files = deglob(options.files);
files.forEach(mocha.addFile.bind(mocha));
// This is a bit of a hack. The issue is this: during test execution, if an exception is thrown inside
// of a callback (and keep in mind that assertions throw exceptions), there's no way for Mocha to catch
// that exception.
// So Mocha registers an 'uncaughtException' handler on Node's process object. That way any unhandled
// exception is passed to Mocha.
// The problem is that Jake ALSO listens for 'uncaughtException'. Its handler and Mocha's handler don't
// get along. Somehow the Jake handler seems to terminate Mocha's test run... not sure why. We need to
// disable Jake's handler while Mocha is running.
// This code disables ALL uncaughtException handlers and then restores them after Mocha is done. It's
// very hacky and likely to cause problems in certain edge cases (for example, '.once' listeners aren't
// restored properly), but it seems to be working for now.
// It might be possible to create a better solution by using Node's 'domain' module. Something to look
// into if you're reading this. Another solution is to just spawn Mocha in a separate process, but I
// didn't want the time penalty involved. Besides, this seems to be working okay.
var savedListeners = disableExceptionListeners();
var runner = mocha.run(function(failures) {
restoreExceptionListeners(savedListeners);
if (failures) return failure("Tests failed");
else return success();
});
};
function deglob(globs) {
return new jake.FileList(globs).toArray();
}
function disableExceptionListeners() {
var listeners = process.listeners("uncaughtException");
process.removeAllListeners("uncaughtException");
return listeners;
}
function restoreExceptionListeners(listeners) {
listeners.forEach(process.addListener.bind(process, "uncaughtException"));
}
}());

48
tests/build/util/sh.js Normal file
View file

@ -0,0 +1,48 @@
// Copyright (c) 2012-2015 Titanium I.T. LLC. All rights reserved. See LICENSE.txt for details.
// Helper functions for running processes.
// There's no Quixote-specific configuration in this file.
(function() {
"use strict";
var jake = require("jake");
exports.runMany = function(commands, successCallback, failureCallback) {
var stdout = [];
function serializedSh(command) {
if (command) {
run(command, function(oneStdout) {
stdout.push(oneStdout);
serializedSh(commands.shift());
}, failureCallback);
}
else {
successCallback(stdout);
}
}
serializedSh(commands.shift());
};
var run = exports.run = function(oneCommand, successCallback, failureCallback) {
var stdout = "";
var child = jake.createExec(oneCommand);
child.on("stdout", function(data) {
process.stdout.write(data);
stdout += data;
});
child.on("stderr", function(data) {
process.stderr.write(data);
});
child.on("cmdEnd", function() {
successCallback(stdout);
});
child.on("error", function() {
failureCallback(stdout);
});
console.log("> " + oneCommand);
child.run();
};
}());

29
tests/build/util/version_checker.js Normal file
View file

@ -0,0 +1,29 @@
// Copyright (c) 2013 Titanium I.T. LLC. All rights reserved. See LICENSE.TXT for details.
// Helper function for checking version numbers.
// There's no Quixote-specific configuration in this file.
(function() {
"use strict";
var semver = require("semver");
exports.check = function(options, success, fail) {
if (options.strict) {
if (semver.neq(options.actual, options.expected)) return failWithQualifier("exactly");
}
else {
if (semver.lt(options.actual, options.expected)) return failWithQualifier("at least");
if (semver.neq(options.actual, options.expected)) console.log("Warning: Newer " + options.name +
" version than expected. Expected " + options.expected + ", but was " + options.actual + ".");
}
return success();
function failWithQualifier(qualifier) {
return fail("Incorrect " + options.name + " version. Expected " + qualifier +
" " + options.expected + ", but was " + options.actual + ".");
}
};
}());

151
tests/colors.js Normal file
View file

@ -0,0 +1,151 @@
(function() {
"use strict";
var quixote = require("./vendor/quixote.js");
var assert = require("./vendor/chai.js").assert;
describe("Colors", function() {
var frame;
var media;
var textPrimary;
var textSecondary;
var textSuccess;
var textWarning;
var textDanger;
var textMuted;
var backgroundPrimary;
var backgroundSecondary;
var backgroundSuccess;
var backgroundWarning;
var backgroundDanger;
var backgroundMuted;
var textOverride;
var textNotOverride;
before(function(done) {
frame = quixote.createFrame({
stylesheet: "/base/dist/paper.css"
}, done);
});
after(function() {
frame.remove();
});
beforeEach(function() {
frame.reset();
media = frame.add(
"<div class='media'>" +
"<div id='text'>" +
"<p class='text-primary' id='textPrimary'>text-primary</p>" +
"<p class='text-secondary' id='textSecondary'>text-secondary</p>" +
"<p class='text-success' id='textSuccess'>text-success</p>" +
"<p class='text-warning' id='textWarning'>text-warning</p>" +
"<p class='text-danger' id='textDanger'>text-danger</p>" +
"<p class='text-muted' id='textMuted'>text-muted</p>" +
"</div>" +
"<div id='background'>" +
"<div class='background-primary' id='backgroundPrimary'>background-primary</div>" +
"<div class='background-secondary' id='backgroundSecondary'>background-secondary</div>" +
"<div class='background-success' id='backgroundSuccess'>background-success</div>" +
"<div class='background-warning' id='backgroundWarning'>background-warning</div>" +
"<div class='background-danger' id='backgroundDanger'>background-danger</div>" +
"<div class='background-muted' id='backgroundMuted'>background-muted</div>" +
"</div>" +
"<div id='inheritance'>" +
"<div class='text-primary'>" +
"<p class='text-success' id='text-override'>text-override</p>" +
"<p id='text-not-override'>text-not-override</p>" +
"</div>" +
"</div>" +
"</div>",
"colors"
);
textPrimary = frame.get("#textPrimary");
textSecondary = frame.get("#textSecondary");
textSuccess = frame.get("#textSuccess");
textWarning = frame.get("#textWarning");
textDanger = frame.get("#textDanger");
textMuted = frame.get("#textMuted");
backgroundPrimary = frame.get("#backgroundPrimary");
backgroundSecondary = frame.get("#backgroundSecondary");
backgroundSuccess = frame.get("#backgroundSuccess");
backgroundWarning = frame.get("#backgroundWarning");
backgroundDanger = frame.get("#backgroundDanger");
backgroundMuted = frame.get("#backgroundMuted");
textOverride = frame.get("#text-override");
textNotOverride = frame.get("#text-not-override");
});
it("Text color is set to primary", function() {
assert.equal(textPrimary.getRawStyle("color"), "rgb(65, 64, 62)", "Primary color should be #41403E");
});
it("Text color is set to secondary", function() {
assert.equal(textSecondary.getRawStyle("color"), "rgb(0, 113, 222)", "Secondary color should be #0071DE");
});
it("Text color is set to success", function() {
assert.equal(textSuccess.getRawStyle("color"), "rgb(134, 163, 97)", "Success color should be #86a361");
});
it("Text color is set to warning", function() {
assert.equal(textWarning.getRawStyle("color"), "rgb(221, 205, 69)", "Warning color should be #ddcd45");
});
it("Text color is set to danger", function() {
assert.equal(textDanger.getRawStyle("color"), "rgb(167, 52, 45)", "Danger color should be #a7342d");
});
it("Text color is set to muted", function() {
assert.equal(textMuted.getRawStyle("color"), "rgb(134, 142, 150)", "Muted color should be #868e96");
});
it("Background color is set to primary", function() {
assert.equal(backgroundPrimary.getRawStyle("background-color"), "rgb(193, 192, 189)", "Primary color should be #C1C0BD");
});
it("Background color is set to secondary", function() {
assert.equal(backgroundSecondary.getRawStyle("background-color"), "rgb(222, 239, 255)", "Secondary color should be #DEEFFF");
});
it("Background color is set to success", function() {
assert.equal(backgroundSuccess.getRawStyle("background-color"), "rgb(208, 219, 194)", "Success color should be #D0BDC2");
});
it("Background color is set to warning", function() {
assert.equal(backgroundWarning.getRawStyle("background-color"), "rgb(245, 240, 198)", "Warning color should be #F5F0C6");
});
it("Background color is set to danger", function() {
assert.equal(backgroundDanger.getRawStyle("background-color"), "rgb(240, 203, 201)", "Danger color should be #F0CBC9");
});
it("Background color is set to muted", function() {
assert.equal(backgroundMuted.getRawStyle("background-color"), "rgb(230, 231, 233)", "Muted color should be #E6E7E9");
});
it("Text overrides parent style", function(){
assert.equal(textOverride.getRawStyle("color"), "rgb(134, 163, 97)", "Success color should be #86a361");
});
it("Text overrides parent style", function(){
assert.equal(textOverride.getRawStyle("color"), "rgb(134, 163, 97)", "Success color should be #86a361");
});
it("Text has parent style", function(){
assert.equal(textNotOverride.getRawStyle("color"), "rgb(65, 64, 62)", "Primary color should be #41403E");
});
});
}());

28
tests/index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<!-- smoke test marker: automatopia home page -->
<head>
<title>Agile Engineering for the Web</title>
<link rel="stylesheet" type="text/css" href="./screen.css">
<script src="bundle.js" type="text/javascript"></script>
</head>
<body>
<!-- Note: This page is for manual demonstration of the example code. It's not tested like real production code should be. -->
<div class="media">
<img id="image" class="media__figure" src="icon.svg" width="25" />
<p id="content" class="media__body invisible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var image = document.getElementById("image");
var content = document.getElementById("content");
toggle.init(image, content, "invisible");
});
</script>
</body>
</html>

10707
tests/vendor/chai.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

4195
tests/vendor/quixote.js vendored Normal file
View file

File diff suppressed because one or more lines are too long