Setup static site generator
This commit is contained in:
Maciej Matuszewski
parent
fcff778e3d
commit
278a0c5f50
|
|
@ -0,0 +1,25 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# we recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package,bower}.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": "airbnb-base",
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true,
|
||||
"mocha": true,
|
||||
"es6": true
|
||||
},
|
||||
"plugins": [
|
||||
"import"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 6,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"arrow-body-style": [
|
||||
1,
|
||||
"as-needed"
|
||||
],
|
||||
"comma-dangle": [
|
||||
1,
|
||||
"only-multiline"
|
||||
],
|
||||
"import/imports-first": 0,
|
||||
"import/newline-after-import": 0,
|
||||
"import/no-extraneous-dependencies": 0,
|
||||
"import/no-named-as-default": 0,
|
||||
"import/no-unresolved": 2,
|
||||
"import/prefer-default-export": 0,
|
||||
"indent": [
|
||||
2,
|
||||
2, {
|
||||
"SwitchCase": 1
|
||||
}
|
||||
],
|
||||
"max-len": 0,
|
||||
"newline-per-chained-call": 0,
|
||||
"no-console": 1,
|
||||
"no-use-before-define": 0,
|
||||
"prefer-template": 2,
|
||||
"require-yield": 0
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
* text=auto
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
node_modules
|
||||
dist
|
||||
.tmp
|
||||
.sass-cache
|
||||
bower_components
|
||||
test/bower_components
|
||||
npm-debug.log
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"plugins": [
|
||||
"stylelint-order",
|
||||
"stylelint-scss"
|
||||
],
|
||||
"rules": {
|
||||
"color-hex-case": "lower",
|
||||
"string-quotes": "single",
|
||||
"font-family-name-quotes": "always-where-recommended",
|
||||
"number-leading-zero": "never",
|
||||
"at-rule-empty-line-before": ["always", {
|
||||
"ignore": [
|
||||
"after-comment",
|
||||
"inside-block",
|
||||
"blockless-after-same-name-blockless",
|
||||
"blockless-after-blockless"
|
||||
]
|
||||
}],
|
||||
"selector-pseudo-class-no-unknown": [
|
||||
true, {
|
||||
"ignorePseudoClasses": [
|
||||
"global"
|
||||
]
|
||||
}
|
||||
],
|
||||
"indentation": 2,
|
||||
"order/declaration-block-order": [
|
||||
"dollar-variables",
|
||||
{
|
||||
type: "at-rule",
|
||||
name: "include"
|
||||
},
|
||||
{
|
||||
type: "at-rule",
|
||||
name: "extend"
|
||||
},
|
||||
"declarations",
|
||||
"rules",
|
||||
"at-rules"
|
||||
],
|
||||
"order/declaration-block-properties-specified-order": [
|
||||
[
|
||||
"position",
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left",
|
||||
"z-index",
|
||||
"display",
|
||||
"align-content",
|
||||
"align-items",
|
||||
"align-self",
|
||||
"flex",
|
||||
"flex-basis",
|
||||
"flex-direction",
|
||||
"flex-flow",
|
||||
"flex-grow",
|
||||
"flex-shrink",
|
||||
"flex-wrap",
|
||||
"justify-content",
|
||||
"order",
|
||||
"float",
|
||||
"width",
|
||||
"height",
|
||||
"max-width",
|
||||
"max-height",
|
||||
"min-width",
|
||||
"min-height",
|
||||
"margin",
|
||||
"margin-top",
|
||||
"margin-right",
|
||||
"margin-bottom",
|
||||
"margin-left",
|
||||
"margin-collapse",
|
||||
"margin-top-collapse",
|
||||
"margin-right-collapse",
|
||||
"margin-bottom-collapse",
|
||||
"margin-left-collapse",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
"padding-bottom",
|
||||
"padding-left",
|
||||
"overflow",
|
||||
"overflow-x",
|
||||
"overflow-y",
|
||||
"clip",
|
||||
"clear",
|
||||
"font",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"font-smoothing",
|
||||
"osx-font-smoothing",
|
||||
"font-style",
|
||||
"font-weight",
|
||||
"hyphens",
|
||||
"src",
|
||||
"line-height",
|
||||
"letter-spacing",
|
||||
"word-spacing",
|
||||
"color",
|
||||
"text-align",
|
||||
"text-decoration",
|
||||
"text-indent",
|
||||
"text-overflow",
|
||||
"text-rendering",
|
||||
"text-size-adjust",
|
||||
"text-shadow",
|
||||
"text-transform",
|
||||
"word-break",
|
||||
"word-wrap",
|
||||
"white-space",
|
||||
"vertical-align",
|
||||
"list-style",
|
||||
"list-style-type",
|
||||
"list-style-position",
|
||||
"list-style-image",
|
||||
"pointer-events",
|
||||
"cursor",
|
||||
"background",
|
||||
"background-attachment",
|
||||
"background-clip",
|
||||
"background-color",
|
||||
"background-image",
|
||||
"background-position",
|
||||
"background-repeat",
|
||||
"background-size",
|
||||
"border",
|
||||
"border-collapse",
|
||||
"border-top",
|
||||
"border-right",
|
||||
"border-bottom",
|
||||
"border-left",
|
||||
"border-color",
|
||||
"border-image",
|
||||
"border-top-color",
|
||||
"border-right-color",
|
||||
"border-bottom-color",
|
||||
"border-left-color",
|
||||
"border-spacing",
|
||||
"border-style",
|
||||
"border-top-style",
|
||||
"border-right-style",
|
||||
"border-bottom-style",
|
||||
"border-left-style",
|
||||
"border-width",
|
||||
"border-top-width",
|
||||
"border-right-width",
|
||||
"border-bottom-width",
|
||||
"border-left-width",
|
||||
"border-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius",
|
||||
"border-bottom-left-radius",
|
||||
"border-top-left-radius",
|
||||
"border-radius-topright",
|
||||
"border-radius-bottomright",
|
||||
"border-radius-bottomleft",
|
||||
"border-radius-topleft",
|
||||
"content",
|
||||
"quotes",
|
||||
"outline",
|
||||
"outline-offset",
|
||||
"outline-width",
|
||||
"outline-style",
|
||||
"outline-color",
|
||||
"opacity",
|
||||
"filter",
|
||||
"visibility",
|
||||
"size",
|
||||
"zoom",
|
||||
"transform",
|
||||
"box-align",
|
||||
"box-flex",
|
||||
"box-orient",
|
||||
"box-pack",
|
||||
"box-shadow",
|
||||
"box-sizing",
|
||||
"table-layout",
|
||||
"animation",
|
||||
"animation-delay",
|
||||
"animation-duration",
|
||||
"animation-iteration-count",
|
||||
"animation-name",
|
||||
"animation-play-state",
|
||||
"animation-timing-function",
|
||||
"animation-fill-mode",
|
||||
"transition",
|
||||
"transition-delay",
|
||||
"transition-duration",
|
||||
"transition-property",
|
||||
"transition-timing-function",
|
||||
"backface-visibility",
|
||||
"resize",
|
||||
"appearance",
|
||||
"user-select",
|
||||
"interpolation-mode",
|
||||
"direction",
|
||||
"marks",
|
||||
"page",
|
||||
"set-link-source",
|
||||
"unicode-bidi",
|
||||
"speak"
|
||||
],
|
||||
{ unspecified: "bottomAlphabetical" }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -14,4 +14,8 @@ You can find out more by watching the video below and joining the upcoming meetu
|
|||
|
||||
Is simply somewhere to keep the #ArtProject website for now and create bounties for any and all of the technical work we will require in order to make this the single greatest and most mind-boggling installation the crypto-world has ever seen!
|
||||
|
||||
<<<<<<< HEAD
|
||||
Join us - the revolution will rendered artistically!
|
||||
=======
|
||||
Join us - the revolution will rendered artistically!
|
||||
>>>>>>> Setup static site generator
|
||||
|
|
|
|||
|
|
@ -0,0 +1,256 @@
|
|||
import gulp from 'gulp';
|
||||
import gulpLoadPlugins from 'gulp-load-plugins';
|
||||
import browserSync from 'browser-sync';
|
||||
import del from 'del';
|
||||
import sassModuleImporter from 'sass-module-importer';
|
||||
import browserify from 'browserify';
|
||||
import babelify from 'babelify';
|
||||
import rollupify from 'rollupify';
|
||||
import source from 'vinyl-source-stream';
|
||||
import buffer from 'vinyl-buffer';
|
||||
|
||||
const $ = gulpLoadPlugins();
|
||||
const reload = browserSync.reload;
|
||||
|
||||
const packageJSON = require('./package.json');
|
||||
const dependenciesObject = (packageJSON && packageJSON.dependencies) || {};
|
||||
const vendorDeps = Object.keys(dependenciesObject).filter(name => !/\.s?css|\.sass/.test(name));
|
||||
|
||||
function lint(files) {
|
||||
return () => {
|
||||
return gulp.src(files)
|
||||
.pipe($.plumber({
|
||||
errorHandler(err) {
|
||||
console.log(err); // eslint-disable-line no-console
|
||||
this.emit('end');
|
||||
}
|
||||
}))
|
||||
.pipe($.eslint())
|
||||
.pipe($.eslint.format())
|
||||
.pipe($.if(!browserSync.active, $.eslint.failAfterError()));
|
||||
};
|
||||
}
|
||||
|
||||
gulp.task('styles', ['styles:lint'], () => {
|
||||
return gulp.src('./src/styles/**/*.scss')
|
||||
.pipe($.plumber({
|
||||
errorHandler(err) {
|
||||
console.log(err); // eslint-disable-line no-console
|
||||
this.emit('end');
|
||||
}
|
||||
}))
|
||||
.pipe($.sass({
|
||||
importer: sassModuleImporter()
|
||||
}))
|
||||
.pipe($.sourcemaps.init())
|
||||
.pipe($.autoprefixer({
|
||||
browsers: ['last 1 version']
|
||||
}))
|
||||
.pipe($.sourcemaps.write())
|
||||
.pipe(gulp.dest('./dist/css'))
|
||||
.pipe(reload({
|
||||
stream: true
|
||||
}));
|
||||
});
|
||||
|
||||
gulp.task('styles:lint', () => {
|
||||
return gulp.src('./src/styles/**/*.scss')
|
||||
.pipe($.stylelint({
|
||||
reporters: [{
|
||||
formatter: 'string',
|
||||
console: true
|
||||
}]
|
||||
}));
|
||||
});
|
||||
|
||||
gulp.task('lint', lint('./src/scripts/**/*.js'));
|
||||
gulp.task('lint:test', lint('test/spec/**/*.js'));
|
||||
|
||||
gulp.task('scripts', ['scripts:vendor'], () => {
|
||||
return browserify({
|
||||
entries: './src/scripts/main.js',
|
||||
debug: true,
|
||||
})
|
||||
.external(vendorDeps)
|
||||
.transform(babelify)
|
||||
.transform(rollupify)
|
||||
.bundle()
|
||||
.on('error', $.notify.onError({
|
||||
title: 'Failed running browserify',
|
||||
message: 'Error: <%= error.message %>'
|
||||
}))
|
||||
.pipe(source('main.js'))
|
||||
.pipe(buffer())
|
||||
.pipe($.sourcemaps.init({
|
||||
loadMaps: true
|
||||
}))
|
||||
.pipe($.sourcemaps.write())
|
||||
.pipe(gulp.dest('./dist/js'))
|
||||
.pipe(reload({
|
||||
stream: true,
|
||||
once: true
|
||||
}));
|
||||
});
|
||||
|
||||
gulp.task('scripts:vendor', () => (
|
||||
browserify()
|
||||
.require(vendorDeps)
|
||||
.transform(rollupify)
|
||||
.bundle()
|
||||
.on('error', $.notify.onError({
|
||||
title: 'Failed running browserify',
|
||||
message: 'Error: <%= error.message %>'
|
||||
}))
|
||||
.pipe(source('vendor.js'))
|
||||
.pipe(buffer())
|
||||
.pipe(gulp.dest('./dist/js'))
|
||||
));
|
||||
|
||||
gulp.task('hbs', () => {
|
||||
return gulp.src('./src/hbs/*.hbs')
|
||||
.pipe($.plumber({
|
||||
errorHandler(err) {
|
||||
console.log(err); // eslint-disable-line no-console
|
||||
this.emit('end');
|
||||
}
|
||||
}))
|
||||
.pipe($.frontMatter({
|
||||
property: 'data',
|
||||
remove: true
|
||||
}))
|
||||
.pipe(
|
||||
$.hb({
|
||||
bustCache: true,
|
||||
helpers: [
|
||||
'./src/hbs/helpers/repeat.js',
|
||||
'./node_modules/handlebars-helpers/lib/fs.js',
|
||||
'./node_modules/handlebars-helpers/lib/comparison.js',
|
||||
'./node_modules/handlebars-helpers/lib/collection.js',
|
||||
'./node_modules/handlebars-helpers/lib/string.js',
|
||||
'./node_modules/handlebars-helpers/lib/math.js',
|
||||
'./node_modules/handlebars-layouts'
|
||||
]
|
||||
})
|
||||
.partials('./src/hbs/layouts/*.hbs')
|
||||
.partials('./src/hbs/partials/**/*.hbs')
|
||||
)
|
||||
.pipe($.rename({
|
||||
extname: '.html',
|
||||
}))
|
||||
.pipe(gulp.dest('./dist'))
|
||||
.pipe(reload({
|
||||
stream: true,
|
||||
once: true
|
||||
}));
|
||||
});
|
||||
|
||||
gulp.task('html', ['hbs', 'styles', 'scripts'], () => {
|
||||
return gulp.src('./dist/*.html')
|
||||
.pipe($.useref())
|
||||
.pipe($.if('*.js', $.uglify()))
|
||||
.pipe($.if('*.css', $.cleanCss({
|
||||
compatibility: '*'
|
||||
})))
|
||||
.pipe($.if('*.html', $.htmlmin({
|
||||
collapseWhitespace: true,
|
||||
conditionals: true
|
||||
})))
|
||||
.pipe(gulp.dest('./dist'));
|
||||
});
|
||||
|
||||
gulp.task('images', () => {
|
||||
return gulp.src('./src/images/**/*.{png,jpg,jpeg,gif,svg}')
|
||||
.pipe($.plumber())
|
||||
.pipe($.if($.if.isFile, $.cache($.imagemin({
|
||||
progressive: true,
|
||||
interlaced: true,
|
||||
// don't remove IDs from SVGs, they are often used
|
||||
// as hooks for embedding and styling
|
||||
svgoPlugins: [{
|
||||
cleanupIDs: false,
|
||||
removeUselessDefs: true,
|
||||
convertStyleToAttrs: true
|
||||
}]
|
||||
}))
|
||||
.on('error', (err) => {
|
||||
console.log(err); // eslint-disable-line no-console
|
||||
this.end();
|
||||
})))
|
||||
.pipe(gulp.dest('dist/images'));
|
||||
});
|
||||
|
||||
gulp.task('fonts', () => {
|
||||
return gulp.src(['./src/fonts/*.{eot,svg,ttf,woff,woff2}'])
|
||||
.pipe(gulp.dest('./dist/fonts'));
|
||||
});
|
||||
|
||||
gulp.task('extras', () => {
|
||||
return gulp.src([
|
||||
'./src/*.*',
|
||||
'!./src/.DS_Store',
|
||||
'!src/*.html'
|
||||
], {
|
||||
dot: true
|
||||
}).pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
gulp.task('clean', () => {
|
||||
return del.sync('./dist');
|
||||
});
|
||||
|
||||
gulp.task('serve', ['clean', 'hbs', 'styles', 'lint', 'scripts'], () => {
|
||||
browserSync({
|
||||
notify: false,
|
||||
port: 9000,
|
||||
server: {
|
||||
baseDir: './dist',
|
||||
routes: {
|
||||
'/images': 'src/images',
|
||||
'/fonts': 'src/fonts'
|
||||
},
|
||||
directory: true
|
||||
}
|
||||
});
|
||||
|
||||
$.watch([
|
||||
'./src/hbs/partials/**/*.hbs',
|
||||
'./src/hbs/layouts/*.hbs',
|
||||
'./src/hbs/*.html'
|
||||
], () => {
|
||||
gulp.start('hbs');
|
||||
});
|
||||
|
||||
$.watch('./src/scripts/**/*.js', () => {
|
||||
gulp.start('scripts');
|
||||
gulp.start('lint');
|
||||
});
|
||||
|
||||
$.watch('./src/styles/**/*.scss', () => {
|
||||
gulp.start('styles');
|
||||
});
|
||||
|
||||
gulp.watch('./src/images/**/**.{png,jpg,jpeg,gif,svg}').on('change', reload);
|
||||
});
|
||||
|
||||
gulp.task('test', () => {
|
||||
gulp.src('./test/**/*.js', { read: false })
|
||||
.pipe($.mocha());
|
||||
});
|
||||
|
||||
gulp.task('test:watch', ['lint:test', 'test'], () => {
|
||||
$.watch('./test/spec/**/*.js', () => {
|
||||
gulp.start('lint:test');
|
||||
gulp.start('test');
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('build', ['clean', 'lint', 'html', 'fonts', 'extras', 'images'], () => {
|
||||
return gulp.src('dist/**/*').pipe($.size({
|
||||
title: 'build',
|
||||
gzip: true
|
||||
}));
|
||||
});
|
||||
|
||||
gulp.task('default', () => {
|
||||
gulp.start('serve');
|
||||
});
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
{
|
||||
"name": "static-site-starter",
|
||||
"description": "Starter for any static site that you want to build.",
|
||||
"version": "1.1.2",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"npm": ">=3"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "./node_modules/gulp/bin/gulp.js serve",
|
||||
"build": "./node_modules/gulp/bin/gulp.js build",
|
||||
"test": "./node_modules/gulp/bin/gulp.js test",
|
||||
"test:watch": "./node_modules/gulp/bin/gulp.js test:watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^5.5.6",
|
||||
"babel-eslint": "^6.1.2",
|
||||
"babel-preset-es2015": "^6.18.0",
|
||||
"babel-preset-stage-0": "^6.16.0",
|
||||
"babelify": "^7.3.0",
|
||||
"browser-sync": "^2.18.1",
|
||||
"browserify": "^13.1.1",
|
||||
"chai": "^3.5.0",
|
||||
"del": "^2.2.2",
|
||||
"eslint": "^3.10.2",
|
||||
"eslint-config-airbnb-base": "^10.0.1",
|
||||
"eslint-plugin-import": "^2.2.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^3.1.1",
|
||||
"gulp-cache": "^0.4.5",
|
||||
"gulp-clean-css": "^2.0.13",
|
||||
"gulp-eslint": "^3.0.1",
|
||||
"gulp-front-matter": "^1.3.0",
|
||||
"gulp-hb": "^5.1.4",
|
||||
"gulp-htmlmin": "^3.0.0",
|
||||
"gulp-if": "^2.0.2",
|
||||
"gulp-imagemin": "^3.1.1",
|
||||
"gulp-load-plugins": "^1.4.0",
|
||||
"gulp-mocha": "^3.0.1",
|
||||
"gulp-notify": "^2.2.0",
|
||||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "^2.3.2",
|
||||
"gulp-size": "^2.1.0",
|
||||
"gulp-sourcemaps": "^2.2.0",
|
||||
"gulp-stylelint": "^3.7.0",
|
||||
"gulp-uglify": "^2.0.0",
|
||||
"gulp-useref": "^3.1.2",
|
||||
"gulp-watch": "^4.3.10",
|
||||
"handlebars-helper-repeat": "^0.3.1",
|
||||
"handlebars-helpers": "^0.7.5",
|
||||
"handlebars-layouts": "^3.1.4",
|
||||
"opn": "^4.0.2",
|
||||
"rollupify": "^0.3.5",
|
||||
"sass-module-importer": "^1.4.0",
|
||||
"stylelint": "^7.8.0",
|
||||
"stylelint-config-standard": "^16.0.0",
|
||||
"stylelint-order": "^0.2.2",
|
||||
"stylelint-scss": "^1.4.1",
|
||||
"vinyl-buffer": "^1.0.0",
|
||||
"vinyl-source-stream": "^1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"sanitize.css": "^4.1.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
var repeat = require('handlebars-helper-repeat');
|
||||
|
||||
module.exports.register = function(Handlebars, options) {
|
||||
Handlebars.registerHelper('repeat', repeat);
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: 'Home'
|
||||
---
|
||||
|
||||
{{#extend "base"}}
|
||||
{{#content "main"}}
|
||||
|
||||
<div class="container">
|
||||
<h1>Hello World!</h1>
|
||||
</div>
|
||||
|
||||
{{/content}}
|
||||
{{/extend}}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Static Site Starter | {{@file.data.title}}</title>
|
||||
|
||||
<!-- build:css css/main.css -->
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="wrapper">
|
||||
{{> header}}
|
||||
|
||||
<main class="main">
|
||||
{{{ block "main"}}}
|
||||
</main>
|
||||
|
||||
{{> footer}}
|
||||
</div>
|
||||
|
||||
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
|
||||
<!--<script>
|
||||
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||
e.src='https://www.google-analytics.com/analytics.js';
|
||||
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||
ga('create','UA-XXXXX-X');ga('send','pageview');
|
||||
</script>-->
|
||||
|
||||
<!-- build:js js/vendor.js -->
|
||||
<script src="/js/vendor.js" type="text/javascript"></script>
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- build:js js/main.js -->
|
||||
<script src="/js/main.js" type="text/javascript"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<footer>
|
||||
This is footer
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<header>
|
||||
This is header
|
||||
</header>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
# robotstxt.org/
|
||||
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1 @@
|
|||
console.log('Hello World!'); // eslint-disable-line no-console
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
//=======================
|
||||
// Colors
|
||||
//=======================
|
||||
|
||||
$primary: #fff;
|
||||
$text: #000;
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
//=======================
|
||||
// Core styles
|
||||
//=======================
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $base-font-family;
|
||||
font-weight: 400;
|
||||
line-height: 1.33;
|
||||
color: $text;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
//=======================
|
||||
// Styles reset
|
||||
//=======================
|
||||
|
||||
* {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
a,
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: $base-font-family;
|
||||
font-size: remify(14px);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font-family: $base-font-family;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
//=======================
|
||||
// Media queries
|
||||
//=======================
|
||||
|
||||
$xs: 480px;
|
||||
$sm: 768px;
|
||||
$md: 992px;
|
||||
$lg: 1200px;
|
||||
|
||||
$grid-gutter: 30px;
|
||||
$grid-columns: 12;
|
||||
|
||||
$container-sm: 720px;
|
||||
$container-md: 940px;
|
||||
$container-lg: 1140px;
|
||||
|
||||
$screen-xs: 'only screen and (min-width: 1px)';
|
||||
$screen-sm: 'only screen and (min-width: #{$sm})';
|
||||
$screen-md: 'only screen and (min-width: #{$md})';
|
||||
$screen-lg: 'only screen and (min-width: #{$lg})';
|
||||
|
||||
$screen-only-xs: 'only screen and (max-width: #{$xs - 1})';
|
||||
$screen-only-sm: 'only screen and (min-width: #{$xs}) and (max-width: #{$md - 1})';
|
||||
$screen-only-md: 'only screen and (min-width: #{$md}) and (max-width: #{$lg - 1})';
|
||||
$screen-only-lg: 'only screen and (min-width: #{$lg})';
|
||||
|
||||
//=======================
|
||||
// Typography
|
||||
//=======================
|
||||
|
||||
// HTML base font size is 16px
|
||||
$base-font-size: 16px;
|
||||
$base-font-family: Arial, sans-serif;
|
||||
|
||||
//=======================
|
||||
// Misc
|
||||
//=======================
|
||||
|
||||
$duration: .2s;
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
//=======================
|
||||
// Headings
|
||||
//=======================
|
||||
|
||||
@for $i from 0 through 6 {
|
||||
h#{$i} {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// *** Styles ***
|
||||
@import 'sanitize.css';
|
||||
|
||||
@import './base/settings';
|
||||
@import './base/colors';
|
||||
|
||||
@import './utils/easings';
|
||||
@import './utils/animations';
|
||||
@import './utils/grid';
|
||||
@import './utils/ui';
|
||||
|
||||
@import './base/core';
|
||||
@import './base/typography';
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
@mixin fade-in($duration: .2s) {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity $duration;
|
||||
}
|
||||
|
||||
@mixin fade-out($duration: .2s, $easing: linear) {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity $duration $easing 0s, visibility 0s $easing $duration;
|
||||
}
|
||||
|
||||
@mixin slide-up-in($duration: .2s) {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: opacity $duration, transform $duration;
|
||||
}
|
||||
|
||||
@mixin slide-down-out($pos, $duration: .2s, $easing: linear) {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, $pos, 0);
|
||||
transition: opacity $duration $easing 0s, transform $duration $easing 0s, visibility 0s $easing $duration;
|
||||
}
|
||||
|
||||
@mixin scale-up($duration: .2s) {
|
||||
visibility: visible;
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform $duration;
|
||||
}
|
||||
|
||||
@mixin scale-down($duration: .2s, $easing: linear) {
|
||||
visibility: hidden;
|
||||
transform: scale(0);
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform $duration $easing 0s, visibility 0s $easing $duration;
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
// Cubic
|
||||
$ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
|
||||
$ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
|
||||
$ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
|
||||
|
||||
// Circ
|
||||
$ease-in-circ: cubic-bezier(.6, .04, .98, .335);
|
||||
$ease-out-circ: cubic-bezier(.075, .82, .165, 1);
|
||||
$ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
|
||||
|
||||
// Expo
|
||||
$ease-in-expo: cubic-bezier(.95, .05, .795, .035);
|
||||
$ease-out-expo: cubic-bezier(.19, 1, .22, 1);
|
||||
$ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
|
||||
|
||||
// Quad
|
||||
$ease-in-quad: cubic-bezier(.55, .085, .68, .53);
|
||||
$ease-out-quad: cubic-bezier(.25, .46, .45, .94);
|
||||
$ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
|
||||
|
||||
// Quart
|
||||
$ease-in-quart: cubic-bezier(.895, .03, .685, .22);
|
||||
$ease-out-quart: cubic-bezier(.165, .84, .44, 1);
|
||||
$ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
|
||||
|
||||
// Quint
|
||||
$ease-in-quint: cubic-bezier(.755, .05, .855, .06);
|
||||
$ease-out-quint: cubic-bezier(.23, 1, .32, 1);
|
||||
$ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
|
||||
|
||||
// Sine
|
||||
$ease-in-sine: cubic-bezier(.47, 0, .745, .715);
|
||||
$ease-out-sine: cubic-bezier(.39, .575, .565, 1);
|
||||
$ease-in-out-sine: cubic-bezier(.445, .05, .55, .95);
|
||||
|
||||
// Back
|
||||
$ease-in-back: cubic-bezier(.6, -.28, .735, .045);
|
||||
$ease-out-back: cubic-bezier(.175, .885, .32, 1.275);
|
||||
$ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55);
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
//=======================
|
||||
// Mixins
|
||||
//=======================
|
||||
|
||||
@mixin clearfix {
|
||||
&::before,
|
||||
&::after {
|
||||
display: table;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container {
|
||||
@include clearfix;
|
||||
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: 0 $grid-gutter / 2;
|
||||
|
||||
@media #{$screen-sm} {
|
||||
width: $container-sm + $grid-gutter;
|
||||
}
|
||||
|
||||
@media #{$screen-md} {
|
||||
width: $container-md + $grid-gutter;
|
||||
}
|
||||
|
||||
@media #{$screen-lg} {
|
||||
width: $container-lg + $grid-gutter;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin row {
|
||||
@include clearfix;
|
||||
|
||||
margin-right: -($grid-gutter / 2);
|
||||
margin-left: -($grid-gutter / 2);
|
||||
}
|
||||
|
||||
@mixin row-gutter {
|
||||
margin-right: -($grid-gutter / 2);
|
||||
margin-left: -($grid-gutter / 2);
|
||||
}
|
||||
|
||||
@mixin row-flex {
|
||||
@include row-gutter;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
@mixin column($size) {
|
||||
float: left;
|
||||
width: ($size * 100% / $grid-columns);
|
||||
min-height: 1px;
|
||||
padding-right: $grid-gutter / 2;
|
||||
padding-left: $grid-gutter / 2;
|
||||
}
|
||||
|
||||
@mixin column-no-float($size) {
|
||||
width: ($size * 100% / $grid-columns);
|
||||
padding-right: $grid-gutter / 2;
|
||||
padding-left: $grid-gutter / 2;
|
||||
}
|
||||
|
||||
@mixin column-flex($size) {
|
||||
flex: 0 0 ($size * 100% / $grid-columns);
|
||||
max-width: ($size * 100% / $grid-columns);
|
||||
padding-right: $grid-gutter / 2;
|
||||
padding-left: $grid-gutter / 2;
|
||||
}
|
||||
|
||||
@mixin column-offset($size, $dir: 'right') {
|
||||
@if $dir == 'left' {
|
||||
padding-left: calc(#{($size * 100% / $grid-columns)} + #{($grid-gutter / 2)});
|
||||
}
|
||||
@else if $dir == 'right' {
|
||||
padding-right: calc(#{($size * 100% / $grid-columns)} + #{($grid-gutter / 2)});
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-columns-grid($quantity) {
|
||||
@for $i from 1 through $quantity {
|
||||
.col-xs-#{$i},
|
||||
.col-sm-#{$i},
|
||||
.col-md-#{$i},
|
||||
.col-lg-#{$i} {
|
||||
@extend %col;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin generate-columns($quantity, $prefix) {
|
||||
@for $i from 1 through $quantity {
|
||||
.col-#{$prefix}-#{$i} {
|
||||
width: ($i * 100% / $quantity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin generate-columns-media($breakpoint, $prefix) {
|
||||
@media #{$screen-sm} {
|
||||
@include generate-columns(12, $prefix);
|
||||
|
||||
.container {
|
||||
width: $container-sm + $grid-gutter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//=======================
|
||||
// Placeholders
|
||||
//=======================
|
||||
|
||||
%clearfix {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
%row {
|
||||
@extend %clearfix;
|
||||
|
||||
margin-right: -($grid-gutter / 2);
|
||||
margin-left: -($grid-gutter / 2);
|
||||
}
|
||||
|
||||
%col {
|
||||
float: left;
|
||||
padding-right: $grid-gutter / 2;
|
||||
padding-left: $grid-gutter / 2;
|
||||
}
|
||||
|
||||
%container-fluid {
|
||||
@include clearfix;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
%container {
|
||||
@include container;
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
//=======================
|
||||
// Form fields
|
||||
//=======================
|
||||
|
||||
@mixin placeholder {
|
||||
$placeholders: ':-webkit-input' ':-moz' '-moz' '-ms-input';
|
||||
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//=======================
|
||||
// Typography
|
||||
//=======================
|
||||
|
||||
@function remify($px) {
|
||||
@return ($px / $base-font-size) * 1rem;
|
||||
}
|
||||
|
||||
%list-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
//=======================
|
||||
// Scaling
|
||||
//=======================
|
||||
|
||||
@function calc-vw($size, $base-size) {
|
||||
@return ($size / $base-size) * 100 * 1vw;
|
||||
}
|
||||
|
||||
@function calc-vh($size, $base-size) {
|
||||
@return ($size / $base-size) * 100 * 1vh;
|
||||
}
|
||||
|
||||
@function calc-vm($size, $base-size) {
|
||||
@return ($size / $base-size) * 100 * 1vm;
|
||||
}
|
||||
|
||||
@function calc-vmin($size, $base-size) {
|
||||
@return ($size / $base-size) * 100 * 1vmin;
|
||||
}
|
||||
|
||||
@function calc-vmax($size, $base-size) {
|
||||
@return ($size / $base-size) * 100 * 1vmax;
|
||||
}
|
||||
|
||||
// Maintain full page height on mobile device browsers
|
||||
// using viewport height unit.
|
||||
@mixin get-fixed-vh($prop, $size, $offset: 0) {
|
||||
#{$prop}: calc(#{$size * 1vh} - #{$offset});
|
||||
|
||||
@media screen and (max-device-aspect-ratio: 3 / 4) {
|
||||
#{$prop}: calc(#{$size * 1vw * 1.333} - #{$offset});
|
||||
}
|
||||
|
||||
@media screen and (max-device-aspect-ratio: 2 / 3) {
|
||||
#{$prop}: calc(#{$size * 1vw * 1.5} - #{$offset});
|
||||
}
|
||||
|
||||
@media screen and (max-device-aspect-ratio: 10 / 16) {
|
||||
#{$prop}: calc(#{$size * 1vw * 1.6} - #{$offset});
|
||||
}
|
||||
|
||||
@media screen and (max-device-aspect-ratio: 9 / 16) {
|
||||
#{$prop}: calc(#{$size * 1vw * 1.778} - #{$offset});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { assert } from 'chai';
|
||||
|
||||
describe('Give it some context', () => {
|
||||
describe('maybe a bit more context here', () => {
|
||||
it('should run here few assertions', () => {
|
||||
assert.isOk(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue