mirror of
https://github.com/LukeHagar/vercel.git
synced 2025-12-10 12:57:47 +00:00
[examples] Remove examples without detectors (#3864)
This commit is contained in:
Andy
14
examples/assemble/.gitattributes
vendored
14
examples/assemble/.gitattributes
vendored
@@ -1,14 +0,0 @@
|
|||||||
# Enforce Unix newlines
|
|
||||||
*.* text eol=lf
|
|
||||||
*.css text eol=lf
|
|
||||||
*.html text eol=lf
|
|
||||||
*.js text eol=lf
|
|
||||||
*.json text eol=lf
|
|
||||||
*.less text eol=lf
|
|
||||||
*.md text eol=lf
|
|
||||||
*.yml text eol=lf
|
|
||||||
|
|
||||||
*.jpg binary
|
|
||||||
*.gif binary
|
|
||||||
*.png binary
|
|
||||||
*.jpeg binary
|
|
||||||
47
examples/assemble/.gitignore
vendored
47
examples/assemble/.gitignore
vendored
@@ -1,47 +0,0 @@
|
|||||||
# Numerous always-ignore extensions
|
|
||||||
.ruby-version
|
|
||||||
*.diff
|
|
||||||
*.err
|
|
||||||
*.orig
|
|
||||||
*.log
|
|
||||||
*.rej
|
|
||||||
*.swo
|
|
||||||
*.swp
|
|
||||||
*.zip
|
|
||||||
*.vi
|
|
||||||
*~
|
|
||||||
|
|
||||||
# OS or Editor folders
|
|
||||||
*.esproj
|
|
||||||
*.sublime-project
|
|
||||||
*.sublime-workspace
|
|
||||||
._*
|
|
||||||
.cache
|
|
||||||
.DS_Store
|
|
||||||
.idea
|
|
||||||
.project
|
|
||||||
.settings
|
|
||||||
.tmproj
|
|
||||||
nbproject
|
|
||||||
Thumbs.db
|
|
||||||
|
|
||||||
# Komodo
|
|
||||||
*.komodoproject
|
|
||||||
.komodotools
|
|
||||||
|
|
||||||
# grunt-html-validation
|
|
||||||
validation-status.json
|
|
||||||
validation-report.json
|
|
||||||
|
|
||||||
# Folders to ignore
|
|
||||||
tmp
|
|
||||||
temp
|
|
||||||
TODO.md
|
|
||||||
vendor
|
|
||||||
node_modules
|
|
||||||
bower_components
|
|
||||||
_gh_pages
|
|
||||||
_site
|
|
||||||
_draft
|
|
||||||
.env
|
|
||||||
.env.build
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
README.md
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
/*
|
|
||||||
* assemble-examples <https://github.com/assemble/assemble-examples>
|
|
||||||
*
|
|
||||||
* Copyright (c) 2014 Jon Schlinkert, Brian Woodward, contributors.
|
|
||||||
* Licensed under the MIT license.
|
|
||||||
*/
|
|
||||||
|
|
||||||
module.exports = function(grunt) {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
grunt.initConfig({
|
|
||||||
assemble: {
|
|
||||||
options: {
|
|
||||||
flatten: true,
|
|
||||||
partials: ['templates/includes/*.hbs'],
|
|
||||||
layoutdir: 'templates/layouts',
|
|
||||||
layout: 'default.hbs',
|
|
||||||
},
|
|
||||||
site: {
|
|
||||||
files: { 'public/index.js': ['templates/*.hbs'] },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Load the Assemble plugin.
|
|
||||||
grunt.loadNpmTasks('assemble');
|
|
||||||
|
|
||||||
// The default task to run with the `grunt` command.
|
|
||||||
grunt.registerTask('default', ['assemble']);
|
|
||||||
};
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
# Assemble Example
|
|
||||||
|
|
||||||
This directory is a brief example of a [Assemble](http://assemble.io/) app that can be deployed with ZEIT Now and zero configuration.
|
|
||||||
|
|
||||||
## Deploy Your Own
|
|
||||||
|
|
||||||
Deploy your own Assemble project with ZEIT Now.
|
|
||||||
|
|
||||||
[](https://zeit.co/import/project?template=https://github.com/zeit/now/tree/master/examples/assemble)
|
|
||||||
|
|
||||||
_Live Example: https://assemble.now-examples.now.sh_
|
|
||||||
|
|
||||||
### How We Created This Example
|
|
||||||
|
|
||||||
To get started with Assemble deployed with ZEIT Now, you can use [Now CLI](https://zeit.co/download) to initialize the project:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now init assemble
|
|
||||||
```
|
|
||||||
|
|
||||||
### Deploying From Your Terminal
|
|
||||||
|
|
||||||
You can deploy your new Assemble project with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now
|
|
||||||
```
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
# Blog post
|
|
||||||
|
|
||||||
> This is an example blog post
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
|
|
||||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "assemble-example",
|
|
||||||
"private": true,
|
|
||||||
"description": "Example Assemble project.",
|
|
||||||
"version": "0.1.1",
|
|
||||||
"homepage": "https://github.com/jonschlinkert/assemble-example",
|
|
||||||
"scripts": {
|
|
||||||
"build": "grunt assemble"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"name": "Jon Schlinkert",
|
|
||||||
"url": "https://github.com/jonschlinkert"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/jonschlinkert/assemble-example.git"
|
|
||||||
},
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/jonschlinkert/assemble-example/issues"
|
|
||||||
},
|
|
||||||
"licenses": [
|
|
||||||
{
|
|
||||||
"type": "MIT",
|
|
||||||
"url": "https://github.com/jonschlinkert/assemble-example/blob/master/LICENSE-MIT"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"main": "index.js",
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.8.0"
|
|
||||||
},
|
|
||||||
"dependencies": {},
|
|
||||||
"devDependencies": {
|
|
||||||
"assemble": "~0.4.37",
|
|
||||||
"grunt": "~0.4.3",
|
|
||||||
"grunt-cli": "^1.3.2"
|
|
||||||
},
|
|
||||||
"keywords": []
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
title: About
|
|
||||||
description: This is the about page.
|
|
||||||
---
|
|
||||||
<h2>{{description}}</h2>
|
|
||||||
|
|
||||||
{{> button }}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Blog
|
|
||||||
---
|
|
||||||
|
|
||||||
{{md 'content/blog-post.md'}}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
title: Home
|
|
||||||
description: This is the home page.
|
|
||||||
---
|
|
||||||
<h2>{{description}}</h2>
|
|
||||||
|
|
||||||
{{> button }}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<a href="https://github.com/assemble/assemble" class="btn btn-default">Star Assemble on GitHub!</a>
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
<meta charset="UTF-8">
|
|
||||||
<title>{{title}}</title>
|
|
||||||
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
|
|
||||||
<link rel="stylesheet" href="http://getbootstrap.com/assets/css/docs.min.css">
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
{{> head }}
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
{{> body }}
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
module.exports = api => {
|
|
||||||
api.cache.using(() => {
|
|
||||||
// cache based on the two env vars
|
|
||||||
return (
|
|
||||||
'babel:' +
|
|
||||||
process.env.BABEL_TARGET +
|
|
||||||
' protractor:' +
|
|
||||||
process.env.IN_PROTRACTOR
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
plugins: [
|
|
||||||
['@babel/plugin-proposal-decorators', { legacy: true }],
|
|
||||||
['@babel/plugin-proposal-class-properties', { loose: true }],
|
|
||||||
],
|
|
||||||
presets: [
|
|
||||||
[
|
|
||||||
'@babel/preset-env',
|
|
||||||
{
|
|
||||||
targets:
|
|
||||||
process.env.BABEL_TARGET === 'node'
|
|
||||||
? {
|
|
||||||
node: process.env.IN_PROTRACTOR ? '6' : 'current',
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
browsers: ['last 2 versions'],
|
|
||||||
},
|
|
||||||
loose: true,
|
|
||||||
modules: process.env.BABEL_TARGET === 'node' ? 'commonjs' : false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
],
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
# EditorConfig is awesome: http://EditorConfig.org
|
|
||||||
|
|
||||||
# top-most EditorConfig file
|
|
||||||
root = true
|
|
||||||
|
|
||||||
# Unix-style newlines with a newline ending every file
|
|
||||||
[*]
|
|
||||||
end_of_line = lf
|
|
||||||
insert_final_newline = true
|
|
||||||
# 2 space indentation
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
41
examples/aurelia/.gitignore
vendored
41
examples/aurelia/.gitignore
vendored
@@ -1,41 +0,0 @@
|
|||||||
|
|
||||||
# You may want to customise this file depending on your Operating System
|
|
||||||
# and the editor that you use.
|
|
||||||
#
|
|
||||||
# We recommend that you use a Global Gitignore for files that are not related
|
|
||||||
# to the project. (https://help.github.com/articles/ignoring-files/#create-a-global-gitignore)
|
|
||||||
|
|
||||||
# OS
|
|
||||||
#
|
|
||||||
# Ref: https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
|
|
||||||
# Ref: https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
|
|
||||||
# Ref: https://github.com/github/gitignore/blob/master/Global/Linux.gitignore
|
|
||||||
.DS_STORE
|
|
||||||
Thumbs.db
|
|
||||||
|
|
||||||
# Editors
|
|
||||||
#
|
|
||||||
# Ref: https://github.com/github/gitignore/blob/master/Global
|
|
||||||
# Ref: https://github.com/github/gitignore/blob/master/Global/JetBrains.gitignore
|
|
||||||
# Ref: https://github.com/github/gitignore/blob/master/Global/VisualStudioCode.gitignore
|
|
||||||
.idea
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/settings.json
|
|
||||||
!.vscode/tasks.json
|
|
||||||
!.vscode/launch.json
|
|
||||||
!.vscode/extensions.json
|
|
||||||
|
|
||||||
# Dependencies
|
|
||||||
node_modules
|
|
||||||
|
|
||||||
# Compiled files
|
|
||||||
/scripts
|
|
||||||
/src/environment.js
|
|
||||||
/src/environment.ts
|
|
||||||
/dist
|
|
||||||
/test/coverage-jest
|
|
||||||
/test/coverage-karma
|
|
||||||
|
|
||||||
# Environment Variables
|
|
||||||
.env
|
|
||||||
.env.build
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
README.md
|
|
||||||
yarn.lock
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
# Aurelia Example
|
|
||||||
|
|
||||||
This directory is a brief example of an [Aurelia](https://aurelia.io/) app that can be deployed with ZEIT Now and zero configuration.
|
|
||||||
|
|
||||||
## Deploy Your Own
|
|
||||||
|
|
||||||
Deploy your own Aurelia project with ZEIT Now.
|
|
||||||
|
|
||||||
[](https://zeit.co/import/project?template=https://github.com/zeit/now/tree/master/examples/aurelia)
|
|
||||||
|
|
||||||
_Live Example: https://aurelia.now-examples.now.sh_
|
|
||||||
|
|
||||||
### How We Created This Example
|
|
||||||
|
|
||||||
To get started deploying Aurelia with ZEIT Now, you can use the [Aurelia CLI](https://aurelia.io/docs/cli/basics/) to initialize the project:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ au new
|
|
||||||
```
|
|
||||||
|
|
||||||
### Deploying From Your Terminal
|
|
||||||
|
|
||||||
You can deploy your new Aurelia project with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now
|
|
||||||
```
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "aurelia",
|
|
||||||
"type": "project:application",
|
|
||||||
"paths": {
|
|
||||||
"root": "src",
|
|
||||||
"resources": "resources",
|
|
||||||
"elements": "resources/elements",
|
|
||||||
"attributes": "resources/attributes",
|
|
||||||
"valueConverters": "resources/value-converters",
|
|
||||||
"bindingBehaviors": "resources/binding-behaviors"
|
|
||||||
},
|
|
||||||
"transpiler": {
|
|
||||||
"id": "babel",
|
|
||||||
"fileExtension": ".js"
|
|
||||||
},
|
|
||||||
"build": {
|
|
||||||
"options": {
|
|
||||||
"server": "dev",
|
|
||||||
"extractCss": "prod",
|
|
||||||
"coverage": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"platform": {
|
|
||||||
"hmr": false,
|
|
||||||
"open": false,
|
|
||||||
"port": 8080,
|
|
||||||
"output": "public"
|
|
||||||
},
|
|
||||||
"packageManager": "yarn"
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
export default {
|
|
||||||
debug: true,
|
|
||||||
testing: true,
|
|
||||||
};
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
export default {
|
|
||||||
debug: false,
|
|
||||||
testing: false,
|
|
||||||
};
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
export default {
|
|
||||||
debug: true,
|
|
||||||
testing: false,
|
|
||||||
};
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
import { inject } from 'aurelia-dependency-injection';
|
|
||||||
import { Project, ProjectItem, CLIOptions, UI } from 'aurelia-cli';
|
|
||||||
|
|
||||||
@inject(Project, CLIOptions, UI)
|
|
||||||
export default class AttributeGenerator {
|
|
||||||
constructor(project, options, ui) {
|
|
||||||
this.project = project;
|
|
||||||
this.options = options;
|
|
||||||
this.ui = ui;
|
|
||||||
}
|
|
||||||
|
|
||||||
async execute() {
|
|
||||||
const name = await this.ui.ensureAnswer(
|
|
||||||
this.options.args[0],
|
|
||||||
'What would you like to call the custom attribute?'
|
|
||||||
);
|
|
||||||
|
|
||||||
let fileName = this.project.makeFileName(name);
|
|
||||||
let className = this.project.makeClassName(name);
|
|
||||||
|
|
||||||
this.project.attributes.add(
|
|
||||||
ProjectItem.text(`${fileName}.js`, this.generateSource(className))
|
|
||||||
);
|
|
||||||
|
|
||||||
await this.project.commitChanges();
|
|
||||||
await this.ui.log(`Created ${fileName}.`);
|
|
||||||
}
|
|
||||||
|
|
||||||
generateSource(className) {
|
|
||||||
return `import {inject} from 'aurelia-framework';
|
|
||||||
|
|
||||||
@inject(Element)
|
|
||||||
export class ${className}CustomAttribute {
|
|
||||||
constructor(element) {
|
|
||||||
this.element = element;
|
|
||||||
}
|
|
||||||
|
|
||||||
valueChanged(newValue, oldValue) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "attribute",
|
|
||||||
"description": "Creates a custom attribute class and places it in the project resources."
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import { inject } from 'aurelia-dependency-injection';
|
|
||||||
import { Project, ProjectItem, CLIOptions, UI } from 'aurelia-cli';
|
|
||||||
|
|
||||||
@inject(Project, CLIOptions, UI)
|
|
||||||
export default class BindingBehaviorGenerator {
|
|
||||||
constructor(project, options, ui) {
|
|
||||||
this.project = project;
|
|
||||||
this.options = options;
|
|
||||||
this.ui = ui;
|
|
||||||
}
|
|
||||||
|
|
||||||
async execute() {
|
|
||||||
const name = await this.ui.ensureAnswer(
|
|
||||||
this.options.args[0],
|
|
||||||
'What would you like to call the binding behavior?'
|
|
||||||
);
|
|
||||||
|
|
||||||
let fileName = this.project.makeFileName(name);
|
|
||||||
let className = this.project.makeClassName(name);
|
|
||||||
|
|
||||||
this.project.bindingBehaviors.add(
|
|
||||||
ProjectItem.text(`${fileName}.js`, this.generateSource(className))
|
|
||||||
);
|
|
||||||
|
|
||||||
await this.project.commitChanges();
|
|
||||||
await this.ui.log(`Created ${fileName}.`);
|
|
||||||
}
|
|
||||||
|
|
||||||
generateSource(className) {
|
|
||||||
return `export class ${className}BindingBehavior {
|
|
||||||
bind(binding, source) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
|
|
||||||
unbind(binding, source) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "binding-behavior",
|
|
||||||
"description": "Creates a binding behavior class and places it in the project resources."
|
|
||||||
}
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
import { inject } from 'aurelia-dependency-injection';
|
|
||||||
import { Project, ProjectItem, CLIOptions, UI } from 'aurelia-cli';
|
|
||||||
|
|
||||||
var path = require('path');
|
|
||||||
|
|
||||||
@inject(Project, CLIOptions, UI)
|
|
||||||
export default class ElementGenerator {
|
|
||||||
constructor(project, options, ui) {
|
|
||||||
this.project = project;
|
|
||||||
this.options = options;
|
|
||||||
this.ui = ui;
|
|
||||||
}
|
|
||||||
|
|
||||||
async execute() {
|
|
||||||
const name = await this.ui.ensureAnswer(
|
|
||||||
this.options.args[0],
|
|
||||||
'What would you like to call the component?'
|
|
||||||
);
|
|
||||||
|
|
||||||
const subFolders = await this.ui.ensureAnswer(
|
|
||||||
this.options.args[1],
|
|
||||||
"What sub-folder would you like to add it to?\nIf it doesn't exist it will be created for you.\n\nDefault folder is the source folder (src).",
|
|
||||||
'.'
|
|
||||||
);
|
|
||||||
|
|
||||||
let fileName = this.project.makeFileName(name);
|
|
||||||
let className = this.project.makeClassName(name);
|
|
||||||
|
|
||||||
this.project.root.add(
|
|
||||||
ProjectItem.text(
|
|
||||||
path.join(subFolders, fileName + '.js'),
|
|
||||||
this.generateJSSource(className)
|
|
||||||
),
|
|
||||||
ProjectItem.text(
|
|
||||||
path.join(subFolders, fileName + '.html'),
|
|
||||||
this.generateHTMLSource(className)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
await this.project.commitChanges();
|
|
||||||
await this.ui.log(
|
|
||||||
`Created ${name} in the '${path.join(
|
|
||||||
this.project.root.name,
|
|
||||||
subFolders
|
|
||||||
)}' folder`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
generateJSSource(className) {
|
|
||||||
return `export class ${className} {
|
|
||||||
constructor() {
|
|
||||||
this.message = 'Hello world';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
generateHTMLSource(className) {
|
|
||||||
return `<template>
|
|
||||||
<h1>\${message}</h1>
|
|
||||||
</template>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "component",
|
|
||||||
"description": "Creates a custom component class and template (view model and view), placing them in the project source folder (or optionally in sub folders)."
|
|
||||||
}
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
import { inject } from 'aurelia-dependency-injection';
|
|
||||||
import { Project, ProjectItem, CLIOptions, UI } from 'aurelia-cli';
|
|
||||||
|
|
||||||
@inject(Project, CLIOptions, UI)
|
|
||||||
export default class ElementGenerator {
|
|
||||||
constructor(project, options, ui) {
|
|
||||||
this.project = project;
|
|
||||||
this.options = options;
|
|
||||||
this.ui = ui;
|
|
||||||
}
|
|
||||||
|
|
||||||
async execute() {
|
|
||||||
const name = await this.ui.ensureAnswer(
|
|
||||||
this.options.args[0],
|
|
||||||
'What would you like to call the custom element?'
|
|
||||||
);
|
|
||||||
|
|
||||||
let fileName = this.project.makeFileName(name);
|
|
||||||
let className = this.project.makeClassName(name);
|
|
||||||
|
|
||||||
this.project.elements.add(
|
|
||||||
ProjectItem.text(`${fileName}.js`, this.generateJSSource(className)),
|
|
||||||
ProjectItem.text(`${fileName}.html`, this.generateHTMLSource(className))
|
|
||||||
);
|
|
||||||
|
|
||||||
await this.project.commitChanges();
|
|
||||||
await this.ui.log(`Created ${fileName}.`);
|
|
||||||
}
|
|
||||||
|
|
||||||
generateJSSource(className) {
|
|
||||||
return `import {bindable} from 'aurelia-framework';
|
|
||||||
|
|
||||||
export class ${className} {
|
|
||||||
@bindable value;
|
|
||||||
|
|
||||||
valueChanged(newValue, oldValue) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
generateHTMLSource(className) {
|
|
||||||
return `<template>
|
|
||||||
<h1>\${value}</h1>
|
|
||||||
</template>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "element",
|
|
||||||
"description": "Creates a custom element class and template, placing them in the project resources."
|
|
||||||
}
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
import { inject } from 'aurelia-dependency-injection';
|
|
||||||
import { Project, ProjectItem, CLIOptions, UI } from 'aurelia-cli';
|
|
||||||
|
|
||||||
@inject(Project, CLIOptions, UI)
|
|
||||||
export default class GeneratorGenerator {
|
|
||||||
constructor(project, options, ui) {
|
|
||||||
this.project = project;
|
|
||||||
this.options = options;
|
|
||||||
this.ui = ui;
|
|
||||||
}
|
|
||||||
|
|
||||||
async execute() {
|
|
||||||
const name = await this.ui.ensureAnswer(
|
|
||||||
this.options.args[0],
|
|
||||||
'What would you like to call the generator?'
|
|
||||||
);
|
|
||||||
|
|
||||||
let fileName = this.project.makeFileName(name);
|
|
||||||
let className = this.project.makeClassName(name);
|
|
||||||
|
|
||||||
this.project.generators.add(
|
|
||||||
ProjectItem.text(`${fileName}.js`, this.generateSource(className))
|
|
||||||
);
|
|
||||||
|
|
||||||
await this.project.commitChanges();
|
|
||||||
await this.ui.log(`Created ${fileName}.`);
|
|
||||||
}
|
|
||||||
|
|
||||||
generateSource(className) {
|
|
||||||
return `import {inject} from 'aurelia-dependency-injection';
|
|
||||||
import {Project, ProjectItem, CLIOptions, UI} from 'aurelia-cli';
|
|
||||||
|
|
||||||
@inject(Project, CLIOptions, UI)
|
|
||||||
export default class ${className}Generator {
|
|
||||||
constructor(project, options, ui) {
|
|
||||||
this.project = project;
|
|
||||||
this.options = options;
|
|
||||||
this.ui = ui;
|
|
||||||
}
|
|
||||||
|
|
||||||
execute() {
|
|
||||||
return this.ui
|
|
||||||
.ensureAnswer(this.options.args[0], 'What would you like to call the new item?')
|
|
||||||
.then(name => {
|
|
||||||
let fileName = this.project.makeFileName(name);
|
|
||||||
let className = this.project.makeClassName(name);
|
|
||||||
|
|
||||||
this.project.elements.add(
|
|
||||||
ProjectItem.text(\`\${fileName}.js\`, this.generateSource(className))
|
|
||||||
);
|
|
||||||
|
|
||||||
return this.project.commitChanges()
|
|
||||||
.then(() => this.ui.log(\`Created \${fileName}.\`));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
generateSource(className) {
|
|
||||||
return \`import {bindable} from 'aurelia-framework';
|
|
||||||
|
|
||||||
export class \${className} {
|
|
||||||
@bindable value;
|
|
||||||
|
|
||||||
valueChanged(newValue, oldValue) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
}
|
|
||||||
\`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "generator",
|
|
||||||
"description": "Creates a generator class and places it in the project generators folder."
|
|
||||||
}
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
import { inject } from 'aurelia-dependency-injection';
|
|
||||||
import { Project, ProjectItem, CLIOptions, UI } from 'aurelia-cli';
|
|
||||||
|
|
||||||
@inject(Project, CLIOptions, UI)
|
|
||||||
export default class TaskGenerator {
|
|
||||||
constructor(project, options, ui) {
|
|
||||||
this.project = project;
|
|
||||||
this.options = options;
|
|
||||||
this.ui = ui;
|
|
||||||
}
|
|
||||||
|
|
||||||
async execute() {
|
|
||||||
const name = await this.ui.ensureAnswer(
|
|
||||||
this.options.args[0],
|
|
||||||
'What would you like to call the task?'
|
|
||||||
);
|
|
||||||
|
|
||||||
let fileName = this.project.makeFileName(name);
|
|
||||||
let functionName = this.project.makeFunctionName(name);
|
|
||||||
|
|
||||||
this.project.tasks.add(
|
|
||||||
ProjectItem.text(`${fileName}.js`, this.generateSource(functionName))
|
|
||||||
);
|
|
||||||
|
|
||||||
await this.project.commitChanges();
|
|
||||||
await this.ui.log(`Created ${fileName}.`);
|
|
||||||
}
|
|
||||||
|
|
||||||
generateSource(functionName) {
|
|
||||||
return `import gulp from 'gulp';
|
|
||||||
import project from '../aurelia.json';
|
|
||||||
|
|
||||||
export default function ${functionName}() {
|
|
||||||
return gulp.src(project.paths.???)
|
|
||||||
.pipe(gulp.dest(project.paths.output));
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "task",
|
|
||||||
"description": "Creates a task and places it in the project tasks folder."
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import { inject } from 'aurelia-dependency-injection';
|
|
||||||
import { Project, ProjectItem, CLIOptions, UI } from 'aurelia-cli';
|
|
||||||
|
|
||||||
@inject(Project, CLIOptions, UI)
|
|
||||||
export default class ValueConverterGenerator {
|
|
||||||
constructor(project, options, ui) {
|
|
||||||
this.project = project;
|
|
||||||
this.options = options;
|
|
||||||
this.ui = ui;
|
|
||||||
}
|
|
||||||
|
|
||||||
async execute() {
|
|
||||||
const name = await this.ui.ensureAnswer(
|
|
||||||
this.options.args[0],
|
|
||||||
'What would you like to call the value converter?'
|
|
||||||
);
|
|
||||||
|
|
||||||
let fileName = this.project.makeFileName(name);
|
|
||||||
let className = this.project.makeClassName(name);
|
|
||||||
|
|
||||||
this.project.valueConverters.add(
|
|
||||||
ProjectItem.text(`${fileName}.js`, this.generateSource(className))
|
|
||||||
);
|
|
||||||
|
|
||||||
await this.project.commitChanges();
|
|
||||||
await this.ui.log(`Created ${fileName}.`);
|
|
||||||
}
|
|
||||||
|
|
||||||
generateSource(className) {
|
|
||||||
return `export class ${className}ValueConverter {
|
|
||||||
toView(value) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
|
|
||||||
fromView(value) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "value-converter",
|
|
||||||
"description": "Creates a value converter class and places it in the project resources."
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import webpackConfig from '../../webpack.config';
|
|
||||||
import webpack from 'webpack';
|
|
||||||
import project from '../aurelia.json';
|
|
||||||
import gulp from 'gulp';
|
|
||||||
import del from 'del';
|
|
||||||
import { CLIOptions, Configuration } from 'aurelia-cli';
|
|
||||||
import configureEnvironment from './environment';
|
|
||||||
|
|
||||||
const analyze = CLIOptions.hasFlag('analyze');
|
|
||||||
const buildOptions = new Configuration(project.build.options);
|
|
||||||
const production = CLIOptions.getEnvironment() === 'prod';
|
|
||||||
const server = buildOptions.isApplicable('server');
|
|
||||||
const extractCss = buildOptions.isApplicable('extractCss');
|
|
||||||
const coverage = buildOptions.isApplicable('coverage');
|
|
||||||
|
|
||||||
const config = webpackConfig({
|
|
||||||
production,
|
|
||||||
server,
|
|
||||||
extractCss,
|
|
||||||
coverage,
|
|
||||||
analyze,
|
|
||||||
});
|
|
||||||
const compiler = webpack(config);
|
|
||||||
|
|
||||||
function buildWebpack(done) {
|
|
||||||
if (CLIOptions.hasFlag('watch')) {
|
|
||||||
compiler.watch({}, onBuild);
|
|
||||||
} else {
|
|
||||||
compiler.run(onBuild);
|
|
||||||
compiler.hooks.done.tap('done', () => done());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onBuild(err, stats) {
|
|
||||||
if (!CLIOptions.hasFlag('watch') && err) {
|
|
||||||
console.error(err.stack || err);
|
|
||||||
if (err.details) console.error(err.details);
|
|
||||||
process.exit(1);
|
|
||||||
} else {
|
|
||||||
process.stdout.write(
|
|
||||||
stats.toString({ colors: require('supports-color') }) + '\n'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!CLIOptions.hasFlag('watch') && stats.hasErrors()) {
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearDist() {
|
|
||||||
return del([config.output.path]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const build = gulp.series(clearDist, configureEnvironment, buildWebpack);
|
|
||||||
|
|
||||||
export { config, buildWebpack, build as default };
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "build",
|
|
||||||
"description": "Builds and processes all application assets.",
|
|
||||||
"flags": [
|
|
||||||
{
|
|
||||||
"name": "analyze",
|
|
||||||
"description": "Enable Webpack Bundle Analyzer. Typically paired with --env prod",
|
|
||||||
"type": "boolean"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "env",
|
|
||||||
"description": "Sets the build environment.",
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "watch",
|
|
||||||
"description": "Watches source files for changes and refreshes the bundles automatically.",
|
|
||||||
"type": "boolean"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
import project from '../aurelia.json';
|
|
||||||
import rename from 'gulp-rename';
|
|
||||||
import gulp from 'gulp';
|
|
||||||
import fs from 'fs';
|
|
||||||
import through from 'through2';
|
|
||||||
import { CLIOptions } from 'aurelia-cli';
|
|
||||||
|
|
||||||
function configureEnvironment() {
|
|
||||||
let env = CLIOptions.getEnvironment();
|
|
||||||
|
|
||||||
return gulp
|
|
||||||
.src(
|
|
||||||
`aurelia_project/environments/${env}${project.transpiler.fileExtension}`
|
|
||||||
)
|
|
||||||
.pipe(rename(`environment${project.transpiler.fileExtension}`))
|
|
||||||
.pipe(
|
|
||||||
through.obj(function(file, _, cb) {
|
|
||||||
// https://github.com/aurelia/cli/issues/1031
|
|
||||||
fs.unlink(`${project.paths.root}/${file.relative}`, function() {
|
|
||||||
cb(null, file);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.pipe(gulp.dest(project.paths.root))
|
|
||||||
.pipe(
|
|
||||||
through.obj(function(file, enc, cb) {
|
|
||||||
// https://github.com/webpack/watchpack/issues/25#issuecomment-287789288
|
|
||||||
const now = Date.now() / 1000;
|
|
||||||
const then = now - 10;
|
|
||||||
fs.utimes(file.path, then, then, function(err) {
|
|
||||||
if (err) throw err;
|
|
||||||
});
|
|
||||||
cb(null, file);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default configureEnvironment;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from './test';
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "jest",
|
|
||||||
"description": "Runs Jest and reports the results.",
|
|
||||||
"flags": [
|
|
||||||
{
|
|
||||||
"name": "watch",
|
|
||||||
"description": "Watches test files for changes and re-runs the tests automatically.",
|
|
||||||
"type": "boolean"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
import webpack from 'webpack';
|
|
||||||
import Server from 'webpack-dev-server';
|
|
||||||
import project from '../aurelia.json';
|
|
||||||
import gulp from 'gulp';
|
|
||||||
|
|
||||||
import { config } from './build';
|
|
||||||
import configureEnvironment from './environment';
|
|
||||||
import { CLIOptions, reportWebpackReadiness } from 'aurelia-cli';
|
|
||||||
|
|
||||||
function runWebpack(done) {
|
|
||||||
// https://webpack.github.io/docs/webpack-dev-server.html
|
|
||||||
let opts = {
|
|
||||||
host: 'localhost',
|
|
||||||
publicPath: config.output.publicPath,
|
|
||||||
filename: config.output.filename,
|
|
||||||
hot: project.platform.hmr || CLIOptions.hasFlag('hmr'),
|
|
||||||
port: CLIOptions.getFlagValue('port') || project.platform.port,
|
|
||||||
contentBase: config.output.path,
|
|
||||||
historyApiFallback: true,
|
|
||||||
open: project.platform.open || CLIOptions.hasFlag('open'),
|
|
||||||
stats: {
|
|
||||||
colors: require('supports-color'),
|
|
||||||
},
|
|
||||||
...config.devServer,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add the webpack-dev-server client to the webpack entry point
|
|
||||||
// The path for the client to use such as `webpack-dev-server/client?http://${opts.host}:${opts.port}/` is not required
|
|
||||||
// The path used is derived from window.location in the browser and output.publicPath in the webpack.config.
|
|
||||||
if (project.platform.hmr || CLIOptions.hasFlag('hmr')) {
|
|
||||||
config.plugins.push(new webpack.HotModuleReplacementPlugin());
|
|
||||||
config.entry.app.unshift(
|
|
||||||
'webpack-dev-server/client',
|
|
||||||
'webpack/hot/dev-server'
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
// removed "<script src="/webpack-dev-server.js"></script>" from index.ejs in favour of this method
|
|
||||||
config.entry.app.unshift('webpack-dev-server/client');
|
|
||||||
}
|
|
||||||
|
|
||||||
const compiler = webpack(config);
|
|
||||||
let server = new Server(compiler, opts);
|
|
||||||
|
|
||||||
server.listen(opts.port, opts.host, function(err) {
|
|
||||||
if (err) throw err;
|
|
||||||
|
|
||||||
reportWebpackReadiness(opts);
|
|
||||||
done();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const run = gulp.series(configureEnvironment, runWebpack);
|
|
||||||
|
|
||||||
export { run as default };
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "run",
|
|
||||||
"description": "Builds the application and serves up the assets via a local web server, watching files for changes as you work.",
|
|
||||||
"flags": [
|
|
||||||
{
|
|
||||||
"name": "analyze",
|
|
||||||
"description": "Enable Webpack Bundle Analyzer. Typically paired with --env prod",
|
|
||||||
"type": "boolean"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "env",
|
|
||||||
"description": "Sets the build environment.",
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "hmr",
|
|
||||||
"description": "Enable Hot Module Reload",
|
|
||||||
"type": "boolean"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "port",
|
|
||||||
"description": "Set port number of the dev server",
|
|
||||||
"type": "string"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "open",
|
|
||||||
"description": "Open the default browser at the application location.",
|
|
||||||
"type": "boolean"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import jest from 'jest-cli';
|
|
||||||
import path from 'path';
|
|
||||||
import packageJson from '../../package.json';
|
|
||||||
|
|
||||||
import { CLIOptions } from 'aurelia-cli';
|
|
||||||
|
|
||||||
export default cb => {
|
|
||||||
let options = packageJson.jest;
|
|
||||||
|
|
||||||
if (CLIOptions.hasFlag('watch')) {
|
|
||||||
Object.assign(options, { watchAll: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
process.env.BABEL_TARGET = 'node';
|
|
||||||
|
|
||||||
jest
|
|
||||||
.runCLI(options, [path.resolve(__dirname, '../../')])
|
|
||||||
.then(({ results }) => {
|
|
||||||
if (results.numFailedTests || results.numFailedTestSuites) {
|
|
||||||
cb('Tests Failed');
|
|
||||||
} else {
|
|
||||||
cb();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "test",
|
|
||||||
"description": "Runs Jest and reports the results.",
|
|
||||||
"flags": [
|
|
||||||
{
|
|
||||||
"name": "watch",
|
|
||||||
"description": "Watches test files for changes and re-runs the tests automatically.",
|
|
||||||
"type": "boolean"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,12 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title><%- htmlWebpackPlugin.options.metadata.title %></title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<base href="<%- htmlWebpackPlugin.options.metadata.baseUrl %>">
|
|
||||||
<!-- imported CSS are concatenated and added automatically -->
|
|
||||||
</head>
|
|
||||||
<body aurelia-app="main">
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "es2015",
|
|
||||||
"lib": ["es2017", "dom"],
|
|
||||||
"experimentalDecorators": true
|
|
||||||
},
|
|
||||||
"exclude": ["node_modules", "dist"]
|
|
||||||
}
|
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "aurelia",
|
|
||||||
"description": "An Aurelia client application.",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"repository": {
|
|
||||||
"type": "???",
|
|
||||||
"url": "???"
|
|
||||||
},
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"aurelia-bootstrapper": "^2.3.2",
|
|
||||||
"aurelia-animator-css": "^1.0.4"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"aurelia-cli": "^1.0.2",
|
|
||||||
"aurelia-testing": "^1.0.0",
|
|
||||||
"aurelia-tools": "^2.0.0",
|
|
||||||
"gulp": "^4.0.0",
|
|
||||||
"minimatch": "^3.0.4",
|
|
||||||
"through2": "^3.0.0",
|
|
||||||
"vinyl-fs": "^3.0.3",
|
|
||||||
"promise-polyfill": "^8.1.0",
|
|
||||||
"regenerator-runtime": "0.13.2",
|
|
||||||
"babel-eslint": "^10.0.1",
|
|
||||||
"eslint": "latest",
|
|
||||||
"babel-loader": "^8.0.5",
|
|
||||||
"babel-plugin-istanbul": "^5.1.1",
|
|
||||||
"@babel/plugin-proposal-decorators": "^7.4.0",
|
|
||||||
"@babel/plugin-proposal-class-properties": "^7.4.0",
|
|
||||||
"@babel/preset-env": "^7.4.2",
|
|
||||||
"@babel/core": "^7.4.0",
|
|
||||||
"@babel/register": "^7.4.0",
|
|
||||||
"gulp-rename": "^1.4.0",
|
|
||||||
"html-webpack-plugin": "^3.2.0",
|
|
||||||
"copy-webpack-plugin": "^5.0.0",
|
|
||||||
"mini-css-extract-plugin": "^0.4.3",
|
|
||||||
"aurelia-webpack-plugin": "^3.0.0",
|
|
||||||
"duplicate-package-checker-webpack-plugin": "^3.0.0",
|
|
||||||
"webpack": "^4.27.0",
|
|
||||||
"webpack-cli": "^3.1.2",
|
|
||||||
"webpack-dev-server": "^3.1.9",
|
|
||||||
"expose-loader": "^0.7.5",
|
|
||||||
"style-loader": "^0.23.1",
|
|
||||||
"url-loader": "^1.1.2",
|
|
||||||
"del": "^3.0.0",
|
|
||||||
"css-loader": "^1.0.0",
|
|
||||||
"file-loader": "^2.0.0",
|
|
||||||
"json-loader": "^0.5.7",
|
|
||||||
"html-loader": "^0.5.5",
|
|
||||||
"istanbul-instrumenter-loader": "^3.0.1",
|
|
||||||
"webpack-bundle-analyzer": "^3.0.4",
|
|
||||||
"jest": "^24.1.0",
|
|
||||||
"jest-cli": "^24.1.0",
|
|
||||||
"jest-transform-stub": "^2.0.0",
|
|
||||||
"aurelia-loader-nodejs": "^1.0.1",
|
|
||||||
"aurelia-pal-nodejs": "^1.2.0",
|
|
||||||
"babel-jest": "^24.5.0"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"build": "au build",
|
|
||||||
"start": "au run",
|
|
||||||
"dev": "au run --port $PORT",
|
|
||||||
"test": "au test"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8.9.0"
|
|
||||||
},
|
|
||||||
"jest": {
|
|
||||||
"moduleNameMapper": {
|
|
||||||
"^aurelia-binding$": "<rootDir>/node_modules/aurelia-binding"
|
|
||||||
},
|
|
||||||
"modulePaths": [
|
|
||||||
"<rootDir>/src",
|
|
||||||
"<rootDir>/node_modules"
|
|
||||||
],
|
|
||||||
"moduleFileExtensions": [
|
|
||||||
"js",
|
|
||||||
"json"
|
|
||||||
],
|
|
||||||
"transform": {
|
|
||||||
"^.+\\.(css|less|sass|scss|styl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "jest-transform-stub",
|
|
||||||
"^.+\\.js$": "babel-jest"
|
|
||||||
},
|
|
||||||
"testRegex": "\\.spec\\.js$",
|
|
||||||
"setupFiles": [
|
|
||||||
"<rootDir>/test/jest-pretest.js"
|
|
||||||
],
|
|
||||||
"testEnvironment": "node",
|
|
||||||
"collectCoverage": true,
|
|
||||||
"collectCoverageFrom": [
|
|
||||||
"src/**/*.js",
|
|
||||||
"!**/*.spec.js",
|
|
||||||
"!**/node_modules/**",
|
|
||||||
"!**/test/**"
|
|
||||||
],
|
|
||||||
"coverageDirectory": "<rootDir>/test/coverage-jest",
|
|
||||||
"coverageReporters": [
|
|
||||||
"json",
|
|
||||||
"lcov",
|
|
||||||
"text",
|
|
||||||
"html"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<template>
|
|
||||||
<h1>${message}</h1>
|
|
||||||
</template>
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export class App {
|
|
||||||
message = 'Hello World!';
|
|
||||||
}
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
// regenerator-runtime is to support async/await syntax in ESNext.
|
|
||||||
// If you don't use async/await, you can remove regenerator-runtime.
|
|
||||||
import 'regenerator-runtime/runtime';
|
|
||||||
import environment from './environment';
|
|
||||||
import { PLATFORM } from 'aurelia-pal';
|
|
||||||
|
|
||||||
export function configure(aurelia) {
|
|
||||||
aurelia.use
|
|
||||||
.standardConfiguration()
|
|
||||||
.feature(PLATFORM.moduleName('resources/index'));
|
|
||||||
|
|
||||||
aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');
|
|
||||||
|
|
||||||
if (environment.testing) {
|
|
||||||
aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
|
|
||||||
}
|
|
||||||
|
|
||||||
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export function configure(config) {
|
|
||||||
//config.globalResources([]);
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,6 +0,0 @@
|
|||||||
import 'aurelia-polyfills';
|
|
||||||
import { Options } from 'aurelia-loader-nodejs';
|
|
||||||
import { globalize } from 'aurelia-pal-nodejs';
|
|
||||||
import path from 'path';
|
|
||||||
Options.relativeToDir = path.join(__dirname, 'unit');
|
|
||||||
globalize();
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"rules": {
|
|
||||||
"no-var": 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import { bootstrap } from 'aurelia-bootstrapper';
|
|
||||||
import { StageComponent } from 'aurelia-testing';
|
|
||||||
import { PLATFORM } from 'aurelia-pal';
|
|
||||||
|
|
||||||
describe('Stage App Component', () => {
|
|
||||||
let component;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
component = StageComponent.withResources(PLATFORM.moduleName('app')).inView(
|
|
||||||
'<app></app>'
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => component.dispose());
|
|
||||||
|
|
||||||
it('should render message', done => {
|
|
||||||
component
|
|
||||||
.create(bootstrap)
|
|
||||||
.then(() => {
|
|
||||||
const view = component.element;
|
|
||||||
expect(view.textContent.trim()).toBe('Hello World!');
|
|
||||||
done();
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
fail(e);
|
|
||||||
done();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,224 +0,0 @@
|
|||||||
const path = require('path');
|
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
||||||
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
|
|
||||||
const project = require('./aurelia_project/aurelia.json');
|
|
||||||
const {
|
|
||||||
AureliaPlugin,
|
|
||||||
ModuleDependenciesPlugin,
|
|
||||||
} = require('aurelia-webpack-plugin');
|
|
||||||
const { ProvidePlugin } = require('webpack');
|
|
||||||
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
|
|
||||||
|
|
||||||
// config helpers:
|
|
||||||
const ensureArray = config =>
|
|
||||||
(config && (Array.isArray(config) ? config : [config])) || [];
|
|
||||||
const when = (condition, config, negativeConfig) =>
|
|
||||||
condition ? ensureArray(config) : ensureArray(negativeConfig);
|
|
||||||
|
|
||||||
// primary config:
|
|
||||||
const title = 'Aurelia Navigation Skeleton';
|
|
||||||
const outDir = path.resolve(__dirname, project.platform.output);
|
|
||||||
const srcDir = path.resolve(__dirname, 'src');
|
|
||||||
const testDir = path.resolve(__dirname, 'test', 'unit');
|
|
||||||
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
|
|
||||||
const baseUrl = '/';
|
|
||||||
|
|
||||||
const cssRules = [{ loader: 'css-loader' }];
|
|
||||||
|
|
||||||
module.exports = ({
|
|
||||||
production,
|
|
||||||
server,
|
|
||||||
extractCss,
|
|
||||||
coverage,
|
|
||||||
analyze,
|
|
||||||
karma,
|
|
||||||
} = {}) => ({
|
|
||||||
resolve: {
|
|
||||||
extensions: ['.js'],
|
|
||||||
modules: [srcDir, 'node_modules'],
|
|
||||||
// Enforce single aurelia-binding, to avoid v1/v2 duplication due to
|
|
||||||
// out-of-date dependencies on 3rd party aurelia plugins
|
|
||||||
alias: {
|
|
||||||
'aurelia-binding': path.resolve(
|
|
||||||
__dirname,
|
|
||||||
'node_modules/aurelia-binding'
|
|
||||||
),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
entry: {
|
|
||||||
app: ['aurelia-bootstrapper'],
|
|
||||||
},
|
|
||||||
mode: production ? 'production' : 'development',
|
|
||||||
output: {
|
|
||||||
path: outDir,
|
|
||||||
publicPath: baseUrl,
|
|
||||||
filename: production
|
|
||||||
? '[name].[chunkhash].bundle.js'
|
|
||||||
: '[name].[hash].bundle.js',
|
|
||||||
sourceMapFilename: production
|
|
||||||
? '[name].[chunkhash].bundle.map'
|
|
||||||
: '[name].[hash].bundle.map',
|
|
||||||
chunkFilename: production
|
|
||||||
? '[name].[chunkhash].chunk.js'
|
|
||||||
: '[name].[hash].chunk.js',
|
|
||||||
},
|
|
||||||
optimization: {
|
|
||||||
runtimeChunk: true, // separates the runtime chunk, required for long term cacheability
|
|
||||||
// moduleIds is the replacement for HashedModuleIdsPlugin and NamedModulesPlugin deprecated in https://github.com/webpack/webpack/releases/tag/v4.16.0
|
|
||||||
// changes module id's to use hashes be based on the relative path of the module, required for long term cacheability
|
|
||||||
moduleIds: 'hashed',
|
|
||||||
// Use splitChunks to breakdown the App/Aurelia bundle down into smaller chunks
|
|
||||||
// https://webpack.js.org/plugins/split-chunks-plugin/
|
|
||||||
splitChunks: {
|
|
||||||
hidePathInfo: true, // prevents the path from being used in the filename when using maxSize
|
|
||||||
chunks: 'initial',
|
|
||||||
// sizes are compared against source before minification
|
|
||||||
maxSize: 200000, // splits chunks if bigger than 200k, adjust as required (maxSize added in webpack v4.15)
|
|
||||||
cacheGroups: {
|
|
||||||
default: false, // Disable the built-in groups default & vendors (vendors is redefined below)
|
|
||||||
// You can insert additional cacheGroup entries here if you want to split out specific modules
|
|
||||||
// This is required in order to split out vendor css from the app css when using --extractCss
|
|
||||||
// For example to separate font-awesome and bootstrap:
|
|
||||||
// fontawesome: { // separates font-awesome css from the app css (font-awesome is only css/fonts)
|
|
||||||
// name: 'vendor.font-awesome',
|
|
||||||
// test: /[\\/]node_modules[\\/]font-awesome[\\/]/,
|
|
||||||
// priority: 100,
|
|
||||||
// enforce: true
|
|
||||||
// },
|
|
||||||
// bootstrap: { // separates bootstrap js from vendors and also bootstrap css from app css
|
|
||||||
// name: 'vendor.font-awesome',
|
|
||||||
// test: /[\\/]node_modules[\\/]bootstrap[\\/]/,
|
|
||||||
// priority: 90,
|
|
||||||
// enforce: true
|
|
||||||
// },
|
|
||||||
|
|
||||||
// This is the HTTP/1.1 optimised cacheGroup configuration
|
|
||||||
vendors: {
|
|
||||||
// picks up everything from node_modules as long as the sum of node modules is larger than minSize
|
|
||||||
test: /[\\/]node_modules[\\/]/,
|
|
||||||
name: 'vendors',
|
|
||||||
priority: 19,
|
|
||||||
enforce: true, // causes maxInitialRequests to be ignored, minSize still respected if specified in cacheGroup
|
|
||||||
minSize: 30000, // use the default minSize
|
|
||||||
},
|
|
||||||
vendorsAsync: {
|
|
||||||
// vendors async chunk, remaining asynchronously used node modules as single chunk file
|
|
||||||
test: /[\\/]node_modules[\\/]/,
|
|
||||||
name: 'vendors.async',
|
|
||||||
chunks: 'async',
|
|
||||||
priority: 9,
|
|
||||||
reuseExistingChunk: true,
|
|
||||||
minSize: 10000, // use smaller minSize to avoid too much potential bundle bloat due to module duplication.
|
|
||||||
},
|
|
||||||
commonsAsync: {
|
|
||||||
// commons async chunk, remaining asynchronously used modules as single chunk file
|
|
||||||
name: 'commons.async',
|
|
||||||
minChunks: 2, // Minimum number of chunks that must share a module before splitting
|
|
||||||
chunks: 'async',
|
|
||||||
priority: 0,
|
|
||||||
reuseExistingChunk: true,
|
|
||||||
minSize: 10000, // use smaller minSize to avoid too much potential bundle bloat due to module duplication.
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
performance: { hints: false },
|
|
||||||
devServer: {
|
|
||||||
contentBase: outDir,
|
|
||||||
// serve index.html for all 404 (required for push-state)
|
|
||||||
historyApiFallback: true,
|
|
||||||
},
|
|
||||||
devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
|
|
||||||
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
|
|
||||||
{
|
|
||||||
test: /\.css$/i,
|
|
||||||
issuer: [{ not: [{ test: /\.html$/i }] }],
|
|
||||||
use: extractCss
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
loader: MiniCssExtractPlugin.loader,
|
|
||||||
},
|
|
||||||
'css-loader',
|
|
||||||
]
|
|
||||||
: ['style-loader', ...cssRules],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.css$/i,
|
|
||||||
issuer: [{ test: /\.html$/i }],
|
|
||||||
// CSS required in templates cannot be extracted safely
|
|
||||||
// because Aurelia would try to require it again in runtime
|
|
||||||
use: cssRules,
|
|
||||||
},
|
|
||||||
{ test: /\.html$/i, loader: 'html-loader' },
|
|
||||||
{
|
|
||||||
test: /\.js$/i,
|
|
||||||
loader: 'babel-loader',
|
|
||||||
exclude: nodeModulesDir,
|
|
||||||
options: coverage ? { sourceMap: 'inline', plugins: ['istanbul'] } : {},
|
|
||||||
},
|
|
||||||
// embed small images and fonts as Data Urls and larger ones as files:
|
|
||||||
{
|
|
||||||
test: /\.(png|gif|jpg|cur)$/i,
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: { limit: 8192 },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: { limit: 10000, mimetype: 'application/font-woff2' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: { limit: 10000, mimetype: 'application/font-woff' },
|
|
||||||
},
|
|
||||||
// load these fonts normally, as files:
|
|
||||||
{
|
|
||||||
test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
|
|
||||||
loader: 'file-loader',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
...when(!karma, new DuplicatePackageCheckerPlugin()),
|
|
||||||
new AureliaPlugin(),
|
|
||||||
new ProvidePlugin({
|
|
||||||
Promise: ['promise-polyfill', 'default'],
|
|
||||||
}),
|
|
||||||
new ModuleDependenciesPlugin({
|
|
||||||
'aurelia-testing': ['./compile-spy', './view-spy'],
|
|
||||||
}),
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
template: 'index.ejs',
|
|
||||||
metadata: {
|
|
||||||
// available in index.ejs //
|
|
||||||
title,
|
|
||||||
server,
|
|
||||||
baseUrl,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
// ref: https://webpack.js.org/plugins/mini-css-extract-plugin/
|
|
||||||
...when(
|
|
||||||
extractCss,
|
|
||||||
new MiniCssExtractPlugin({
|
|
||||||
// updated to match the naming conventions for the js files
|
|
||||||
filename: production
|
|
||||||
? 'css/[name].[contenthash].bundle.css'
|
|
||||||
: 'css/[name].[hash].bundle.css',
|
|
||||||
chunkFilename: production
|
|
||||||
? 'css/[name].[contenthash].chunk.css'
|
|
||||||
: 'css/[name].[hash].chunk.css',
|
|
||||||
})
|
|
||||||
),
|
|
||||||
...when(
|
|
||||||
production || server,
|
|
||||||
new CopyWebpackPlugin([{ from: 'static', to: outDir, ignore: ['.*'] }])
|
|
||||||
), // ignore dot (hidden) files
|
|
||||||
...when(analyze, new BundleAnalyzerPlugin()),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
5
examples/charge/.gitignore
vendored
5
examples/charge/.gitignore
vendored
@@ -1,5 +0,0 @@
|
|||||||
tmp
|
|
||||||
target
|
|
||||||
node_modules
|
|
||||||
.env
|
|
||||||
.env.build
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
README.md
|
|
||||||
yarn.lock
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
# Charge.js Example
|
|
||||||
|
|
||||||
This directory is a brief example of a [Charge.js](https://charge.js.org/) site that can be deployed with ZEIT Now and zero configuration.
|
|
||||||
|
|
||||||
## Deploy Your Own
|
|
||||||
|
|
||||||
Deploy your own Charge.js project with ZEIT Now.
|
|
||||||
|
|
||||||
[](https://zeit.co/import/project?template=https://github.com/zeit/now/tree/master/examples/charge)
|
|
||||||
|
|
||||||
_Live Example: https://charge.now-examples.now.sh_
|
|
||||||
|
|
||||||
### How We Created This Example
|
|
||||||
|
|
||||||
To get started with Charge.js, you can use [Now CLI](https://zeit.co/download) to initialize the project:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now init charge
|
|
||||||
```
|
|
||||||
|
|
||||||
### Deploying From Your Terminal
|
|
||||||
|
|
||||||
You can deploy your new Charge.js project with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now
|
|
||||||
```
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "charge-example",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"scripts": {
|
|
||||||
"start": "charge serve source",
|
|
||||||
"dev": "charge serve source --port $PORT",
|
|
||||||
"build": "charge build source public"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@static/charge": "^1.5.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import About from './pages/about.html.mdx';
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1>Welcome to my new Charge site!</h1>
|
|
||||||
<About />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export default function Layout({ children }) {
|
|
||||||
return children;
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import Layout from '../layout.html.jsx';
|
|
||||||
|
|
||||||
Everything between the import and export in the source is **just markdown** using [MDX](https://mdxjs.com/)!
|
|
||||||
|
|
||||||
export default ({ children }) => <Layout>{children}</Layout>;
|
|
||||||
4
examples/docz/.gitignore
vendored
4
examples/docz/.gitignore
vendored
@@ -1,4 +0,0 @@
|
|||||||
node_modules
|
|
||||||
.env
|
|
||||||
.env.build
|
|
||||||
.docz
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
README.md
|
|
||||||
yarn.lock
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
# Docz Example
|
|
||||||
|
|
||||||
This directory is a brief example of a [Docz](https://www.docz.site/) site that can be deployed with ZEIT Now and zero configuration.
|
|
||||||
|
|
||||||
## Deploy Your Own
|
|
||||||
|
|
||||||
Deploy your own Docz project with ZEIT Now.
|
|
||||||
|
|
||||||
[](https://zeit.co/import/project?template=https://github.com/zeit/now/tree/master/examples/docz)
|
|
||||||
|
|
||||||
_Live Example: https://docz.now-examples.now.sh_
|
|
||||||
|
|
||||||
### How We Created This Example
|
|
||||||
|
|
||||||
To get started with Docz for deployment with ZEIT Now, you can use the [Now CLI](https://zeit.co/download) to initialize the project:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now init docz
|
|
||||||
```
|
|
||||||
|
|
||||||
> The only change made is to add `dest: '/public'` to the `doczrc.js` file.
|
|
||||||
|
|
||||||
### Deploying From Your Terminal
|
|
||||||
|
|
||||||
You can deploy your new Docz project with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now
|
|
||||||
```
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
export default {
|
|
||||||
dest: '/public',
|
|
||||||
public: '/pub',
|
|
||||||
};
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
---
|
|
||||||
name: Hello world
|
|
||||||
route: /
|
|
||||||
---
|
|
||||||
|
|
||||||
# Hello world!
|
|
||||||
|
|
||||||
I'm a documentation page, using MDX, created using [docz](https://docz.site) and deployed with [ZEIT Now](https://zeit.co/now)!
|
|
||||||
|
|
||||||
You can learn how to deploy a docz project from [the now-examples GitHub repository](https://github.com/zeit/now/tree/master/examples/docz)!
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "my-docz-project",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "docz dev --port=$PORT",
|
|
||||||
"build": "docz build"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"docz": "1.2.0",
|
|
||||||
"docz-theme-default": "1.2.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"presets": [ "@babel/preset-env" ],
|
|
||||||
"compact": false
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"directory": "bower_components"
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
# Browsers that we support
|
|
||||||
last 2 versions
|
|
||||||
ie >= 9
|
|
||||||
ios >= 7
|
|
||||||
android >= 4.4
|
|
||||||
8
examples/foundation/.gitignore
vendored
8
examples/foundation/.gitignore
vendored
@@ -1,8 +0,0 @@
|
|||||||
.DS_Store
|
|
||||||
node_modules
|
|
||||||
npm-debug.log
|
|
||||||
bower_components
|
|
||||||
dist
|
|
||||||
*.swp
|
|
||||||
.cache
|
|
||||||
.idea
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
README.md
|
|
||||||
yarn.lock
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
# Changelog
|
|
||||||
|
|
||||||
## Version 1.0 (November 19, 2015)
|
|
||||||
|
|
||||||
Initial release.
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
# Foundation Example
|
|
||||||
|
|
||||||
This directory is a brief example of a [Foundation](https://foundation.zurb.com/) site that can be deployed with ZEIT Now and zero configuration.
|
|
||||||
|
|
||||||
## Deploy Your Own
|
|
||||||
|
|
||||||
Deploy your own Foundation project with ZEIT Now.
|
|
||||||
|
|
||||||
[](https://zeit.co/import/project?template=https://github.com/zeit/now/tree/master/examples/foundation)
|
|
||||||
|
|
||||||
_Live Example: https://foundation.now-examples.now.sh_
|
|
||||||
|
|
||||||
### How We Created This Example
|
|
||||||
|
|
||||||
To get started with Foundation for deployment with ZEIT Now, you can use the [Foundation CLI](https://foundation.zurb.com/sites/docs/installation.html) to initialize the project:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ npx foundation new my-foundation-site
|
|
||||||
```
|
|
||||||
|
|
||||||
> The only change made is to amend the output directory in `config.yml` to `"public"`.
|
|
||||||
|
|
||||||
### Deploying From Your Terminal
|
|
||||||
|
|
||||||
You can deploy your new Foundation project with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now
|
|
||||||
```
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
# Your project's server will run on localhost:xxxx at this port
|
|
||||||
PORT: 8000
|
|
||||||
|
|
||||||
# UnCSS will use these settings
|
|
||||||
UNCSS_OPTIONS:
|
|
||||||
html:
|
|
||||||
# Search for used CSS classes in generated HTML files
|
|
||||||
- "dist/**/*.html"
|
|
||||||
ignore:
|
|
||||||
- !!js/regexp .foundation-mq
|
|
||||||
- !!js/regexp ^\.is-.*
|
|
||||||
|
|
||||||
# Gulp will reference these paths when it copies files
|
|
||||||
PATHS:
|
|
||||||
# Path to dist folder
|
|
||||||
dist: "public"
|
|
||||||
# Paths to static assets that aren't images, CSS, or JavaScript
|
|
||||||
assets:
|
|
||||||
- "src/assets/**/*"
|
|
||||||
- "!src/assets/{img,js,scss}/**/*"
|
|
||||||
# Paths to Sass libraries, which can then be loaded with @import
|
|
||||||
sass:
|
|
||||||
- "node_modules/foundation-sites/scss"
|
|
||||||
- "node_modules/motion-ui/src"
|
|
||||||
# Paths to JavaScript entry points for webpack to bundle modules
|
|
||||||
entries:
|
|
||||||
- "src/assets/js/app.js"
|
|
||||||
@@ -1,211 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
import plugins from 'gulp-load-plugins';
|
|
||||||
import yargs from 'yargs';
|
|
||||||
import browser from 'browser-sync';
|
|
||||||
import gulp from 'gulp';
|
|
||||||
import panini from 'panini';
|
|
||||||
import rimraf from 'rimraf';
|
|
||||||
import sherpa from 'style-sherpa';
|
|
||||||
import yaml from 'js-yaml';
|
|
||||||
import fs from 'fs';
|
|
||||||
import webpackStream from 'webpack-stream';
|
|
||||||
import webpack2 from 'webpack';
|
|
||||||
import named from 'vinyl-named';
|
|
||||||
import uncss from 'uncss';
|
|
||||||
import autoprefixer from 'autoprefixer';
|
|
||||||
|
|
||||||
// Load all Gulp plugins into one variable
|
|
||||||
const $ = plugins();
|
|
||||||
|
|
||||||
// Check for --production flag
|
|
||||||
const PRODUCTION = !!yargs.argv.production;
|
|
||||||
|
|
||||||
// Load settings from settings.yml
|
|
||||||
const { PORT, UNCSS_OPTIONS, PATHS } = loadConfig();
|
|
||||||
|
|
||||||
function loadConfig() {
|
|
||||||
let ymlFile = fs.readFileSync('config.yml', 'utf8');
|
|
||||||
return yaml.load(ymlFile);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Build the "dist" folder by running all of the below tasks
|
|
||||||
// Sass must be run later so UnCSS can search for used classes in the others assets.
|
|
||||||
gulp.task(
|
|
||||||
'build',
|
|
||||||
gulp.series(
|
|
||||||
clean,
|
|
||||||
gulp.parallel(pages, javascript, images, copy),
|
|
||||||
sass,
|
|
||||||
styleGuide
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Build the site, run the server, and watch for file changes
|
|
||||||
gulp.task('default', gulp.series('build', server, watch));
|
|
||||||
|
|
||||||
// Delete the "dist" folder
|
|
||||||
// This happens every time a build starts
|
|
||||||
function clean(done) {
|
|
||||||
rimraf(PATHS.dist, done);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Copy files out of the assets folder
|
|
||||||
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
|
|
||||||
function copy() {
|
|
||||||
return gulp.src(PATHS.assets).pipe(gulp.dest(PATHS.dist + '/assets'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Copy page templates into finished HTML files
|
|
||||||
function pages() {
|
|
||||||
return gulp
|
|
||||||
.src('src/pages/**/*.{html,hbs,handlebars}')
|
|
||||||
.pipe(
|
|
||||||
panini({
|
|
||||||
root: 'src/pages/',
|
|
||||||
layouts: 'src/layouts/',
|
|
||||||
partials: 'src/partials/',
|
|
||||||
data: 'src/data/',
|
|
||||||
helpers: 'src/helpers/',
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.pipe(gulp.dest(PATHS.dist));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load updated HTML templates and partials into Panini
|
|
||||||
function resetPages(done) {
|
|
||||||
panini.refresh();
|
|
||||||
done();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate a style guide from the Markdown content and HTML template in styleguide/
|
|
||||||
function styleGuide(done) {
|
|
||||||
sherpa(
|
|
||||||
'src/styleguide/index.md',
|
|
||||||
{
|
|
||||||
output: PATHS.dist + '/styleguide.html',
|
|
||||||
template: 'src/styleguide/template.html',
|
|
||||||
},
|
|
||||||
done
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Compile Sass into CSS
|
|
||||||
// In production, the CSS is compressed
|
|
||||||
function sass() {
|
|
||||||
const postCssPlugins = [
|
|
||||||
// Autoprefixer
|
|
||||||
autoprefixer(),
|
|
||||||
|
|
||||||
// UnCSS - Uncomment to remove unused styles in production
|
|
||||||
// PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
|
|
||||||
].filter(Boolean);
|
|
||||||
|
|
||||||
return gulp
|
|
||||||
.src('src/assets/scss/app.scss')
|
|
||||||
.pipe($.sourcemaps.init())
|
|
||||||
.pipe(
|
|
||||||
$.sass({
|
|
||||||
includePaths: PATHS.sass,
|
|
||||||
}).on('error', $.sass.logError)
|
|
||||||
)
|
|
||||||
.pipe($.postcss(postCssPlugins))
|
|
||||||
.pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
|
|
||||||
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
|
|
||||||
.pipe(gulp.dest(PATHS.dist + '/assets/css'))
|
|
||||||
.pipe(browser.reload({ stream: true }));
|
|
||||||
}
|
|
||||||
|
|
||||||
let webpackConfig = {
|
|
||||||
mode: PRODUCTION ? 'production' : 'development',
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
use: {
|
|
||||||
loader: 'babel-loader',
|
|
||||||
options: {
|
|
||||||
presets: ['@babel/preset-env'],
|
|
||||||
compact: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
devtool: !PRODUCTION && 'source-map',
|
|
||||||
};
|
|
||||||
|
|
||||||
// Combine JavaScript into one file
|
|
||||||
// In production, the file is minified
|
|
||||||
function javascript() {
|
|
||||||
return gulp
|
|
||||||
.src(PATHS.entries)
|
|
||||||
.pipe(named())
|
|
||||||
.pipe($.sourcemaps.init())
|
|
||||||
.pipe(webpackStream(webpackConfig, webpack2))
|
|
||||||
.pipe(
|
|
||||||
$.if(
|
|
||||||
PRODUCTION,
|
|
||||||
$.terser().on('error', e => {
|
|
||||||
console.log(e);
|
|
||||||
})
|
|
||||||
)
|
|
||||||
)
|
|
||||||
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
|
|
||||||
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Copy images to the "dist" folder
|
|
||||||
// In production, the images are compressed
|
|
||||||
function images() {
|
|
||||||
return gulp
|
|
||||||
.src('src/assets/img/**/*')
|
|
||||||
.pipe(
|
|
||||||
$.if(PRODUCTION, $.imagemin([$.imagemin.jpegtran({ progressive: true })]))
|
|
||||||
)
|
|
||||||
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start a server with BrowserSync to preview the site in
|
|
||||||
function server(done) {
|
|
||||||
browser.init(
|
|
||||||
{
|
|
||||||
server: PATHS.dist,
|
|
||||||
port: PORT,
|
|
||||||
},
|
|
||||||
done
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reload the browser with BrowserSync
|
|
||||||
function reload(done) {
|
|
||||||
browser.reload();
|
|
||||||
done();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Watch for changes to static assets, pages, Sass, and JavaScript
|
|
||||||
function watch() {
|
|
||||||
gulp.watch(PATHS.assets, copy);
|
|
||||||
gulp
|
|
||||||
.watch('src/pages/**/*.html')
|
|
||||||
.on('all', gulp.series(pages, browser.reload));
|
|
||||||
gulp
|
|
||||||
.watch('src/{layouts,partials}/**/*.html')
|
|
||||||
.on('all', gulp.series(resetPages, pages, browser.reload));
|
|
||||||
gulp
|
|
||||||
.watch('src/data/**/*.{js,json,yml}')
|
|
||||||
.on('all', gulp.series(resetPages, pages, browser.reload));
|
|
||||||
gulp
|
|
||||||
.watch('src/helpers/**/*.js')
|
|
||||||
.on('all', gulp.series(resetPages, pages, browser.reload));
|
|
||||||
gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
|
|
||||||
gulp
|
|
||||||
.watch('src/assets/js/**/*.js')
|
|
||||||
.on('all', gulp.series(javascript, browser.reload));
|
|
||||||
gulp
|
|
||||||
.watch('src/assets/img/**/*')
|
|
||||||
.on('all', gulp.series(images, browser.reload));
|
|
||||||
gulp
|
|
||||||
.watch('src/styleguide/**')
|
|
||||||
.on('all', gulp.series(styleGuide, browser.reload));
|
|
||||||
}
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "foundation-zurb-template",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "Official ZURB Template for Foundation for Sites.",
|
|
||||||
"main": "gulpfile.babel.js",
|
|
||||||
"scripts": {
|
|
||||||
"start": "gulp",
|
|
||||||
"build": "gulp build --production"
|
|
||||||
},
|
|
||||||
"author": "ZURB <foundation@zurb.com>",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"foundation-sites": "^6.5.1",
|
|
||||||
"jquery": "^3.2.1",
|
|
||||||
"motion-ui": "^2.0.3",
|
|
||||||
"what-input": "^5.1.2"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@babel/core": "^7.1.2",
|
|
||||||
"@babel/preset-env": "^7.1.0",
|
|
||||||
"@babel/register": "^7.0.0",
|
|
||||||
"autoprefixer": "^9.1.5",
|
|
||||||
"babel-loader": "^8.0.4",
|
|
||||||
"browser-sync": "^2.10.0",
|
|
||||||
"gulp": "^4.0.0",
|
|
||||||
"gulp-babel": "^8.0.0",
|
|
||||||
"gulp-clean-css": "^3.3.1",
|
|
||||||
"gulp-cli": "^2.0.1",
|
|
||||||
"gulp-concat": "^2.5.2",
|
|
||||||
"gulp-extname": "^0.2.0",
|
|
||||||
"gulp-if": "^2.0.0",
|
|
||||||
"gulp-imagemin": "^4.1.0",
|
|
||||||
"gulp-load-plugins": "^1.1.0",
|
|
||||||
"gulp-postcss": "^8.0.0",
|
|
||||||
"gulp-sass": "^4.0.1",
|
|
||||||
"gulp-sourcemaps": "^2.6.4",
|
|
||||||
"gulp-terser": "^1.2.0",
|
|
||||||
"js-yaml": "^3.4.6",
|
|
||||||
"panini": "^1.3.0",
|
|
||||||
"rimraf": "^2.4.3",
|
|
||||||
"style-sherpa": "^1.0.0",
|
|
||||||
"uncss": "^0.16.2",
|
|
||||||
"vinyl-named": "^1.1.0",
|
|
||||||
"webpack": "^4.20.2",
|
|
||||||
"webpack-stream": "^5.1.1",
|
|
||||||
"yargs": "^12.0.2"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/zurb/foundation-zurb-template.git"
|
|
||||||
},
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/zurb/foundation-sites/issues",
|
|
||||||
"email": "foundation@zurb.com"
|
|
||||||
},
|
|
||||||
"private": true
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import $ from 'jquery';
|
|
||||||
import 'what-input';
|
|
||||||
|
|
||||||
// Foundation JS relies on a global variable. In ES6, all imports are hoisted
|
|
||||||
// to the top of the file so if we used `import` to import Foundation,
|
|
||||||
// it would execute earlier than we have assigned the global variable.
|
|
||||||
// This is why we have to use CommonJS require() here since it doesn't
|
|
||||||
// have the hoisting behavior.
|
|
||||||
window.jQuery = $;
|
|
||||||
require('foundation-sites');
|
|
||||||
|
|
||||||
// If you want to pick and choose which modules to include, comment out the above and uncomment
|
|
||||||
// the line below
|
|
||||||
//import './lib/foundation-explicit-pieces';
|
|
||||||
|
|
||||||
$(document).foundation();
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
import $ from 'jquery';
|
|
||||||
|
|
||||||
import { Foundation } from 'foundation-sites/js/foundation.core';
|
|
||||||
import * as CoreUtils from 'foundation-sites/js/foundation.core.utils';
|
|
||||||
import { Box } from 'foundation-sites/js/foundation.util.box';
|
|
||||||
import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
|
|
||||||
import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
|
|
||||||
import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
|
|
||||||
import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
|
|
||||||
import { Nest } from 'foundation-sites/js/foundation.util.nest';
|
|
||||||
import { Timer } from 'foundation-sites/js/foundation.util.timer';
|
|
||||||
import { Touch } from 'foundation-sites/js/foundation.util.touch';
|
|
||||||
import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
|
|
||||||
import { Abide } from 'foundation-sites/js/foundation.abide';
|
|
||||||
import { Accordion } from 'foundation-sites/js/foundation.accordion';
|
|
||||||
import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
|
|
||||||
import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
|
|
||||||
import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
|
|
||||||
import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
|
|
||||||
import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
|
|
||||||
import { Interchange } from 'foundation-sites/js/foundation.interchange';
|
|
||||||
import { Magellan } from 'foundation-sites/js/foundation.magellan';
|
|
||||||
import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
|
|
||||||
import { Orbit } from 'foundation-sites/js/foundation.orbit';
|
|
||||||
import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
|
|
||||||
import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
|
|
||||||
import { Reveal } from 'foundation-sites/js/foundation.reveal';
|
|
||||||
import { Slider } from 'foundation-sites/js/foundation.slider';
|
|
||||||
import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
|
|
||||||
import { Sticky } from 'foundation-sites/js/foundation.sticky';
|
|
||||||
import { Tabs } from 'foundation-sites/js/foundation.tabs';
|
|
||||||
import { Toggler } from 'foundation-sites/js/foundation.toggler';
|
|
||||||
import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
|
|
||||||
import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';
|
|
||||||
|
|
||||||
Foundation.addToJquery($);
|
|
||||||
|
|
||||||
// Add Foundation Utils to Foundation global namespace for backwards
|
|
||||||
// compatibility.
|
|
||||||
Foundation.rtl = CoreUtils.rtl;
|
|
||||||
Foundation.GetYoDigits = CoreUtils.GetYoDigits;
|
|
||||||
Foundation.transitionend = CoreUtils.transitionend;
|
|
||||||
Foundation.RegExpEscape = CoreUtils.RegExpEscape;
|
|
||||||
Foundation.onLoad = CoreUtils.onLoad;
|
|
||||||
|
|
||||||
Foundation.Box = Box;
|
|
||||||
Foundation.onImagesLoaded = onImagesLoaded;
|
|
||||||
Foundation.Keyboard = Keyboard;
|
|
||||||
Foundation.MediaQuery = MediaQuery;
|
|
||||||
Foundation.Motion = Motion;
|
|
||||||
Foundation.Move = Move;
|
|
||||||
Foundation.Nest = Nest;
|
|
||||||
Foundation.Timer = Timer;
|
|
||||||
|
|
||||||
// Touch and Triggers previously were almost purely sede effect driven,
|
|
||||||
// so no need to add it to Foundation, just init them.
|
|
||||||
Touch.init($);
|
|
||||||
Triggers.init($, Foundation);
|
|
||||||
MediaQuery._init();
|
|
||||||
|
|
||||||
Foundation.plugin(Abide, 'Abide');
|
|
||||||
Foundation.plugin(Accordion, 'Accordion');
|
|
||||||
Foundation.plugin(AccordionMenu, 'AccordionMenu');
|
|
||||||
Foundation.plugin(Drilldown, 'Drilldown');
|
|
||||||
Foundation.plugin(Dropdown, 'Dropdown');
|
|
||||||
Foundation.plugin(DropdownMenu, 'DropdownMenu');
|
|
||||||
Foundation.plugin(Equalizer, 'Equalizer');
|
|
||||||
Foundation.plugin(Interchange, 'Interchange');
|
|
||||||
Foundation.plugin(Magellan, 'Magellan');
|
|
||||||
Foundation.plugin(OffCanvas, 'OffCanvas');
|
|
||||||
Foundation.plugin(Orbit, 'Orbit');
|
|
||||||
Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
|
|
||||||
Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
|
|
||||||
Foundation.plugin(Reveal, 'Reveal');
|
|
||||||
Foundation.plugin(Slider, 'Slider');
|
|
||||||
Foundation.plugin(SmoothScroll, 'SmoothScroll');
|
|
||||||
Foundation.plugin(Sticky, 'Sticky');
|
|
||||||
Foundation.plugin(Tabs, 'Tabs');
|
|
||||||
Foundation.plugin(Toggler, 'Toggler');
|
|
||||||
Foundation.plugin(Tooltip, 'Tooltip');
|
|
||||||
Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
|
|
||||||
|
|
||||||
export { Foundation };
|
|
||||||
@@ -1,869 +0,0 @@
|
|||||||
// Foundation for Sites Settings
|
|
||||||
// -----------------------------
|
|
||||||
//
|
|
||||||
// Table of Contents:
|
|
||||||
//
|
|
||||||
// 1. Global
|
|
||||||
// 2. Breakpoints
|
|
||||||
// 3. The Grid
|
|
||||||
// 4. Base Typography
|
|
||||||
// 5. Typography Helpers
|
|
||||||
// 6. Abide
|
|
||||||
// 7. Accordion
|
|
||||||
// 8. Accordion Menu
|
|
||||||
// 9. Badge
|
|
||||||
// 10. Breadcrumbs
|
|
||||||
// 11. Button
|
|
||||||
// 12. Button Group
|
|
||||||
// 13. Callout
|
|
||||||
// 14. Card
|
|
||||||
// 15. Close Button
|
|
||||||
// 16. Drilldown
|
|
||||||
// 17. Dropdown
|
|
||||||
// 18. Dropdown Menu
|
|
||||||
// 19. Flexbox Utilities
|
|
||||||
// 20. Forms
|
|
||||||
// 21. Label
|
|
||||||
// 22. Media Object
|
|
||||||
// 23. Menu
|
|
||||||
// 24. Meter
|
|
||||||
// 25. Off-canvas
|
|
||||||
// 26. Orbit
|
|
||||||
// 27. Pagination
|
|
||||||
// 28. Progress Bar
|
|
||||||
// 29. Prototype Arrow
|
|
||||||
// 30. Prototype Border-Box
|
|
||||||
// 31. Prototype Border-None
|
|
||||||
// 32. Prototype Bordered
|
|
||||||
// 33. Prototype Display
|
|
||||||
// 34. Prototype Font-Styling
|
|
||||||
// 35. Prototype List-Style-Type
|
|
||||||
// 36. Prototype Overflow
|
|
||||||
// 37. Prototype Position
|
|
||||||
// 38. Prototype Rounded
|
|
||||||
// 39. Prototype Separator
|
|
||||||
// 40. Prototype Shadow
|
|
||||||
// 41. Prototype Sizing
|
|
||||||
// 42. Prototype Spacing
|
|
||||||
// 43. Prototype Text-Decoration
|
|
||||||
// 44. Prototype Text-Transformation
|
|
||||||
// 45. Prototype Text-Utilities
|
|
||||||
// 46. Responsive Embed
|
|
||||||
// 47. Reveal
|
|
||||||
// 48. Slider
|
|
||||||
// 49. Switch
|
|
||||||
// 50. Table
|
|
||||||
// 51. Tabs
|
|
||||||
// 52. Thumbnail
|
|
||||||
// 53. Title Bar
|
|
||||||
// 54. Tooltip
|
|
||||||
// 55. Top Bar
|
|
||||||
// 56. Xy Grid
|
|
||||||
|
|
||||||
@import 'util/util';
|
|
||||||
|
|
||||||
// 1. Global
|
|
||||||
// ---------
|
|
||||||
|
|
||||||
$global-font-size: 100%;
|
|
||||||
$global-width: rem-calc(1200);
|
|
||||||
$global-lineheight: 1.5;
|
|
||||||
$foundation-palette: (
|
|
||||||
primary: #1779ba,
|
|
||||||
secondary: #767676,
|
|
||||||
success: #3adb76,
|
|
||||||
warning: #ffae00,
|
|
||||||
alert: #cc4b37,
|
|
||||||
);
|
|
||||||
$light-gray: #e6e6e6;
|
|
||||||
$medium-gray: #cacaca;
|
|
||||||
$dark-gray: #8a8a8a;
|
|
||||||
$black: #0a0a0a;
|
|
||||||
$white: #fefefe;
|
|
||||||
$body-background: $white;
|
|
||||||
$body-font-color: $black;
|
|
||||||
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
|
|
||||||
$body-antialiased: true;
|
|
||||||
$global-margin: 1rem;
|
|
||||||
$global-padding: 1rem;
|
|
||||||
$global-position: 1rem;
|
|
||||||
$global-weight-normal: normal;
|
|
||||||
$global-weight-bold: bold;
|
|
||||||
$global-radius: 0;
|
|
||||||
$global-menu-padding: 0.7rem 1rem;
|
|
||||||
$global-menu-nested-margin: 1rem;
|
|
||||||
$global-text-direction: ltr;
|
|
||||||
$global-flexbox: true;
|
|
||||||
$global-prototype-breakpoints: false;
|
|
||||||
$global-button-cursor: auto;
|
|
||||||
$global-color-pick-contrast-tolerance: 0;
|
|
||||||
$print-transparent-backgrounds: true;
|
|
||||||
|
|
||||||
@include add-foundation-colors;
|
|
||||||
$print-hrefs: true;
|
|
||||||
|
|
||||||
// 2. Breakpoints
|
|
||||||
// --------------
|
|
||||||
|
|
||||||
$breakpoints: (
|
|
||||||
small: 0,
|
|
||||||
medium: 640px,
|
|
||||||
large: 1024px,
|
|
||||||
xlarge: 1200px,
|
|
||||||
xxlarge: 1440px,
|
|
||||||
);
|
|
||||||
$print-breakpoint: large;
|
|
||||||
$breakpoint-classes: (small medium large);
|
|
||||||
|
|
||||||
// 3. The Grid
|
|
||||||
// -----------
|
|
||||||
|
|
||||||
$grid-row-width: $global-width;
|
|
||||||
$grid-column-count: 12;
|
|
||||||
$grid-column-gutter: (
|
|
||||||
small: 20px,
|
|
||||||
medium: 30px,
|
|
||||||
);
|
|
||||||
$grid-column-align-edge: true;
|
|
||||||
$grid-column-alias: 'columns';
|
|
||||||
$block-grid-max: 8;
|
|
||||||
|
|
||||||
// 4. Base Typography
|
|
||||||
// ------------------
|
|
||||||
|
|
||||||
$header-font-family: $body-font-family;
|
|
||||||
$header-font-weight: $global-weight-normal;
|
|
||||||
$header-font-style: normal;
|
|
||||||
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
|
|
||||||
$header-color: inherit;
|
|
||||||
$header-lineheight: 1.4;
|
|
||||||
$header-margin-bottom: 0.5rem;
|
|
||||||
$header-styles: (
|
|
||||||
small: (
|
|
||||||
'h1': ('font-size': 24),
|
|
||||||
'h2': ('font-size': 20),
|
|
||||||
'h3': ('font-size': 19),
|
|
||||||
'h4': ('font-size': 18),
|
|
||||||
'h5': ('font-size': 17),
|
|
||||||
'h6': ('font-size': 16),
|
|
||||||
),
|
|
||||||
medium: (
|
|
||||||
'h1': ('font-size': 48),
|
|
||||||
'h2': ('font-size': 40),
|
|
||||||
'h3': ('font-size': 31),
|
|
||||||
'h4': ('font-size': 25),
|
|
||||||
'h5': ('font-size': 20),
|
|
||||||
'h6': ('font-size': 16),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
$header-text-rendering: optimizeLegibility;
|
|
||||||
$small-font-size: 80%;
|
|
||||||
$header-small-font-color: $medium-gray;
|
|
||||||
$paragraph-lineheight: 1.6;
|
|
||||||
$paragraph-margin-bottom: 1rem;
|
|
||||||
$paragraph-text-rendering: optimizeLegibility;
|
|
||||||
$code-color: $black;
|
|
||||||
$code-font-family: $font-family-monospace;
|
|
||||||
$code-font-weight: $global-weight-normal;
|
|
||||||
$code-background: $light-gray;
|
|
||||||
$code-border: 1px solid $medium-gray;
|
|
||||||
$code-padding: rem-calc(2 5 1);
|
|
||||||
$anchor-color: $primary-color;
|
|
||||||
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
|
|
||||||
$anchor-text-decoration: none;
|
|
||||||
$anchor-text-decoration-hover: none;
|
|
||||||
$hr-width: $global-width;
|
|
||||||
$hr-border: 1px solid $medium-gray;
|
|
||||||
$hr-margin: rem-calc(20) auto;
|
|
||||||
$list-lineheight: $paragraph-lineheight;
|
|
||||||
$list-margin-bottom: $paragraph-margin-bottom;
|
|
||||||
$list-style-type: disc;
|
|
||||||
$list-style-position: outside;
|
|
||||||
$list-side-margin: 1.25rem;
|
|
||||||
$list-nested-side-margin: 1.25rem;
|
|
||||||
$defnlist-margin-bottom: 1rem;
|
|
||||||
$defnlist-term-weight: $global-weight-bold;
|
|
||||||
$defnlist-term-margin-bottom: 0.3rem;
|
|
||||||
$blockquote-color: $dark-gray;
|
|
||||||
$blockquote-padding: rem-calc(9 20 0 19);
|
|
||||||
$blockquote-border: 1px solid $medium-gray;
|
|
||||||
$cite-font-size: rem-calc(13);
|
|
||||||
$cite-color: $dark-gray;
|
|
||||||
$cite-pseudo-content: '\2014 \0020';
|
|
||||||
$keystroke-font: $font-family-monospace;
|
|
||||||
$keystroke-color: $black;
|
|
||||||
$keystroke-background: $light-gray;
|
|
||||||
$keystroke-padding: rem-calc(2 4 0);
|
|
||||||
$keystroke-radius: $global-radius;
|
|
||||||
$abbr-underline: 1px dotted $black;
|
|
||||||
|
|
||||||
// 5. Typography Helpers
|
|
||||||
// ---------------------
|
|
||||||
|
|
||||||
$lead-font-size: $global-font-size * 1.25;
|
|
||||||
$lead-lineheight: 1.6;
|
|
||||||
$subheader-lineheight: 1.4;
|
|
||||||
$subheader-color: $dark-gray;
|
|
||||||
$subheader-font-weight: $global-weight-normal;
|
|
||||||
$subheader-margin-top: 0.2rem;
|
|
||||||
$subheader-margin-bottom: 0.5rem;
|
|
||||||
$stat-font-size: 2.5rem;
|
|
||||||
|
|
||||||
// 6. Abide
|
|
||||||
// --------
|
|
||||||
|
|
||||||
$abide-inputs: true;
|
|
||||||
$abide-labels: true;
|
|
||||||
$input-background-invalid: get-color(alert);
|
|
||||||
$form-label-color-invalid: get-color(alert);
|
|
||||||
$input-error-color: get-color(alert);
|
|
||||||
$input-error-font-size: rem-calc(12);
|
|
||||||
$input-error-font-weight: $global-weight-bold;
|
|
||||||
|
|
||||||
// 7. Accordion
|
|
||||||
// ------------
|
|
||||||
|
|
||||||
$accordion-background: $white;
|
|
||||||
$accordion-plusminus: true;
|
|
||||||
$accordion-title-font-size: rem-calc(12);
|
|
||||||
$accordion-item-color: $primary-color;
|
|
||||||
$accordion-item-background-hover: $light-gray;
|
|
||||||
$accordion-item-padding: 1.25rem 1rem;
|
|
||||||
$accordion-content-background: $white;
|
|
||||||
$accordion-content-border: 1px solid $light-gray;
|
|
||||||
$accordion-content-color: $body-font-color;
|
|
||||||
$accordion-content-padding: 1rem;
|
|
||||||
|
|
||||||
// 8. Accordion Menu
|
|
||||||
// -----------------
|
|
||||||
|
|
||||||
$accordionmenu-padding: $global-menu-padding;
|
|
||||||
$accordionmenu-nested-margin: $global-menu-nested-margin;
|
|
||||||
$accordionmenu-submenu-padding: $accordionmenu-padding;
|
|
||||||
$accordionmenu-arrows: true;
|
|
||||||
$accordionmenu-arrow-color: $primary-color;
|
|
||||||
$accordionmenu-item-background: null;
|
|
||||||
$accordionmenu-border: null;
|
|
||||||
$accordionmenu-submenu-toggle-background: null;
|
|
||||||
$accordion-submenu-toggle-border: $accordionmenu-border;
|
|
||||||
$accordionmenu-submenu-toggle-width: 40px;
|
|
||||||
$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
|
|
||||||
$accordionmenu-arrow-size: 6px;
|
|
||||||
|
|
||||||
// 9. Badge
|
|
||||||
// --------
|
|
||||||
|
|
||||||
$badge-background: $primary-color;
|
|
||||||
$badge-color: $white;
|
|
||||||
$badge-color-alt: $black;
|
|
||||||
$badge-palette: $foundation-palette;
|
|
||||||
$badge-padding: 0.3em;
|
|
||||||
$badge-minwidth: 2.1em;
|
|
||||||
$badge-font-size: 0.6rem;
|
|
||||||
|
|
||||||
// 10. Breadcrumbs
|
|
||||||
// ---------------
|
|
||||||
|
|
||||||
$breadcrumbs-margin: 0 0 $global-margin 0;
|
|
||||||
$breadcrumbs-item-font-size: rem-calc(11);
|
|
||||||
$breadcrumbs-item-color: $primary-color;
|
|
||||||
$breadcrumbs-item-color-current: $black;
|
|
||||||
$breadcrumbs-item-color-disabled: $medium-gray;
|
|
||||||
$breadcrumbs-item-margin: 0.75rem;
|
|
||||||
$breadcrumbs-item-uppercase: true;
|
|
||||||
$breadcrumbs-item-separator: true;
|
|
||||||
$breadcrumbs-item-separator-item: '/';
|
|
||||||
$breadcrumbs-item-separator-item-rtl: '\\';
|
|
||||||
$breadcrumbs-item-separator-color: $medium-gray;
|
|
||||||
|
|
||||||
// 11. Button
|
|
||||||
// ----------
|
|
||||||
|
|
||||||
$button-font-family: inherit;
|
|
||||||
$button-padding: 0.85em 1em;
|
|
||||||
$button-margin: 0 0 $global-margin 0;
|
|
||||||
$button-fill: solid;
|
|
||||||
$button-background: $primary-color;
|
|
||||||
$button-background-hover: scale-color($button-background, $lightness: -15%);
|
|
||||||
$button-color: $white;
|
|
||||||
$button-color-alt: $black;
|
|
||||||
$button-radius: $global-radius;
|
|
||||||
$button-hollow-border-width: 1px;
|
|
||||||
$button-sizes: (
|
|
||||||
tiny: 0.6rem,
|
|
||||||
small: 0.75rem,
|
|
||||||
default: 0.9rem,
|
|
||||||
large: 1.25rem,
|
|
||||||
);
|
|
||||||
$button-palette: $foundation-palette;
|
|
||||||
$button-opacity-disabled: 0.25;
|
|
||||||
$button-background-hover-lightness: -20%;
|
|
||||||
$button-hollow-hover-lightness: -50%;
|
|
||||||
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
|
|
||||||
$button-responsive-expanded: false;
|
|
||||||
|
|
||||||
// 12. Button Group
|
|
||||||
// ----------------
|
|
||||||
|
|
||||||
$buttongroup-margin: 1rem;
|
|
||||||
$buttongroup-spacing: 1px;
|
|
||||||
$buttongroup-child-selector: '.button';
|
|
||||||
$buttongroup-expand-max: 6;
|
|
||||||
$buttongroup-radius-on-each: true;
|
|
||||||
|
|
||||||
// 13. Callout
|
|
||||||
// -----------
|
|
||||||
|
|
||||||
$callout-background: $white;
|
|
||||||
$callout-background-fade: 85%;
|
|
||||||
$callout-border: 1px solid rgba($black, 0.25);
|
|
||||||
$callout-margin: 0 0 1rem 0;
|
|
||||||
$callout-padding: 1rem;
|
|
||||||
$callout-font-color: $body-font-color;
|
|
||||||
$callout-font-color-alt: $body-background;
|
|
||||||
$callout-radius: $global-radius;
|
|
||||||
$callout-link-tint: 30%;
|
|
||||||
|
|
||||||
// 14. Card
|
|
||||||
// --------
|
|
||||||
|
|
||||||
$card-background: $white;
|
|
||||||
$card-font-color: $body-font-color;
|
|
||||||
$card-divider-background: $light-gray;
|
|
||||||
$card-border: 1px solid $light-gray;
|
|
||||||
$card-shadow: none;
|
|
||||||
$card-border-radius: $global-radius;
|
|
||||||
$card-padding: $global-padding;
|
|
||||||
$card-margin-bottom: $global-margin;
|
|
||||||
|
|
||||||
// 15. Close Button
|
|
||||||
// ----------------
|
|
||||||
|
|
||||||
$closebutton-position: right top;
|
|
||||||
$closebutton-offset-horizontal: (
|
|
||||||
small: 0.66rem,
|
|
||||||
medium: 1rem,
|
|
||||||
);
|
|
||||||
$closebutton-offset-vertical: (
|
|
||||||
small: 0.33em,
|
|
||||||
medium: 0.5rem,
|
|
||||||
);
|
|
||||||
$closebutton-size: (
|
|
||||||
small: 1.5em,
|
|
||||||
medium: 2em,
|
|
||||||
);
|
|
||||||
$closebutton-lineheight: 1;
|
|
||||||
$closebutton-color: $dark-gray;
|
|
||||||
$closebutton-color-hover: $black;
|
|
||||||
|
|
||||||
// 16. Drilldown
|
|
||||||
// -------------
|
|
||||||
|
|
||||||
$drilldown-transition: transform 0.15s linear;
|
|
||||||
$drilldown-arrows: true;
|
|
||||||
$drilldown-padding: $global-menu-padding;
|
|
||||||
$drilldown-nested-margin: 0;
|
|
||||||
$drilldown-background: $white;
|
|
||||||
$drilldown-submenu-padding: $drilldown-padding;
|
|
||||||
$drilldown-submenu-background: $white;
|
|
||||||
$drilldown-arrow-color: $primary-color;
|
|
||||||
$drilldown-arrow-size: 6px;
|
|
||||||
|
|
||||||
// 17. Dropdown
|
|
||||||
// ------------
|
|
||||||
|
|
||||||
$dropdown-padding: 1rem;
|
|
||||||
$dropdown-background: $body-background;
|
|
||||||
$dropdown-border: 1px solid $medium-gray;
|
|
||||||
$dropdown-font-size: 1rem;
|
|
||||||
$dropdown-width: 300px;
|
|
||||||
$dropdown-radius: $global-radius;
|
|
||||||
$dropdown-sizes: (
|
|
||||||
tiny: 100px,
|
|
||||||
small: 200px,
|
|
||||||
large: 400px,
|
|
||||||
);
|
|
||||||
|
|
||||||
// 18. Dropdown Menu
|
|
||||||
// -----------------
|
|
||||||
|
|
||||||
$dropdownmenu-arrows: true;
|
|
||||||
$dropdownmenu-arrow-color: $anchor-color;
|
|
||||||
$dropdownmenu-arrow-size: 6px;
|
|
||||||
$dropdownmenu-arrow-padding: 1.5rem;
|
|
||||||
$dropdownmenu-min-width: 200px;
|
|
||||||
$dropdownmenu-background: null;
|
|
||||||
$dropdownmenu-submenu-background: $white;
|
|
||||||
$dropdownmenu-padding: $global-menu-padding;
|
|
||||||
$dropdownmenu-nested-margin: 0;
|
|
||||||
$dropdownmenu-submenu-padding: $dropdownmenu-padding;
|
|
||||||
$dropdownmenu-border: 1px solid $medium-gray;
|
|
||||||
$dropdown-menu-item-color-active: get-color(primary);
|
|
||||||
$dropdown-menu-item-background-active: transparent;
|
|
||||||
|
|
||||||
// 19. Flexbox Utilities
|
|
||||||
// ---------------------
|
|
||||||
|
|
||||||
$flex-source-ordering-count: 6;
|
|
||||||
$flexbox-responsive-breakpoints: true;
|
|
||||||
|
|
||||||
// 20. Forms
|
|
||||||
// ---------
|
|
||||||
|
|
||||||
$fieldset-border: 1px solid $medium-gray;
|
|
||||||
$fieldset-padding: rem-calc(20);
|
|
||||||
$fieldset-margin: rem-calc(18 0);
|
|
||||||
$legend-padding: rem-calc(0 3);
|
|
||||||
$form-spacing: rem-calc(16);
|
|
||||||
$helptext-color: $black;
|
|
||||||
$helptext-font-size: rem-calc(13);
|
|
||||||
$helptext-font-style: italic;
|
|
||||||
$input-prefix-color: $black;
|
|
||||||
$input-prefix-background: $light-gray;
|
|
||||||
$input-prefix-border: 1px solid $medium-gray;
|
|
||||||
$input-prefix-padding: 1rem;
|
|
||||||
$form-label-color: $black;
|
|
||||||
$form-label-font-size: rem-calc(14);
|
|
||||||
$form-label-font-weight: $global-weight-normal;
|
|
||||||
$form-label-line-height: 1.8;
|
|
||||||
$select-background: $white;
|
|
||||||
$select-triangle-color: $dark-gray;
|
|
||||||
$select-radius: $global-radius;
|
|
||||||
$input-color: $black;
|
|
||||||
$input-placeholder-color: $medium-gray;
|
|
||||||
$input-font-family: inherit;
|
|
||||||
$input-font-size: rem-calc(16);
|
|
||||||
$input-font-weight: $global-weight-normal;
|
|
||||||
$input-line-height: $global-lineheight;
|
|
||||||
$input-background: $white;
|
|
||||||
$input-background-focus: $white;
|
|
||||||
$input-background-disabled: $light-gray;
|
|
||||||
$input-border: 1px solid $medium-gray;
|
|
||||||
$input-border-focus: 1px solid $dark-gray;
|
|
||||||
$input-padding: $form-spacing / 2;
|
|
||||||
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
|
|
||||||
$input-shadow-focus: 0 0 5px $medium-gray;
|
|
||||||
$input-cursor-disabled: not-allowed;
|
|
||||||
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
|
|
||||||
$input-number-spinners: true;
|
|
||||||
$input-radius: $global-radius;
|
|
||||||
$form-button-radius: $global-radius;
|
|
||||||
|
|
||||||
// 21. Label
|
|
||||||
// ---------
|
|
||||||
|
|
||||||
$label-background: $primary-color;
|
|
||||||
$label-color: $white;
|
|
||||||
$label-color-alt: $black;
|
|
||||||
$label-palette: $foundation-palette;
|
|
||||||
$label-font-size: 0.8rem;
|
|
||||||
$label-padding: 0.33333rem 0.5rem;
|
|
||||||
$label-radius: $global-radius;
|
|
||||||
|
|
||||||
// 22. Media Object
|
|
||||||
// ----------------
|
|
||||||
|
|
||||||
$mediaobject-margin-bottom: $global-margin;
|
|
||||||
$mediaobject-section-padding: $global-padding;
|
|
||||||
$mediaobject-image-width-stacked: 100%;
|
|
||||||
|
|
||||||
// 23. Menu
|
|
||||||
// --------
|
|
||||||
|
|
||||||
$menu-margin: 0;
|
|
||||||
$menu-nested-margin: $global-menu-nested-margin;
|
|
||||||
$menu-items-padding: $global-menu-padding;
|
|
||||||
$menu-simple-margin: 1rem;
|
|
||||||
$menu-item-color-active: $white;
|
|
||||||
$menu-item-background-active: get-color(primary);
|
|
||||||
$menu-icon-spacing: 0.25rem;
|
|
||||||
$menu-state-back-compat: true;
|
|
||||||
$menu-centered-back-compat: true;
|
|
||||||
$menu-icons-back-compat: true;
|
|
||||||
|
|
||||||
// 24. Meter
|
|
||||||
// ---------
|
|
||||||
|
|
||||||
$meter-height: 1rem;
|
|
||||||
$meter-radius: $global-radius;
|
|
||||||
$meter-background: $medium-gray;
|
|
||||||
$meter-fill-good: $success-color;
|
|
||||||
$meter-fill-medium: $warning-color;
|
|
||||||
$meter-fill-bad: $alert-color;
|
|
||||||
|
|
||||||
// 25. Off-canvas
|
|
||||||
// --------------
|
|
||||||
|
|
||||||
$offcanvas-sizes: (
|
|
||||||
small: 250px,
|
|
||||||
);
|
|
||||||
$offcanvas-vertical-sizes: (
|
|
||||||
small: 250px,
|
|
||||||
);
|
|
||||||
$offcanvas-background: $light-gray;
|
|
||||||
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
|
|
||||||
$offcanvas-inner-shadow-size: 20px;
|
|
||||||
$offcanvas-inner-shadow-color: rgba($black, 0.25);
|
|
||||||
$offcanvas-overlay-zindex: 11;
|
|
||||||
$offcanvas-push-zindex: 12;
|
|
||||||
$offcanvas-overlap-zindex: 13;
|
|
||||||
$offcanvas-reveal-zindex: 12;
|
|
||||||
$offcanvas-transition-length: 0.5s;
|
|
||||||
$offcanvas-transition-timing: ease;
|
|
||||||
$offcanvas-fixed-reveal: true;
|
|
||||||
$offcanvas-exit-background: rgba($white, 0.25);
|
|
||||||
$maincontent-class: 'off-canvas-content';
|
|
||||||
|
|
||||||
// 26. Orbit
|
|
||||||
// ---------
|
|
||||||
|
|
||||||
$orbit-bullet-background: $medium-gray;
|
|
||||||
$orbit-bullet-background-active: $dark-gray;
|
|
||||||
$orbit-bullet-diameter: 1.2rem;
|
|
||||||
$orbit-bullet-margin: 0.1rem;
|
|
||||||
$orbit-bullet-margin-top: 0.8rem;
|
|
||||||
$orbit-bullet-margin-bottom: 0.8rem;
|
|
||||||
$orbit-caption-background: rgba($black, 0.5);
|
|
||||||
$orbit-caption-padding: 1rem;
|
|
||||||
$orbit-control-background-hover: rgba($black, 0.5);
|
|
||||||
$orbit-control-padding: 1rem;
|
|
||||||
$orbit-control-zindex: 10;
|
|
||||||
|
|
||||||
// 27. Pagination
|
|
||||||
// --------------
|
|
||||||
|
|
||||||
$pagination-font-size: rem-calc(14);
|
|
||||||
$pagination-margin-bottom: $global-margin;
|
|
||||||
$pagination-item-color: $black;
|
|
||||||
$pagination-item-padding: rem-calc(3 10);
|
|
||||||
$pagination-item-spacing: rem-calc(1);
|
|
||||||
$pagination-radius: $global-radius;
|
|
||||||
$pagination-item-background-hover: $light-gray;
|
|
||||||
$pagination-item-background-current: $primary-color;
|
|
||||||
$pagination-item-color-current: $white;
|
|
||||||
$pagination-item-color-disabled: $medium-gray;
|
|
||||||
$pagination-ellipsis-color: $black;
|
|
||||||
$pagination-mobile-items: false;
|
|
||||||
$pagination-mobile-current-item: false;
|
|
||||||
$pagination-arrows: true;
|
|
||||||
|
|
||||||
// 28. Progress Bar
|
|
||||||
// ----------------
|
|
||||||
|
|
||||||
$progress-height: 1rem;
|
|
||||||
$progress-background: $medium-gray;
|
|
||||||
$progress-margin-bottom: $global-margin;
|
|
||||||
$progress-meter-background: $primary-color;
|
|
||||||
$progress-radius: $global-radius;
|
|
||||||
|
|
||||||
// 29. Prototype Arrow
|
|
||||||
// -------------------
|
|
||||||
|
|
||||||
$prototype-arrow-directions: (
|
|
||||||
down,
|
|
||||||
up,
|
|
||||||
right,
|
|
||||||
left
|
|
||||||
);
|
|
||||||
$prototype-arrow-size: 0.4375rem;
|
|
||||||
$prototype-arrow-color: $black;
|
|
||||||
|
|
||||||
// 30. Prototype Border-Box
|
|
||||||
// ------------------------
|
|
||||||
|
|
||||||
$prototype-border-box-breakpoints: $global-prototype-breakpoints;
|
|
||||||
|
|
||||||
// 31. Prototype Border-None
|
|
||||||
// -------------------------
|
|
||||||
|
|
||||||
$prototype-border-none-breakpoints: $global-prototype-breakpoints;
|
|
||||||
|
|
||||||
// 32. Prototype Bordered
|
|
||||||
// ----------------------
|
|
||||||
|
|
||||||
$prototype-bordered-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-border-width: rem-calc(1);
|
|
||||||
$prototype-border-type: solid;
|
|
||||||
$prototype-border-color: $medium-gray;
|
|
||||||
|
|
||||||
// 33. Prototype Display
|
|
||||||
// ---------------------
|
|
||||||
|
|
||||||
$prototype-display-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-display: (
|
|
||||||
inline,
|
|
||||||
inline-block,
|
|
||||||
block,
|
|
||||||
table,
|
|
||||||
table-cell
|
|
||||||
);
|
|
||||||
|
|
||||||
// 34. Prototype Font-Styling
|
|
||||||
// --------------------------
|
|
||||||
|
|
||||||
$prototype-font-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-wide-letter-spacing: rem-calc(4);
|
|
||||||
$prototype-font-normal: $global-weight-normal;
|
|
||||||
$prototype-font-bold: $global-weight-bold;
|
|
||||||
|
|
||||||
// 35. Prototype List-Style-Type
|
|
||||||
// -----------------------------
|
|
||||||
|
|
||||||
$prototype-list-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-style-type-unordered: (
|
|
||||||
disc,
|
|
||||||
circle,
|
|
||||||
square
|
|
||||||
);
|
|
||||||
$prototype-style-type-ordered: (
|
|
||||||
decimal,
|
|
||||||
lower-alpha,
|
|
||||||
lower-latin,
|
|
||||||
lower-roman,
|
|
||||||
upper-alpha,
|
|
||||||
upper-latin,
|
|
||||||
upper-roman
|
|
||||||
);
|
|
||||||
|
|
||||||
// 36. Prototype Overflow
|
|
||||||
// ----------------------
|
|
||||||
|
|
||||||
$prototype-overflow-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-overflow: (
|
|
||||||
visible,
|
|
||||||
hidden,
|
|
||||||
scroll
|
|
||||||
);
|
|
||||||
|
|
||||||
// 37. Prototype Position
|
|
||||||
// ----------------------
|
|
||||||
|
|
||||||
$prototype-position-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-position: (
|
|
||||||
static,
|
|
||||||
relative,
|
|
||||||
absolute,
|
|
||||||
fixed
|
|
||||||
);
|
|
||||||
$prototype-position-z-index: 975;
|
|
||||||
|
|
||||||
// 38. Prototype Rounded
|
|
||||||
// ---------------------
|
|
||||||
|
|
||||||
$prototype-rounded-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-border-radius: rem-calc(3);
|
|
||||||
|
|
||||||
// 39. Prototype Separator
|
|
||||||
// -----------------------
|
|
||||||
|
|
||||||
$prototype-separator-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-separator-align: center;
|
|
||||||
$prototype-separator-height: rem-calc(2);
|
|
||||||
$prototype-separator-width: 3rem;
|
|
||||||
$prototype-separator-background: $primary-color;
|
|
||||||
$prototype-separator-margin-top: $global-margin;
|
|
||||||
|
|
||||||
// 40. Prototype Shadow
|
|
||||||
// --------------------
|
|
||||||
|
|
||||||
$prototype-shadow-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
|
|
||||||
0 2px 10px 0 rgba(0,0,0,.12);
|
|
||||||
|
|
||||||
// 41. Prototype Sizing
|
|
||||||
// --------------------
|
|
||||||
|
|
||||||
$prototype-sizing-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-sizing: (
|
|
||||||
width,
|
|
||||||
height
|
|
||||||
);
|
|
||||||
$prototype-sizes: (
|
|
||||||
25: 25%,
|
|
||||||
50: 50%,
|
|
||||||
75: 75%,
|
|
||||||
100: 100%
|
|
||||||
);
|
|
||||||
|
|
||||||
// 42. Prototype Spacing
|
|
||||||
// ---------------------
|
|
||||||
|
|
||||||
$prototype-spacing-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-spacers-count: 3;
|
|
||||||
|
|
||||||
// 43. Prototype Text-Decoration
|
|
||||||
// -----------------------------
|
|
||||||
|
|
||||||
$prototype-decoration-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-text-decoration: (
|
|
||||||
overline,
|
|
||||||
underline,
|
|
||||||
line-through,
|
|
||||||
);
|
|
||||||
|
|
||||||
// 44. Prototype Text-Transformation
|
|
||||||
// ---------------------------------
|
|
||||||
|
|
||||||
$prototype-transformation-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-text-transformation: (
|
|
||||||
lowercase,
|
|
||||||
uppercase,
|
|
||||||
capitalize
|
|
||||||
);
|
|
||||||
|
|
||||||
// 45. Prototype Text-Utilities
|
|
||||||
// ----------------------------
|
|
||||||
|
|
||||||
$prototype-utilities-breakpoints: $global-prototype-breakpoints;
|
|
||||||
$prototype-text-overflow: ellipsis;
|
|
||||||
|
|
||||||
// 46. Responsive Embed
|
|
||||||
// --------------------
|
|
||||||
|
|
||||||
$responsive-embed-margin-bottom: rem-calc(16);
|
|
||||||
$responsive-embed-ratios: (
|
|
||||||
default: 4 by 3,
|
|
||||||
widescreen: 16 by 9,
|
|
||||||
);
|
|
||||||
|
|
||||||
// 47. Reveal
|
|
||||||
// ----------
|
|
||||||
|
|
||||||
$reveal-background: $white;
|
|
||||||
$reveal-width: 600px;
|
|
||||||
$reveal-max-width: $global-width;
|
|
||||||
$reveal-padding: $global-padding;
|
|
||||||
$reveal-border: 1px solid $medium-gray;
|
|
||||||
$reveal-radius: $global-radius;
|
|
||||||
$reveal-zindex: 1005;
|
|
||||||
$reveal-overlay-background: rgba($black, 0.45);
|
|
||||||
|
|
||||||
// 48. Slider
|
|
||||||
// ----------
|
|
||||||
|
|
||||||
$slider-width-vertical: 0.5rem;
|
|
||||||
$slider-transition: all 0.2s ease-in-out;
|
|
||||||
$slider-height: 0.5rem;
|
|
||||||
$slider-background: $light-gray;
|
|
||||||
$slider-fill-background: $medium-gray;
|
|
||||||
$slider-handle-height: 1.4rem;
|
|
||||||
$slider-handle-width: 1.4rem;
|
|
||||||
$slider-handle-background: $primary-color;
|
|
||||||
$slider-opacity-disabled: 0.25;
|
|
||||||
$slider-radius: $global-radius;
|
|
||||||
|
|
||||||
// 49. Switch
|
|
||||||
// ----------
|
|
||||||
|
|
||||||
$switch-background: $medium-gray;
|
|
||||||
$switch-background-active: $primary-color;
|
|
||||||
$switch-height: 2rem;
|
|
||||||
$switch-height-tiny: 1.5rem;
|
|
||||||
$switch-height-small: 1.75rem;
|
|
||||||
$switch-height-large: 2.5rem;
|
|
||||||
$switch-radius: $global-radius;
|
|
||||||
$switch-margin: $global-margin;
|
|
||||||
$switch-paddle-background: $white;
|
|
||||||
$switch-paddle-offset: 0.25rem;
|
|
||||||
$switch-paddle-radius: $global-radius;
|
|
||||||
$switch-paddle-transition: all 0.25s ease-out;
|
|
||||||
|
|
||||||
// 50. Table
|
|
||||||
// ---------
|
|
||||||
|
|
||||||
$table-background: $white;
|
|
||||||
$table-color-scale: 5%;
|
|
||||||
$table-border: 1px solid smart-scale($table-background, $table-color-scale);
|
|
||||||
$table-padding: rem-calc(8 10 10);
|
|
||||||
$table-hover-scale: 2%;
|
|
||||||
$table-row-hover: darken($table-background, $table-hover-scale);
|
|
||||||
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
|
|
||||||
$table-is-striped: true;
|
|
||||||
$table-striped-background: smart-scale($table-background, $table-color-scale);
|
|
||||||
$table-stripe: even;
|
|
||||||
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
|
|
||||||
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
|
|
||||||
$table-foot-background: smart-scale($table-background, $table-color-scale);
|
|
||||||
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
|
|
||||||
$table-head-font-color: $body-font-color;
|
|
||||||
$table-foot-font-color: $body-font-color;
|
|
||||||
$show-header-for-stacked: false;
|
|
||||||
$table-stack-breakpoint: medium;
|
|
||||||
|
|
||||||
// 51. Tabs
|
|
||||||
// --------
|
|
||||||
|
|
||||||
$tab-margin: 0;
|
|
||||||
$tab-background: $white;
|
|
||||||
$tab-color: $primary-color;
|
|
||||||
$tab-background-active: $light-gray;
|
|
||||||
$tab-active-color: $primary-color;
|
|
||||||
$tab-item-font-size: rem-calc(12);
|
|
||||||
$tab-item-background-hover: $white;
|
|
||||||
$tab-item-padding: 1.25rem 1.5rem;
|
|
||||||
$tab-content-background: $white;
|
|
||||||
$tab-content-border: $light-gray;
|
|
||||||
$tab-content-color: $body-font-color;
|
|
||||||
$tab-content-padding: 1rem;
|
|
||||||
|
|
||||||
// 52. Thumbnail
|
|
||||||
// -------------
|
|
||||||
|
|
||||||
$thumbnail-border: 4px solid $white;
|
|
||||||
$thumbnail-margin-bottom: $global-margin;
|
|
||||||
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
|
|
||||||
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
|
|
||||||
$thumbnail-transition: box-shadow 200ms ease-out;
|
|
||||||
$thumbnail-radius: $global-radius;
|
|
||||||
|
|
||||||
// 53. Title Bar
|
|
||||||
// -------------
|
|
||||||
|
|
||||||
$titlebar-background: $black;
|
|
||||||
$titlebar-color: $white;
|
|
||||||
$titlebar-padding: 0.5rem;
|
|
||||||
$titlebar-text-font-weight: bold;
|
|
||||||
$titlebar-icon-color: $white;
|
|
||||||
$titlebar-icon-color-hover: $medium-gray;
|
|
||||||
$titlebar-icon-spacing: 0.25rem;
|
|
||||||
|
|
||||||
// 54. Tooltip
|
|
||||||
// -----------
|
|
||||||
|
|
||||||
$has-tip-cursor: help;
|
|
||||||
$has-tip-font-weight: $global-weight-bold;
|
|
||||||
$has-tip-border-bottom: dotted 1px $dark-gray;
|
|
||||||
$tooltip-background-color: $black;
|
|
||||||
$tooltip-color: $white;
|
|
||||||
$tooltip-padding: 0.75rem;
|
|
||||||
$tooltip-max-width: 10rem;
|
|
||||||
$tooltip-font-size: $small-font-size;
|
|
||||||
$tooltip-pip-width: 0.75rem;
|
|
||||||
$tooltip-pip-height: $tooltip-pip-width * 0.866;
|
|
||||||
$tooltip-radius: $global-radius;
|
|
||||||
|
|
||||||
// 55. Top Bar
|
|
||||||
// -----------
|
|
||||||
|
|
||||||
$topbar-padding: 0.5rem;
|
|
||||||
$topbar-background: $light-gray;
|
|
||||||
$topbar-submenu-background: $topbar-background;
|
|
||||||
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
|
||||||
$topbar-input-width: 200px;
|
|
||||||
$topbar-unstack-breakpoint: medium;
|
|
||||||
|
|
||||||
// 56. Xy Grid
|
|
||||||
// -----------
|
|
||||||
|
|
||||||
$xy-grid: true;
|
|
||||||
$grid-container: $global-width;
|
|
||||||
$grid-columns: 12;
|
|
||||||
$grid-margin-gutters: (
|
|
||||||
small: 20px,
|
|
||||||
medium: 30px
|
|
||||||
);
|
|
||||||
$grid-padding-gutters: $grid-margin-gutters;
|
|
||||||
$grid-container-padding: $grid-padding-gutters;
|
|
||||||
$grid-container-max: $global-width;
|
|
||||||
$xy-block-grid-max: 8;
|
|
||||||
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
@charset 'utf-8';
|
|
||||||
|
|
||||||
@import 'settings';
|
|
||||||
@import 'foundation';
|
|
||||||
@import 'motion-ui';
|
|
||||||
|
|
||||||
// Global styles
|
|
||||||
@include foundation-global-styles;
|
|
||||||
@include foundation-forms;
|
|
||||||
@include foundation-typography;
|
|
||||||
|
|
||||||
// Grids (choose one)
|
|
||||||
@include foundation-xy-grid-classes;
|
|
||||||
// @include foundation-grid;
|
|
||||||
// @include foundation-flex-grid;
|
|
||||||
|
|
||||||
// Generic components
|
|
||||||
@include foundation-button;
|
|
||||||
@include foundation-button-group;
|
|
||||||
@include foundation-close-button;
|
|
||||||
@include foundation-label;
|
|
||||||
@include foundation-progress-bar;
|
|
||||||
@include foundation-slider;
|
|
||||||
@include foundation-switch;
|
|
||||||
@include foundation-table;
|
|
||||||
// Basic components
|
|
||||||
@include foundation-badge;
|
|
||||||
@include foundation-breadcrumbs;
|
|
||||||
@include foundation-callout;
|
|
||||||
@include foundation-card;
|
|
||||||
@include foundation-dropdown;
|
|
||||||
@include foundation-pagination;
|
|
||||||
@include foundation-tooltip;
|
|
||||||
|
|
||||||
// Containers
|
|
||||||
@include foundation-accordion;
|
|
||||||
@include foundation-media-object;
|
|
||||||
@include foundation-orbit;
|
|
||||||
@include foundation-responsive-embed;
|
|
||||||
@include foundation-tabs;
|
|
||||||
@include foundation-thumbnail;
|
|
||||||
// Menu-based containers
|
|
||||||
@include foundation-menu;
|
|
||||||
@include foundation-menu-icon;
|
|
||||||
@include foundation-accordion-menu;
|
|
||||||
@include foundation-drilldown-menu;
|
|
||||||
@include foundation-dropdown-menu;
|
|
||||||
|
|
||||||
// Layout components
|
|
||||||
@include foundation-off-canvas;
|
|
||||||
@include foundation-reveal;
|
|
||||||
@include foundation-sticky;
|
|
||||||
@include foundation-title-bar;
|
|
||||||
@include foundation-top-bar;
|
|
||||||
|
|
||||||
// Helpers
|
|
||||||
@include foundation-float-classes;
|
|
||||||
@include foundation-flex-classes;
|
|
||||||
@include foundation-visibility-classes;
|
|
||||||
// @include foundation-prototype-classes;
|
|
||||||
|
|
||||||
// Motion UI
|
|
||||||
@include motion-ui-transitions;
|
|
||||||
@include motion-ui-animations;
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
{{!-- This is the base layout for your project, and will be used on every page unless specified. --}}
|
|
||||||
|
|
||||||
<!doctype html>
|
|
||||||
<html class="no-js" lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Foundation for Sites</title>
|
|
||||||
<link rel="stylesheet" href="{{root}}assets/css/app.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
|
|
||||||
{{> body}}
|
|
||||||
|
|
||||||
<script src="{{root}}assets/js/app.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
<div class="grid-container">
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-12 cell">
|
|
||||||
<h1>Welcome to Foundation</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-12 cell">
|
|
||||||
<div class="callout">
|
|
||||||
<h3>We’re stoked you want to try Foundation! </h3>
|
|
||||||
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
|
|
||||||
<p>Once you've exhausted the fun in this document, you should check out:</p>
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-4 medium-4 cell">
|
|
||||||
<p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
|
|
||||||
</div>
|
|
||||||
<div class="large-4 medium-4 cell">
|
|
||||||
<p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
|
|
||||||
</div>
|
|
||||||
<div class="large-4 medium-4 cell">
|
|
||||||
<p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-4 medium-4 medium-push-2 cell">
|
|
||||||
<p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
|
|
||||||
</div>
|
|
||||||
<div class="large-4 medium-4 medium-pull-2 cell">
|
|
||||||
<p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-8 medium-8 cell">
|
|
||||||
<h5>Here’s your basic grid:</h5>
|
|
||||||
<!-- Grid Example -->
|
|
||||||
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-12 cell">
|
|
||||||
<div class="primary callout">
|
|
||||||
<p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-6 medium-6 cell">
|
|
||||||
<div class="primary callout">
|
|
||||||
<p>Six cell</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="large-6 medium-6 cell">
|
|
||||||
<div class="primary callout">
|
|
||||||
<p>Six cell</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-4 medium-4 small-4 cell">
|
|
||||||
<div class="primary callout">
|
|
||||||
<p>Four cell</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="large-4 medium-4 small-4 cell">
|
|
||||||
<div class="primary callout">
|
|
||||||
<p>Four cell</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="large-4 medium-4 small-4 cell">
|
|
||||||
<div class="primary callout">
|
|
||||||
<p>Four cell</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<h5>We bet you’ll need a form somewhere:</h5>
|
|
||||||
<form>
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-12 cell">
|
|
||||||
<label>Input Label</label>
|
|
||||||
<input type="text" placeholder="large-12.cell" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-4 medium-4 cell">
|
|
||||||
<label>Input Label</label>
|
|
||||||
<input type="text" placeholder="large-4.cell" />
|
|
||||||
</div>
|
|
||||||
<div class="large-4 medium-4 cell">
|
|
||||||
<label>Input Label</label>
|
|
||||||
<input type="text" placeholder="large-4.cell" />
|
|
||||||
</div>
|
|
||||||
<div class="large-4 medium-4 cell">
|
|
||||||
<div class="grid-x">
|
|
||||||
<label>Input Label</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" placeholder="small-9.cell" class="input-group-field" />
|
|
||||||
<span class="input-group-label">.com</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-12 cell">
|
|
||||||
<label>Select Box</label>
|
|
||||||
<select>
|
|
||||||
<option value="husker">Husker</option>
|
|
||||||
<option value="starbuck">Starbuck</option>
|
|
||||||
<option value="hotdog">Hot Dog</option>
|
|
||||||
<option value="apollo">Apollo</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-6 medium-6 cell">
|
|
||||||
<label>Choose Your Favorite</label>
|
|
||||||
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
|
|
||||||
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
|
|
||||||
</div>
|
|
||||||
<div class="large-6 medium-6 cell">
|
|
||||||
<label>Check these out</label>
|
|
||||||
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
|
|
||||||
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x grid-padding-x">
|
|
||||||
<div class="large-12 cell">
|
|
||||||
<label>Textarea Label</label>
|
|
||||||
<textarea placeholder="small-12.cell"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="large-4 medium-4 cell">
|
|
||||||
<h5>Try one of these buttons:</h5>
|
|
||||||
<p><a href="#" class="button">Simple Button</a><br/>
|
|
||||||
<a href="#" class="success button">Success Btn</a><br/>
|
|
||||||
<a href="#" class="alert button">Alert Btn</a><br/>
|
|
||||||
<a href="#" class="secondary button">Secondary Btn</a></p>
|
|
||||||
<div class="callout">
|
|
||||||
<h5>So many components, girl!</h5>
|
|
||||||
<p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
|
|
||||||
<a href="https://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,347 +0,0 @@
|
|||||||
# The Grid
|
|
||||||
|
|
||||||
<p class="lead">Problem: You've got tons of content, each needing different sized cells, and don't know how to quick and easily get it all done. Solution: The awesome XY grid!</p>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
The grid is built around two key elements: grid-x and cells. grid-container create a max-width and contain the grid, and cells create the final structure. Everything on your page that you don't give a specific structural style to should be within a grid-x or cell.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Nesting
|
|
||||||
|
|
||||||
In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## How to Use
|
|
||||||
|
|
||||||
Using this framework is easy. Here's how your code will look when you use a series of `<div>` tags to create cells.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="small-6 medium-4 large-3 cell">...</div>
|
|
||||||
<div class="small-6 medium-8 large-9 cell">...</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<div class="grid-x display">
|
|
||||||
<div class="small-12 large-4 cell">4</div>
|
|
||||||
<div class="small-12 large-4 cell">4</div>
|
|
||||||
<div class="small-12 large-4 cell">4</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x display">
|
|
||||||
<div class="small-12 large-3 cell">3</div>
|
|
||||||
<div class="small-12 large-6 cell">6</div>
|
|
||||||
<div class="small-12 large-3 cell">3</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x display">
|
|
||||||
<div class="small-12 large-2 cell">2</div>
|
|
||||||
<div class="small-12 large-8 cell">8</div>
|
|
||||||
<div class="small-12 large-2 cell">2</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x display">
|
|
||||||
<div class="small-12 large-3 cell">3</div>
|
|
||||||
<div class="small-12 large-9 cell">9</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x display">
|
|
||||||
<div class="small-12 large-4 cell">4</div>
|
|
||||||
<div class="small-12 large-8 cell">8</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x display">
|
|
||||||
<div class="small-12 large-5 cell">5</div>
|
|
||||||
<div class="small-12 large-7 cell">7</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x display">
|
|
||||||
<div class="small-12 large-6 cell">6</div>
|
|
||||||
<div class="small-12 large-6 cell">6</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Nesting grid-x
|
|
||||||
|
|
||||||
In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="small-8 cell">
|
|
||||||
8
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="small-8 cell">
|
|
||||||
8 Nested
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="small-8 cell">8 Nested Again</div>
|
|
||||||
<div class="small-4 cell">4</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="small-4 cell">4</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="small-4 cell">4</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<div class="grid-x display">
|
|
||||||
<div class="small-8 cell">8
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="small-8 cell">8 Nested
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="small-8 cell">8 Nested Again</div>
|
|
||||||
<div class="small-4 cell">4</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="small-4 cell">4</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="small-4 cellgi">4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Small Grid
|
|
||||||
|
|
||||||
As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="small-2 cell">2</div>
|
|
||||||
<div class="small-10 cell">10, last</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="small-3 cell">3</div>
|
|
||||||
<div class="small-9 cell">9, last</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<div class="grid-x display">
|
|
||||||
<div class="small-2 cell">2</div>
|
|
||||||
<div class="small-10 cell">10, last</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid-x display">
|
|
||||||
<div class="small-3 cell">3</div>
|
|
||||||
<div class="small-9 cell">9, last</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
# Colors
|
|
||||||
|
|
||||||
<p class="lead">Below you can find the different values we created that support the primary color variable you can change at any time in <code>\_settings.scss</code></p>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="row up-1 medium-up-3 large-up-5">
|
|
||||||
<div class="column">
|
|
||||||
<div class="color-block">
|
|
||||||
<span style="background: #2199e8"></span>
|
|
||||||
#2199e8
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<div class="color-block">
|
|
||||||
<span style="background: #3adb76"></span>
|
|
||||||
#3adb76
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<div class="color-block">
|
|
||||||
<span style="background: #ffae00"></span>
|
|
||||||
#ffae00
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<div class="color-block">
|
|
||||||
<span style="background: #ec5840"></span>
|
|
||||||
#ec5840
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<div class="color-block">
|
|
||||||
<span style="background: #0a0a0a"></span>
|
|
||||||
#0a0a0a
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
# Typography
|
|
||||||
|
|
||||||
<p class="lead">This design uses Helvetica Neue for headings and paragraph text.</p>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Headings
|
|
||||||
|
|
||||||
Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Paragraphs
|
|
||||||
|
|
||||||
Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<h1>Heading Level 1</h1>
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
|
|
||||||
|
|
||||||
<h2>Heading Level 2</h2>
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
|
|
||||||
|
|
||||||
<h3>Heading Level 3</h3>
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
|
|
||||||
|
|
||||||
<h4>Heading Level 4</h4>
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
|
|
||||||
|
|
||||||
<h5>Heading Level 5</h5>
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
|
|
||||||
|
|
||||||
<h6>Heading Level 6</h6>
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
|
|
||||||
|
|
||||||
# Buttons
|
|
||||||
|
|
||||||
<p class="lead">Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.</p>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Primary Buttons
|
|
||||||
|
|
||||||
These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the `.tiny`, `.small`, and `.large` classes.
|
|
||||||
|
|
||||||
```html_example
|
|
||||||
<a href="#" class="primary large button">Large button</a>
|
|
||||||
<a href="#" class="primary button">Regular button</a>
|
|
||||||
<a href="#" class="primary small button">Small button</a>
|
|
||||||
<a href="#" class="primary tiny button">Tiny button</a>
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Secondary Buttons
|
|
||||||
|
|
||||||
These buttons are used for less important, secondary actions on a page.
|
|
||||||
|
|
||||||
```html_example
|
|
||||||
<a href="#" class="secondary large button">Large button</a>
|
|
||||||
<a href="#" class="secondary button">Regular button</a>
|
|
||||||
<a href="#" class="secondary small button">Small button</a>
|
|
||||||
<a href="#" class="secondary tiny button">Tiny button</a>
|
|
||||||
```
|
|
||||||
|
|
||||||
# Forms
|
|
||||||
|
|
||||||
<p class="lead">Use forms to allow users to interact with the site and provide information to the company.</p>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Elements of a Form
|
|
||||||
|
|
||||||
A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order):
|
|
||||||
|
|
||||||
- Form
|
|
||||||
- Label
|
|
||||||
- Input
|
|
||||||
- Select
|
|
||||||
- Text area
|
|
||||||
- Button
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## How to Use
|
|
||||||
|
|
||||||
Make forms great and easy to use with the following rules:
|
|
||||||
|
|
||||||
- Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements.
|
|
||||||
- Series of checkboxes and radio buttons below within a `<ul class="inline-list">`.
|
|
||||||
- Before selecting any set of fields to use for a required input, explore other options (e.g., radio buttons over select lists).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Learn All About Forms
|
|
||||||
|
|
||||||
Check out the [Foundation Docs](http://foundation.zurb.com/sites/docs) to learn about how flexible our forms are for creating different layouts. It works perfectly with the grid to meet all your form needs.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Form Layouts
|
|
||||||
|
|
||||||
Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:
|
|
||||||
|
|
||||||
- You can size inputs using column sizes, like `.medium-6`, `.small-6`.
|
|
||||||
- You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Form Example
|
|
||||||
|
|
||||||
```html_example
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="large-12 columns">
|
|
||||||
<label>Label</label>
|
|
||||||
<input type="text" placeholder="placeholder">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="large-6 columns">
|
|
||||||
<label>Label</label>
|
|
||||||
<input type="text" placeholder="placeholder">
|
|
||||||
</div>
|
|
||||||
<div class="large-6 columns">
|
|
||||||
<div class="row collapse">
|
|
||||||
<label>Label</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<input class="input-group-field" type="text" placeholder="placeholder">
|
|
||||||
<span class="input-group-label">.com</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="large-12 columns">
|
|
||||||
<label>Select Box</label>
|
|
||||||
<select>
|
|
||||||
<option value="good">Good</option>
|
|
||||||
<option value="better">Better</option>
|
|
||||||
<option value="best">Best</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="large-6 columns">
|
|
||||||
<label>Choose Your Favorite</label>
|
|
||||||
<input type="radio" name="radio1" value="radio1" id="radio1"><label for="radio1">Red</label>
|
|
||||||
<input type="radio" name="radio2" value="radio2" id="radio2"><label for="radio2">Blue</label>
|
|
||||||
</div>
|
|
||||||
<div class="large-6 columns">
|
|
||||||
<label>Check these out</label>
|
|
||||||
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
|
|
||||||
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="large-12 columns">
|
|
||||||
<label>Textarea Label</label>
|
|
||||||
<textarea placeholder="placeholder"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
```
|
|
||||||
|
|
||||||
# New Section
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora omnis suscipit id ut laborum recusandae molestias hic aliquid **expedita!** [Non dicta](zurb.com), autem obcaecati error, id ab voluptate unde culpa nulla.
|
|
||||||
|
|
||||||
```html_example
|
|
||||||
<a href="#" class="button">Button</a>
|
|
||||||
<a href="#" class="button">Button</a>
|
|
||||||
<a href="#" class="button">Button</a>
|
|
||||||
```
|
|
||||||
@@ -1,135 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Style Guide</title>
|
|
||||||
<link rel="stylesheet" href="assets/css/app.css">
|
|
||||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
|
|
||||||
|
|
||||||
<!-- Style guide-specific CSS goes here. -->
|
|
||||||
<style>
|
|
||||||
/* This styles individual sections of the style guide */
|
|
||||||
.ss-section:not(:last-child) {
|
|
||||||
padding-bottom: 4rem;
|
|
||||||
border-bottom: 2px solid #ccc;
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* This styles code blocks used for examples. */
|
|
||||||
.ss-code code {
|
|
||||||
display: block;
|
|
||||||
padding: 1rem;
|
|
||||||
overflow-x: scroll;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* This styles the example rows used in the grid documentation. */
|
|
||||||
.grid-x.display {
|
|
||||||
background: #eee;
|
|
||||||
font-size: 11px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
line-height: 2rem;
|
|
||||||
border: solid 1px #c6c6c6;
|
|
||||||
margin-left: 0 !important;
|
|
||||||
margin-right: 0 !important; }
|
|
||||||
.grid-x.display .cell:nth-child(2), .grid-x.display .cell.small-centered, .grid-x.display .cell.large-centered {
|
|
||||||
background: #e1e1e1; }
|
|
||||||
.grid-x.display .cell.color-end {
|
|
||||||
background: #d4d4d4; }
|
|
||||||
|
|
||||||
/* This styles the color blocks used in the color documentation. */
|
|
||||||
.color-block {
|
|
||||||
border-radius: 2px;
|
|
||||||
display: block;
|
|
||||||
padding: 8px 8px 6px;
|
|
||||||
color: #333;
|
|
||||||
text-transform: uppercase;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.color-block span {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
margin-bottom: 0.42857rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-header {
|
|
||||||
background: #eee;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-container {
|
|
||||||
max-width: 1400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-side-menu {
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-container.padded {
|
|
||||||
padding-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-side-menu a {
|
|
||||||
transition: all 0.15s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-side-menu a:hover {
|
|
||||||
background: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-side-menu a:focus {
|
|
||||||
background: #1468a0;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-side-menu.menu {
|
|
||||||
overflow: auto;
|
|
||||||
height: 100vh;
|
|
||||||
padding-bottom: 5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header class="sg-header" id="sg-header">
|
|
||||||
<div class="grid-container">
|
|
||||||
<h1>Style Guide</h1>
|
|
||||||
<p class="lead">This style guide was built with Foundation for Sites. For more information on how to use this responsive front-end framework, check out the documentation, get help from the Foundation community, or request immediate technical support.</p>
|
|
||||||
<a href="https://foundation.zurb.com/sites/docs/" class="button">Visit the Docs</a>
|
|
||||||
<a href="https://foundation.zurb.com/forum" class="secondary button">Foundation Forum</a>
|
|
||||||
<a href="https://foundation.zurb.com/get-involved/support.html" class="secondary button">Technical Support</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="grid-container padded">
|
|
||||||
<div class="grid-x grid-margin-x" data-sticky-container>
|
|
||||||
|
|
||||||
<div class="large-3 medium-4 cell">
|
|
||||||
<div class="sticky" data-sticky data-top-anchor="sg-header:bottom">
|
|
||||||
<ul class="vertical menu sg-side-menu" data-smooth-scroll data-animation-easing="swing">
|
|
||||||
|
|
||||||
{{#each pages}}
|
|
||||||
<li><a href="#{{ anchor }}">{{ title }}</a></li>
|
|
||||||
{{/each}}
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="large-9 medium-8 cell">
|
|
||||||
{{#each pages}}
|
|
||||||
<section class="ss-section" id="{{ anchor }}">
|
|
||||||
{{ body }}
|
|
||||||
</section>
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="assets/js/app.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
end_of_line = lf
|
|
||||||
charset = utf-8
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
insert_final_newline = true
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 4
|
|
||||||
|
|
||||||
[*.json]
|
|
||||||
indent_size = 2
|
|
||||||
|
|
||||||
[*.{diff,md}]
|
|
||||||
trim_trailing_whitespace = false
|
|
||||||
5
examples/hyperapp/.gitignore
vendored
5
examples/hyperapp/.gitignore
vendored
@@ -1,5 +0,0 @@
|
|||||||
node_modules
|
|
||||||
dist
|
|
||||||
release
|
|
||||||
.env
|
|
||||||
.env.build
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
# HyperApp Example
|
|
||||||
|
|
||||||
This directory is a brief example of a [HyperApp](https://github.com/jorgebucaran/hyperapp) app that can be deployed with ZEIT Now and zero configuration.
|
|
||||||
|
|
||||||
## Deploy Your Own
|
|
||||||
|
|
||||||
Deploy your own HyperApp project with ZEIT Now.
|
|
||||||
|
|
||||||
[](https://zeit.co/import/project?template=https://github.com/zeit/now/tree/master/examples/hyperapp)
|
|
||||||
|
|
||||||
_Live Example: https://hyperapp.now-examples.now.sh_
|
|
||||||
|
|
||||||
### How We Created This Example
|
|
||||||
|
|
||||||
To get started with HyperApp on Now, you can use the [Now CLI](https://zeit.co/download) to initialize the project:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now init hyperapp
|
|
||||||
```
|
|
||||||
|
|
||||||
> The only change made is to amend the `releaseTarget` to `"public"` in the `taskfile.js` file.
|
|
||||||
|
|
||||||
### Deploying From Your Terminal
|
|
||||||
|
|
||||||
You can deploy your new HyperApp project with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now
|
|
||||||
```
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "hyperapp-boilerplate",
|
|
||||||
"version": "0.0.4",
|
|
||||||
"description": "This is a sample/boilerplate project that shows how to create a production-ready hyperapp application.",
|
|
||||||
"scripts": {
|
|
||||||
"build": "taskr build release",
|
|
||||||
"start": "taskr watch",
|
|
||||||
"preserve": "npm run build",
|
|
||||||
"serve": "serve release -s -p 4000"
|
|
||||||
},
|
|
||||||
"main": "src/app.js",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git+ssh://git@github.com/tzellman/hyperapp-boilerplate.git"
|
|
||||||
},
|
|
||||||
"author": "Tom Zellman <tzellman@gmail.com> (@tzellman)",
|
|
||||||
"license": "MIT",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/tzellman/hyperapp-boilerplate/issues"
|
|
||||||
},
|
|
||||||
"homepage": "https://github.com/tzellman/hyperapp-boilerplate#readme",
|
|
||||||
"devDependencies": {
|
|
||||||
"@taskr/clear": "^1.1.0",
|
|
||||||
"@taskr/concat": "^1.1.0",
|
|
||||||
"@taskr/esnext": "^1.1.0",
|
|
||||||
"@taskr/htmlmin": "^1.1.0",
|
|
||||||
"@taskr/postcss": "^1.1.2",
|
|
||||||
"@taskr/rev": "^1.1.0",
|
|
||||||
"@taskr/sass": "^1.1.0",
|
|
||||||
"@taskr/uglify": "^1.1.0",
|
|
||||||
"@taskr/watch": "^1.1.0",
|
|
||||||
"autoprefixer": "9.6.1",
|
|
||||||
"browser-sync": "2.26.7",
|
|
||||||
"fly-precache": "^2.1.0",
|
|
||||||
"fly-rollup": "^2.1.0",
|
|
||||||
"rollup": "^0.50.0",
|
|
||||||
"rollup-plugin-buble": "^0.16.0",
|
|
||||||
"rollup-plugin-commonjs": "^8.0.2",
|
|
||||||
"rollup-plugin-node-resolve": "^3.0.0",
|
|
||||||
"rollup-plugin-replace": "2.2.0",
|
|
||||||
"serve": "11.0.2",
|
|
||||||
"taskr": "^1.1.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"hyperapp": "1.2.10"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
const actions = {
|
|
||||||
add: () => state => ({ num: state.num + 1, clicks: state.clicks + 1 }),
|
|
||||||
sub: () => state => ({ num: state.num - 1, clicks: state.clicks + 1 }),
|
|
||||||
};
|
|
||||||
|
|
||||||
export default actions;
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import './service-worker-registration';
|
|
||||||
import { app } from 'hyperapp';
|
|
||||||
import actions from './actions/counter';
|
|
||||||
import state from './states/counter';
|
|
||||||
import view from './views/counter';
|
|
||||||
|
|
||||||
app(state, actions, view, document.body);
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user