diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..e1f3b92 --- /dev/null +++ b/.babelrc @@ -0,0 +1,7 @@ +{ + "presets": [ + [ + "es2015" + ] + ] +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..4e31a94 --- /dev/null +++ b/.editorconfig @@ -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 diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..2bde12b --- /dev/null +++ b/.eslintrc.json @@ -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 + } +} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..2125666 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..98cd527 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +node_modules +dist +.tmp +.sass-cache +bower_components +test/bower_components +npm-debug.log diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..dfda3e0 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +6.1.0 diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..e1074b8 --- /dev/null +++ b/.stylelintrc @@ -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" } + ] + } +} diff --git a/README.md b/README.md index 36f87a1..89df066 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/gulpfile.babel.js b/gulpfile.babel.js new file mode 100644 index 0000000..9803a2d --- /dev/null +++ b/gulpfile.babel.js @@ -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'); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..534c6e4 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/hbs/helpers/repeat.js b/src/hbs/helpers/repeat.js new file mode 100644 index 0000000..f000d10 --- /dev/null +++ b/src/hbs/helpers/repeat.js @@ -0,0 +1,7 @@ +'use strict'; + +var repeat = require('handlebars-helper-repeat'); + +module.exports.register = function(Handlebars, options) { + Handlebars.registerHelper('repeat', repeat); +}; diff --git a/src/hbs/index.hbs b/src/hbs/index.hbs new file mode 100644 index 0000000..1130528 --- /dev/null +++ b/src/hbs/index.hbs @@ -0,0 +1,13 @@ +--- +title: 'Home' +--- + +{{#extend "base"}} + {{#content "main"}} + +
+

Hello World!

+
+ + {{/content}} +{{/extend}} diff --git a/src/hbs/layouts/base.hbs b/src/hbs/layouts/base.hbs new file mode 100644 index 0000000..9df1f85 --- /dev/null +++ b/src/hbs/layouts/base.hbs @@ -0,0 +1,46 @@ + + + + + + + Static Site Starter | {{@file.data.title}} + + + + + + + + +
+ {{> header}} + +
+ {{{ block "main"}}} +
+ + {{> footer}} +
+ + + + + + + + + + + + + diff --git a/src/hbs/partials/components/.gitkeep b/src/hbs/partials/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/hbs/partials/footer.hbs b/src/hbs/partials/footer.hbs new file mode 100644 index 0000000..71a2b02 --- /dev/null +++ b/src/hbs/partials/footer.hbs @@ -0,0 +1,3 @@ + diff --git a/src/hbs/partials/header.hbs b/src/hbs/partials/header.hbs new file mode 100644 index 0000000..22f5bd0 --- /dev/null +++ b/src/hbs/partials/header.hbs @@ -0,0 +1,3 @@ +
+ This is header +
diff --git a/src/images/.gitkeep b/src/images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/robots.txt b/src/robots.txt new file mode 100644 index 0000000..3969cb1 --- /dev/null +++ b/src/robots.txt @@ -0,0 +1,4 @@ +# robotstxt.org/ + +User-agent: * +Disallow: diff --git a/src/scripts/main.js b/src/scripts/main.js new file mode 100644 index 0000000..ef212d6 --- /dev/null +++ b/src/scripts/main.js @@ -0,0 +1 @@ +console.log('Hello World!'); // eslint-disable-line no-console diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss new file mode 100644 index 0000000..0db2b62 --- /dev/null +++ b/src/styles/base/_colors.scss @@ -0,0 +1,6 @@ +//======================= +// Colors +//======================= + +$primary: #fff; +$text: #000; diff --git a/src/styles/base/_core.scss b/src/styles/base/_core.scss new file mode 100644 index 0000000..e664b6e --- /dev/null +++ b/src/styles/base/_core.scss @@ -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; +} diff --git a/src/styles/base/_settings.scss b/src/styles/base/_settings.scss new file mode 100644 index 0000000..71e1154 --- /dev/null +++ b/src/styles/base/_settings.scss @@ -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; + diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss new file mode 100644 index 0000000..e6a099f --- /dev/null +++ b/src/styles/base/_typography.scss @@ -0,0 +1,9 @@ +//======================= +// Headings +//======================= + +@for $i from 0 through 6 { + h#{$i} { + margin: 0; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000..cef27cd --- /dev/null +++ b/src/styles/main.scss @@ -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'; diff --git a/src/styles/utils/_animations.scss b/src/styles/utils/_animations.scss new file mode 100644 index 0000000..4515b4d --- /dev/null +++ b/src/styles/utils/_animations.scss @@ -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; +} diff --git a/src/styles/utils/_easings.scss b/src/styles/utils/_easings.scss new file mode 100644 index 0000000..384c0bf --- /dev/null +++ b/src/styles/utils/_easings.scss @@ -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); diff --git a/src/styles/utils/_grid.scss b/src/styles/utils/_grid.scss new file mode 100644 index 0000000..98b16c6 --- /dev/null +++ b/src/styles/utils/_grid.scss @@ -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; +} diff --git a/src/styles/utils/_ui.scss b/src/styles/utils/_ui.scss new file mode 100644 index 0000000..138c33f --- /dev/null +++ b/src/styles/utils/_ui.scss @@ -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}); + } +} diff --git a/test/spec/test.js b/test/spec/test.js new file mode 100644 index 0000000..66ce44a --- /dev/null +++ b/test/spec/test.js @@ -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); + }); + }); +});