deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2026-03-18 08:19:55 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'release-1.3'

Browse source
This commit is contained in:
rhyneav 2017-12-15 09:19:33 -05:00
commit 178ff4398d
47 changed files with 22034 additions and 1797 deletions
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

26
.travis.yml Normal file
View file

@ -0,0 +1,26 @@
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
- gulp 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);
}());

139
README.md
View file

@ -1,93 +1,84 @@
# PaperCSS
### The Less Formal CSS Framework
<p align="center">
<a href="https://getpapercss.com">
<img src="https://github.com/papercss/papercss/blob/master/img/favicon.ico?raw=true" alt="PaperCSS logo">
</a>
## Demo & Docs
View the demo & docs at [getpapercss.com](https://www.getpapercss.com)
<h3 align="center">PaperCSS</h3>
![Preview](/img/screenshots/preview.gif)
<p align="center">The less formal CSS framework, with a quick and easy integration.</p>
</p>
## Download
[![Download](/img/screenshots/download.PNG)][download]
[![Download](/img/screenshots/download-minified.PNG)][download-minified]
## Table of contents
### NPM
PaperCSS is now available on NPM as of version 1.2.0. Install with `npm install papercss --save` and find the CSS in:
- node_modules/papercss/dist/paper.css
- node_modules/papercss/dist/paper.min.css
- [Quick-start](#quick-start)
- [Status](#status)
- [Content of the framework](#content-of-the-framework)
- [Documentation](#documentation)
- [Customizing](#customizing)
- [Contributing](#contributing)
- [About](#about)
- [Credits and license](#credits-and-license)
### CDN
Don't want to download it? That's cool. You can just link to PaperCSS via unpkg's CDN. You can use either:
- https://unpkg.com/papercss@1.2.0/dist/paper.css
- https://unpkg.com/papercss@1.2.0/dist/paper.min.css
## Quick-start
## Quick Start
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/papercss@1.2.0/dist/paper.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="paper">
<h1>Some Fresh Title</h1>
<p>This is where some content would go.</p>
</div>
</div>
</body>
</html>
```
There are several options available:
- You can [download the latest release](https://github.com/papercss/papercss/releases).
- Clone the repo: `git clone https://github.com/papercss/papercss.git`
- Install with npm: `npm install papercss`
- Install with yarn: `yarn install papercss`
- Import it using a CDN (it will automatically download the latest version):
- `https://unpkg.com/papercss/dist/paper.min.css`
- `https://unpkg.com/papercss/dist/paper.css`
## Status
[![Build status](https://travis-ci.org/papercss/papercss.svg?branch=master)](https://travis-ci.org/papercss/papercss)
[![Dependencies](https://img.shields.io/david/papercss/papercss.svg)](https://david-dm.org/papercss/papercss)
[![Peer dependencies](https://img.shields.io/david/peer/papercss/papercss.svg)](https://david-dm.org/papercss/papercss?type=peer)
[![Dev dependencies](https://img.shields.io/david/dev/papercss/papercss.svg)](https://david-dm.org/papercss/papercss?type=dev)
## Content of the framework
We provide compiled CSS (`paper.css`) as well as minified CSS (`paper.min.css`). You can also use single components that are build into `papercss/dist/components`.
You can also play with original, source files, written in LESS, in `src/`.
## Documentation
You can view the docs at [getpapercss.com](https://www.getpapercss.com). Those are directly from the `master` branch, this means thoses features are stable and ready to be used in your project.
You can also view the develop branch at [develop.getpapercss.com](https://develop.getpapercss.com), this include new features that are coming soon in master branch. Be warned, a feature in develop can be removed without any prevention.
## Customizing
To customize PaperCSS, clone the Git repo, run `npm install`, and make any chages to the .less files within /src
The main places you might want to make changes would be colors.less or fonts.less. Here, you can specify new colors or fonts for your CSS build.
You can customize PaperCSS easily, clone the repo, run `npm install` and make any changes to `.less` files in `src/`.
After you make changes, be sure to build the new CSS files. Do so by running `npm run build` and get them from the /dist folder.
The main places you might want to make changes would be `colors.less` or `fonts.less`, where you can specify new colors or fonts for your CSS build.
Here's the full workflow for customization:
- Make sure you have Git, Node, and NPM
- run `git clone https://github.com/rhyneav/papercss.git`
- change directories to papercss `cd papercss`
- run `npm install`
- _make changes to .less files within source_
- preview changes with `npm start` and go to http://localhost:8080 (changes are automatically reloaded on page)
- OR run `npm run build` to create the new CSS in the /dist folder
### Adding a new color
- Go to file `src/color.less`
- Add a new variable and assign it to a color hex value
- Add the new variable to the list of colors
- Add a new variable for the light variation
- Once `npm start` or `npm run build` has been run then it will create the new css so that the new color can be used as a text, border or background
After you make changes, be sure to build the new CSS files. Do so by running `npm run build` and get them from the `dist/` folder.
## Contributing
Check out what's been added but not yet released at [develop.getpapercss.com](https://develop.getpapercss.com)
This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process.
Please before sending a PR, make sure you are using the `.editorconfig` file with your IDE. If your IDE doesn't natively support editorconfig files, you can use an extension. For example in Atom there is the [editorconfig package](https://atom.io/packages/editorconfig), as well for [Sublime](https://github.com/sindresorhus/editorconfig-sublime), [VS Code](https://github.com/editorconfig/editorconfig-vscode), [Vim](https://github.com/editorconfig/editorconfig-vim), ...
Please before sending a PR, make sure you are properly using the `.editorconfig` file with your IDE. If your IDE doesn't natively support `editorconfig` files, you can use an extension/package/module. For example in Atom there is the [editorconfig package](https://atom.io/packages/editorconfig), as well for [Sublime Text](https://github.com/sindresorhus/editorconfig-sublime), [VS Code](https://github.com/editorconfig/editorconfig-vscode), [Vim](https://github.com/editorconfig/editorconfig-vim), ...
Similar to customizing, make sure you have Git, Node, and NPM on your system.
- fork the repo via the fork button in the upper left
- run `git clone https://github.com/[your_username]/papercss.git`
- change directories to papercss `cd papercss`
- run `npm install`
- switch to the develop branch `git checkout develop`. This is the branch where features are added. Checking it out will set up the remote tracking to the develop branch on Github.
- create a new branch for your feature off of the develop branch `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
- Start the local server to view changes with `npm start`
- _code and stuff_
- Once done, commit and push your changes to your fork
- Finally, open a pull request on this repo. Be sure to include any pictures and details on what you changed!
- Once approved, your changes will be merged to the develop branch where it will eventually be added to a release that ends up in the master branch. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
Once you are ready to contribute, here the workflow you should follow:
Note: If you have a hotfix (usually typos and minor documentation tweaks), create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-1.X.X master`. The changes will be merged into both master and develop to keep the branches consistent.
- Fork the repo then clone it: `git clone git@github.com:[your_username]/papercss.git`
- `cd papercss` then install dependencies: `npm install`
- Change your current branch to `develop`: `git checkout develop`
- Create your new branch where you will write your code: `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
- Start the local web-server: `gulp` or `npm start`
- Once done commit and push your changes to your fork.
- Open a pull request on the origin papercss repo. Be sure to include any picture and/or details on what you have done, it will helps reviewers **a lot**!
- When your changes are approved, they will be merged into the `develop` branch, which will finally be merged into the `master` branch when we reach a milestone in terms of features and bug fixes. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
Note: If you have a hotfix (usually typos and minor documentation tweaks), create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-thing master`. The changes will be merged into both master and develop to keep the branches consistent.
## About
I got tired of mODerN STylEs and clean pages on the internet. I also wanted to learn more about Flexbox and Less. So I made PaperCSS to solve these two challenges of mine :)
The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
@ -96,8 +87,8 @@ While I'm proud of how it's turned out so far, I think there's a lot that can st
If you are new to Git or Less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process.
## Credits
Shouts outs to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX
## Credits and license
[download]: https://github.com/rhyneav/papercss/releases/download/v1.2.0/paper.css
[download-minified]: https://github.com/rhyneav/papercss/releases/download/v1.2.0/paper.min.css
Code and documentation under [ISC license](https://github.com/papercss/papercss/blob/master/license∏).
Shouts outs to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX

23
demo.css
View file

@ -13,4 +13,27 @@ body {
}
.summary a {
color: #41403e;
}
img.no-responsive {
max-width: -webkit-fill-available;
max-width: -moz-available;
}
.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
}

27
gulpfile.js
View file

@ -1,15 +1,15 @@
var gulp = require('gulp'),
connect = require('gulp-connect'),
less = require('gulp-less'),
cleanCSS = require('gulp-clean-css'),
rename = require('gulp-rename');
const gulp = require('gulp'),
connect = require('gulp-connect'),
less = require('gulp-less'),
cleanCSS = require('gulp-clean-css'),
rename = require('gulp-rename');
gulp.task('webserver', function() {
connect.server({
livereload: true
});
});
gulp.task('less', function() {
gulp.src('src/styles.less')
.pipe(less())
@ -18,7 +18,7 @@ gulp.task('less', function() {
.pipe(gulp.dest('dist'))
.pipe(connect.reload());
});
gulp.task('watch', function() {
gulp.watch('src/*.less', ['less']);
});
@ -29,6 +29,13 @@ gulp.task('minify-css', () => {
.pipe(rename('paper.min.css'))
.pipe(gulp.dest('dist'));
});
gulp.task('components', () => {
gulp.src('src/*.less')
.pipe(less())
.pipe(cleanCSS({format: 'beautify'}))
.pipe(gulp.dest('dist/components'));
});
gulp.task('default', ['less', 'webserver', 'watch']);
gulp.task('build', ['less', 'minify-css'])
gulp.task('build', ['components', 'less', 'minify-css']);

226
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,14 @@
<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>
<li><a href="#modals">Modals</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>
@ -357,12 +361,12 @@
&lt;input type="text" placeholder="Disabled" id="paperInputs4" disabled&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;Large Input&lt;/label&gt;
&lt;textarea placeholder="Large input"&gt; &lt;/textarea&gt;
&lt;label&gt;Large Input&lt;/label&gt;
&lt;textarea placeholder="Large input"&gt; &lt;/textarea&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;No Resize&lt;/label&gt;
&lt;textarea class="no-resize" placeholder="No resize"&gt; &lt;/textarea&gt;
&lt;label&gt;No Resize&lt;/label&gt;
&lt;textarea class="no-resize" placeholder="No resize"&gt; &lt;/textarea&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label for="paperSelects1"&gt;Select&lt;/label&gt;
@ -440,6 +444,13 @@
</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><code>&lt;ol&gt;
&lt;li&gt;Do this&lt;/li&gt;
@ -473,10 +484,9 @@
<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><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;
@ -659,7 +669,7 @@ function add(x, y) {
<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>
@ -1038,21 +1048,125 @@ function add(x, y) {
</div>
</div>
<div class="docs">
<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>
<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>
@ -1083,21 +1197,81 @@ function add(x, y) {
</div>
</div>
<div id="modals" class="section">
<h2>Modals</h2>
<h4>Simple modal example</h4>
<p>This can be used to implement modals along with features like title, subtitle, text, button and links. Just use whichever component you need for your modal with proper classes and leave the rest on the framework.</p>
<div class="row flex-spaces child-borders">
<a href="#modal-1" class="paper-btn margin">Open Modal!</a>
</div>
<div class="modal row flex-spaces" id="modal-1">
<div class="modal-body">
<a href="#modals" class="btn-close">x</a>
<h4 class="modal-title">Modal Title</h4>
<h5 class="modal-subtitle">Modal Subtitle</h5>
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
<a href="#modals"><button>Nice!</button></a>
</div>
</div>
<div class="docs">
<pre><code>&lt;div class="row flex-space child-borders"&gt;
&lt;a href="modal-1" class="paper-btn margin"&gt;Open Modal!&lt;/a&gt;
&lt;/div&gt;
&lt;div class="modal row flex-space" id="modal-1"&gt;
&lt;div class="modal-body"&gt;
&lt;a class="btn-close" href="#modals"&gt;x&lt;/a&gt;
&lt;h4 class="modal-title"&gt;Modal Title&lt;/h4&gt;
&lt;h5 class="modal-subtitle"&gt;Modal Subtitle&lt;/h5&gt;
&lt;p class="modal-text"&gt;This is an example of modal which is implemented with pure CSS! :D&lt;/p&gt;
&lt;button&gt;Nice!&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
<h4>Modal with title, text and links</h4>
<div class="row flex-spaces child-borders">
<a href="#modal-2" class="paper-btn margin">Another Modal!</a>
</div>
<div class="modal row flex-spaces" id="modal-2">
<div class="modal-body">
<a href="#modals" class="btn-close">x</a>
<h4 class="modal-title">Modal Title</h4>
<h5 class="modal-subtitle">Modal Subtitle</h5>
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
<a class="modal-link" href="#modals">OK</a>
<a class="modal-link" href="#modals">Close</a>
</div>
</div>
<div class="docs">
<pre><code>&lt;div class="row flex-space child-borders"&gt;
&lt;a href="modal-1" class="paper-btn margin"&gt;Open Modal!&lt;/a&gt;
&lt;/div&gt;
&lt;div class="modal row flex-space" id="modal-1"&gt;
&lt;div class="modal-body"&gt;
&lt;a class="btn-close" href="#modals"&gt;x&lt;/a&gt;
&lt;h4 class="modal-title"&gt;Modal Title&lt;/h4&gt;
&lt;h5 class="modal-subtitle"&gt;Modal Subtitle&lt;/h5&gt;
&lt;p class="modal-text"&gt;This is an example of modal which is implemented with pure CSS! :D&lt;/p&gt;
&lt;a class="modal-link" href="#modals"&gt;OK&lt;/a&gt;
&lt;a class="modal-link" href="#modals"&gt;Close&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
<div class="section">
<h2 id="download">Download and Link</h2>
<h4>Download</h4>
<p>Download the latest version (1.2.0) using either of the links below. Or download an older release via Github.</p>
<p>Download the latest version (1.3.0) using either of the links below. Or download an older release via Github.</p>
<div class="row flex-spaces text-center">
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.2.0/paper.css">CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.2.0/paper.min.css">Minified CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">Github Releases</a>
<a class="paper-btn margin" href="https://github.com/papercss/papercss/releases/download/v1.3.0/paper.css">CSS File</a>
<a class="paper-btn margin" href="https://github.com/papercss/papercss/releases/download/v1.3.0/paper.min.css">Minified CSS File</a>
<a class="paper-btn margin" href="https://github.com/papercss/papercss/releases">Github Releases</a>
</div>
<h4>NPM</h4>
<p>PaperCSS is now available on NPM as of version 1.2.0. Install with <code>npm install papercss --save</code> and find the CSS in:</p>
<p>PaperCSS is now available on NPM as of version 1.3.0. Install with <code>npm install papercss --save</code> and find the CSS in:</p>
<ul>
<li>node_modules/papercss/dist/paper.css</li>
<li>node_modules/papercss/dist/paper.min.css</li>
@ -1105,8 +1279,8 @@ function add(x, y) {
<h4>CDN</h4>
<p>Don't want to download it? That's cool. You can just link to PaperCSS via <a href="https://unpkg.com/#/">unpkg's CDN</a>. You can use either:</p>
<ul>
<li><a href="https://unpkg.com/papercss@1.2.0/dist/paper.css">https://unpkg.com/papercss@1.2.0/dist/paper.css</a></li>
<li><a href="https://unpkg.com/papercss@1.2.0/dist/paper.min.css">https://unpkg.com/papercss@1.2.0/dist/paper.min.css</a></li>
<li><a href="https://unpkg.com/papercss@1.3.0/dist/paper.css">https://unpkg.com/papercss@1.3.0/dist/paper.css</a></li>
<li><a href="https://unpkg.com/papercss@1.3.0/dist/paper.min.css">https://unpkg.com/papercss@1.3.0/dist/paper.min.css</a></li>
</ul>
<p>Here's a quck snippet to get started with PaperCSS:</p>
<div class="docs">
@ -1116,7 +1290,7 @@ function add(x, y) {
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/papercss@1.2.0/dist/paper.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/papercss@1.3.0/dist/paper.min.css&quot;&gt;
&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

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 $*

6959
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

37
package.json
View file

@ -1,12 +1,13 @@
{
"name": "papercss",
"version": "1.2.0",
"version": "1.3.0",
"description": "Another CSS framework",
"main": "index.js",
"scripts": {
"start": "node node_modules/gulp/bin/gulp.js",
"build": "node node_modules/gulp/bin/gulp.js build",
"test": "echo \"Error: no test specified\" && exit 1"
"test": "echo \"Error: no test specified\" && exit 1",
"postinstall": "gulp build"
},
"repository": {
"type": "git",
@ -18,7 +19,7 @@
"url": "https://github.com/rhyneav/papercss/issues"
},
"homepage": "https://github.com/rhyneav/papercss#readme",
"devDependencies": {
"dependencies": {
"gulp": "3.9.1",
"gulp-clean-css": "3.9.0",
"gulp-connect": "5.0.0",
@ -26,10 +27,36 @@
"gulp-plumber": "1.1.0",
"gulp-rename": "1.2.2",
"gulp-watch-less": "1.0.1",
"less": "2.7.2"
},
"devDependencies": {
"browserify": "^14.1.0",
"chai": "^4.1.2",
"http-server": "^0.9.0",
"install": "0.10.1",
"less": "2.7.2",
"normalize.css": "7.0.0",
"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",
"mocha": "^4.0.1",
"nodemon": "^1.11.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"
}
}

5
src/alerts.less
View file

@ -1,3 +1,6 @@
@import './colors.less';
@import './borders.less';
.alert{
.border;
padding: 15px;
@ -15,4 +18,4 @@
}
}
.make-alert-color-classes();
.make-alert-color-classes();

3
src/article.less
View file

@ -1,5 +1,6 @@
article {
@import './colors.less';
article {
.article-title {
font-size: 3rem;
}

5
src/badges.less
View file

@ -1,3 +1,6 @@
@import './colors.less';
@import './borders.less';
.badge {
.border;
@ -22,4 +25,4 @@
}
}
.make-badge-color-classes();
.make-badge-color-classes();

2
src/borders.less
View file

@ -1,3 +1,5 @@
@import './colors.less';
.border {
border: 2px solid @primary;
}

5
src/buttons.less
View file

@ -1,3 +1,8 @@
@import './colors.less';
@import './shadows.less';
@import './borders.less';
@import './forms.less'; // .disabled
button, .paper-btn, [type="button"] {
.shadow;
align-self:center;

5
src/cards.less
View file

@ -1,3 +1,6 @@
@import './colors.less';
@import './shadows.less';
.card {
.shadow;
.shadow-hover;
@ -55,4 +58,4 @@
border: 0;
border-radius: 0;
}
}
}

2
src/code.less
View file

@ -1,3 +1,5 @@
@import './colors.less';
code {
padding: 2px 4px;
font-size: 80%;

4
src/container.less
View file

@ -1,3 +1,5 @@
@import './colors.less';
@large-screen: ~"screen and (max-width: 1200px)";
@medium-screen: ~"screen and (max-width: 992px)";
@small-screen: ~"screen and (max-width: 768px)";
@ -26,6 +28,7 @@
.section {
margin-top: 1rem;
margin-bottom: 2rem;
word-wrap: break-word;
}
.section:after {
.hr-after;
@ -53,4 +56,3 @@ hr:after {
margin-bottom: 0;
}
}

6
src/fonts.less
View file

@ -1,7 +1,9 @@
@import './colors.less';
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
@global-font-size: 20px;
@header-font: 'Patrick Hand SC';
@header-font: 'Patrick Hand SC';
@body-font: 'Neucha';
@font-color: @primary;
@ -43,4 +45,4 @@ h6 {
}
.text-right {
text-align: right;
}
}

4
src/forms.less
View file

@ -1,3 +1,5 @@
@import './colors.less';
input, select, textarea {
display: block;
background:transparent;
@ -100,4 +102,4 @@ input, select, textarea {
fieldset.form-group {
border: none;
padding: 0;
}
}

5
src/images.less
View file

@ -1,3 +1,6 @@
@import './colors.less';
@import './borders.less';
img {
max-width: 100%;
height: auto;
@ -20,4 +23,4 @@ img {
border: 0;
border-radius: 0;
}
}
}

4
src/lists.less
View file

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

97
src/modals.less Normal file
View file

@ -0,0 +1,97 @@
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
.modal{
&:before{
content: "";
display: none;
background: rgba(0,0,0,.6);
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 10;
}
&:target{
&:before{
display: flex;
}
.modal-body{
.translate(0, 0);
top: 20%;
}
}
.modal-body{
flex: 1 1 auto;
padding: 1.25rem;
background: @white;
border: 2px solid @muted-light;
word-wrap: break-word;
position: fixed;
z-index: 11;
max-width: 960px;
@media @medium-screen {
max-width: 85%;
}
@media @xsmall-screen {
max-width: 90%;
}
.translate(0, -500%);
.transition-transform(~"0.3s ease-out");
}
.btn-close{
color: @primary-light;
font-size: 30px;
text-decoration: none;
position: absolute; right: 0; top: 0;
.margin;
background: inherit;
&:hover{
color: @muted;
}
}
.modal-title, h4 {
margin-top: 0;
margin-bottom: 0.5rem;
}
.modal-subtitle, h5 {
.text-secondary;
margin-top: 0;
margin-bottom: 0.5rem;
}
.modal-text, p {
margin-top: 0;
margin-bottom: 1rem;
}
.modal-link + .modal-link,
a + a {
margin-left: 1.25rem;
}
a button {
text-decoration: none;
background: @white;
}
}

3
src/popovers.less
View file

@ -1,3 +1,6 @@
@import './colors.less';
@import './borders.less';
// Core popovers
[popover-top],
[popover-right],

190
src/reset.less Normal file
View file

@ -0,0 +1,190 @@
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
footer,
header,
nav,
section {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
figcaption,
figure,
main {
display: block
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace,monospace;
font-size: 1em
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: inherit
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace,monospace;
font-size: 1em
}
dfn {
font-style: italic
}
mark {
background-color: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
audio,
video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
[type=reset],
[type=submit],
button,
html [type=button] {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
display: inline-block;
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details,
menu {
display: block
}
summary {
display: list-item
}
canvas {
display: inline-block
}
template {
display: none
}
[hidden] {
display: none
}

6
src/styles.less
View file

@ -1,5 +1,5 @@
@import (less) "./reset.less";
@import (less) "./boxreset.less";
@import (less) "../node_modules/normalize.css/normalize.css";
@import (less) "./colors.less";
@import (less) "./fonts.less";
@import (less) "./borders.less";
@ -17,4 +17,6 @@
@import (less) "./cards.less";
@import (less) "./badges.less";
@import (less) "./alerts.less";
@import (less) "./article.less";
@import (less) "./tabs.less";
@import (less) "./article.less";
@import (less) "./modals.less";

4
src/tables.less
View file

@ -1,3 +1,5 @@
@import './colors.less';
table {
box-sizing: border-box;
width: 100%;
@ -28,4 +30,4 @@ table {
&.table-alternating tbody tr:nth-of-type(even) {
color: lighten(@primary, 25%);
}
}
}

40
src/tabs.less Normal file
View file

@ -0,0 +1,40 @@
@import './colors.less';
.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