11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/generators/app/templates/eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "parserOptions": {
4 | "ecmaVersion": 6,
5 | "sourceType": "module"
6 | },
7 | "env": {
8 | "browser": true,
9 | "amd": true,
10 | "es6": true,
11 | "node": true
12 | },
13 | "rules": {
14 | "comma-dangle": 1,
15 | "quotes": [ 1, "single" ],
16 | "no-undef": 1,
17 | "global-strict": 0,
18 | "no-extra-semi": 1,
19 | "no-underscore-dangle": 0,
20 | "no-console": 1,
21 | "no-unused-vars": 1,
22 | "no-trailing-spaces": [1, { "skipBlankLines": true }],
23 | "no-unreachable": 1,
24 | "no-alert": 0
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "generator-front-webpack",
3 | "version": "0.1.7",
4 | "description": "Generator for modern front end apps",
5 | "license": "MIT",
6 | "files": [
7 | "generators"
8 | ],
9 | "keywords": [
10 | "yeoman-generator",
11 | "frontend",
12 | "html",
13 | "css",
14 | "sass",
15 | "javascript",
16 | "es2015",
17 | "webpack",
18 | "karma",
19 | "jasmime",
20 | "sassdoc"
21 | ],
22 | "repository": {
23 | "type": "git",
24 | "url": "https://github.com/Frodigo/generator-frontend-webpack"
25 | },
26 | "author": {
27 | "name": "Marcin Kwiatkowski",
28 | "email": "contact@frodigo.com",
29 | "url": "https://github.com/Frodigo"
30 | },
31 | "dependencies": {
32 | "chalk": "^1.1.3",
33 | "yeoman-generator": "^1.1.1",
34 | "yosay": "^2.0.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/styles/base/_base.scss:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: $font-family-base;
3 | min-width: 320px;
4 | }
5 |
6 | * {
7 | box-sizing: border-box;
8 | }
9 |
10 | .container {
11 | width: 100%;
12 | padding: 0 $indent-base;
13 | }
14 |
15 | .ui-section {
16 | margin: $indent-base 0;
17 | }
18 |
19 | a {
20 | color: $color-primary;
21 |
22 | &:hover {
23 | text-decoration: none;
24 | }
25 | }
26 |
27 | .bg-dark {
28 | background-color: $color-dark;
29 | }
30 |
31 | .bg-primary {
32 | background-color: $color-primary;
33 | }
34 |
35 | .bg-secondary {
36 | background-color: $color-secondary;
37 | }
38 |
39 | .bg-secondary-dark {
40 | background-color: $color-secondary-dark;
41 | }
42 |
43 | .bg-alternative {
44 | background-color: $color-alternative;
45 | }
46 |
47 | .bg-alternative-dark {
48 | background-color: $color-alternative;
49 | }
50 |
--------------------------------------------------------------------------------
/generators/app/templates/dev/html-validator.js:
--------------------------------------------------------------------------------
1 | var validator = require('html-validator');
2 | var fs = require('fs');
3 | var options = {
4 | validator: 'http://html5.validator.nu',
5 | format: 'text'
6 | };
7 |
8 | var Filehound = require('filehound');
9 |
10 | Filehound.create()
11 | .ext('html')
12 | .paths("./dist")
13 | .find((err, htmlFiles) => {
14 | if (err) return console.error('handle err', err);
15 |
16 | htmlFiles.forEach(function(filename) {
17 | fs.readFile(filename, function(err, content) {
18 | if (err) {
19 | throw err;
20 | }
21 | options.data = content;
22 | validator(options, (error, data) => {
23 | if (error) {
24 | console.error(error)
25 | }
26 |
27 | console.log(filename + '\n' + data)
28 | })
29 | });
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/generators/app/templates/sass-lint.yml:
--------------------------------------------------------------------------------
1 | files:
2 | include:
3 | - 'src/**/*.s+(a|c)ss'
4 |
5 | # Linter Options
6 | options:
7 | merge-default-rules: false
8 |
9 | # Rule Configuration
10 | rules:
11 | brace-style:
12 | - 2
13 | -
14 | style: 'stroustrup'
15 | clean-import-paths: 2
16 | extends-before-declarations: 2
17 | extends-before-mixins: 2
18 | final-newline: 2
19 | indentation:
20 | - 2
21 | -
22 | size: 4
23 | leading-zero:
24 | - 2
25 | -
26 | include: true
27 | no-css-comments: 2
28 | no-debug: 1
29 | no-empty-rulesets: 2
30 | no-ids: 1
31 | no-important: 1
32 | no-invalid-hex: 2
33 | no-misspelled-properties:
34 | - 2
35 | -
36 | extra-properties:
37 | - 'touch-callout'
38 | - 'overflow-scrolling'
39 | no-vendor-prefixes: 1
40 | no-warn: 1
41 | one-declaration-per-line: 2
42 | single-line-per-selector: 2
43 | space-after-colon: 2
44 | space-after-comma: 2
45 | space-around-operator: 2
46 | space-before-bang: 2
47 | space-before-brace: 2
48 | trailing-semicolon: 2
49 | zero-unit: 2
50 |
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/styles/atoms/_lists.scss:
--------------------------------------------------------------------------------
1 | %list-unstyled {
2 | li {
3 | display: block;
4 | }
5 | }
6 |
7 | %unordered-list {
8 | li {
9 | position: relative;
10 | padding-left: $indent-base;
11 |
12 | &::before {
13 | background-color: $color-secondary-dark;
14 | content: '';
15 | display: inline-block;
16 | height: 3px;
17 | left: 0;
18 | position: absolute;
19 | top: 6px;
20 | width: 3px;
21 | }
22 | }
23 | }
24 |
25 | %ordered-list {
26 | counter-reset: olNum;
27 |
28 | > li {
29 | counter-increment: olNum;
30 |
31 | &::before {
32 | content: counter(olNum) ". ";
33 | color: $color-secondary-dark;
34 | display: inline-block;
35 | width: 20px;
36 | }
37 | }
38 | }
39 |
40 | %list-inline {
41 | li {
42 | display: inline-block;
43 | }
44 | }
45 |
46 | ul {
47 | @extend %unordered-list;
48 | }
49 |
50 | ol {
51 | @extend %ordered-list;
52 | }
53 |
54 | ul,
55 | ol {
56 | @extend %list-unstyled;
57 |
58 | display: block;
59 | margin: 0 0 $indent-s 0;
60 | padding: 0;
61 | }
62 |
63 | .colors-list {
64 | @extend %list-inline;
65 |
66 | li {
67 | height: 30px;
68 | width: 30px;
69 | margin: $indent-xs;
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/styles/atoms/_buttons.scss:
--------------------------------------------------------------------------------
1 | .action {
2 | border-radius: $action-default-border-radius;
3 | border: 2px solid;
4 | color: $action-default-color;
5 | display: inline-block;
6 | font-weight: $action-default-font-weight;
7 | padding: $indent-base $indent-xl;
8 | text-decoration: none;
9 | transition: all 0.3s;
10 |
11 | &.primary {
12 | border-color: $action-primary-border;
13 | background-color: $action-primary-bg;
14 | color: $action-primary-color;
15 | }
16 |
17 | &.secondary {
18 | border-color: $action-secondary-border;
19 | background-color: $action-secondary-bg;
20 | color: $action-secondary-color;
21 | }
22 |
23 | &.primary,
24 | &.secondary {
25 | &:hover,
26 | &:focus {
27 | background-color: $action-default-hover-bg;
28 | color: $action-default-hover-color;
29 | border-color: $action-default-hover-border;
30 | }
31 | }
32 | }
33 |
34 | button {
35 | cursor: pointer;
36 |
37 | &:focus {
38 | outline: 0;
39 | }
40 | }
41 |
42 | .btn-burger {
43 | background: transparent;
44 | border: 0;
45 | padding: 0;
46 |
47 | span {
48 | @include burger(25px, 4px, 5px, $color-primary);
49 | }
50 |
51 | &.is-active {
52 | span {
53 | @include burger-to-cross;
54 | }
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/generators/app/templates/_karma.conf.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 |
3 | module.exports = function (config) {
4 | config.set({
5 | basePath: '',
6 | frameworks: ['jasmine'],
7 | files: [
8 | 'test/loadtests.js'
9 | ],
10 | exclude: [],
11 | preprocessors: {
12 | 'test/loadtests.js': ['webpack', 'sourcemap']
13 | },
14 | webpack: {
15 | module: {
16 | rules: [
17 | {
18 | test: /\.js$/,
19 | include: [
20 | path.resolve(__dirname, 'src'),
21 | path.resolve(__dirname, 'test')
22 | ],
23 | use: [{
24 | loader: 'babel-loader',
25 | options: {
26 | presets: [
27 | ['es2015', { modules: false }]
28 | ]
29 | }
30 | }]
31 | }
32 | ]
33 | }
34 | },
35 | reporters: ['progress'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: false,
40 | browsers: ['PhantomJS'],
41 | singleRun: true,
42 | concurrency: Infinity,
43 | plugins: [
44 | 'karma-webpack',
45 | 'karma-jasmine',
46 | 'karma-sourcemap-loader',
47 | 'karma-phantomjs-launcher'
48 | ]
49 | })
50 | };
51 |
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | # Generator-front-webpack
2 |
3 | > Yeoman generator for frontend apps - lets you quickly set up a project
4 | including dev server, unit tests and [Webpack](http://webpack.github.io/) module system.
5 |
6 | ## Features
7 |
8 | - Transpiling ES2015 to ES5 via Babel-Loader
9 | - Compiling SCSS/SASS to CSS
10 | - Autoprefixing styles via PostCSS
11 | - Automatic JavaScript code linting via esLint
12 | - Automatic Sass code linting via sasslint
13 | - HTML linting via html-validator
14 | - Web accessibility linting via AccessSniff
15 | - Ability to unit test JavaScript code via Karma and Jasmine
16 | - Automatic generation of sass documentation via sassdoc
17 |
18 | ## Installation
19 | ```bash
20 | # Make sure is installed globally
21 | npm install -g yo
22 | npm install -g generator-front-webpack
23 | npm install -g karma-cli
24 | ```
25 |
26 | ## Setting up projects
27 | ```bash
28 | # Create a new directory, and `cd` into it:
29 | mkdir new-project && cd new-project
30 |
31 | # setting up project
32 | yo front-webpack
33 | ```
34 |
35 | ### Commands
36 |
37 | #### Dev server
38 |
39 | Run dev server: `$ npm start`
40 | Open `http://localhost:8080/` to see compiled app.
41 |
42 | #### Build app
43 |
44 | If you want to build files without dev server run command `$ npm run build`
45 |
46 | #### Test app
47 |
48 | If you want test your app enter `$npm test`
49 |
50 | This command including:
51 |
52 | - unit testing
53 | - js linting
54 | - sass linting
55 | - html validation
56 | - web accessibility linting
57 |
58 | If you want run only one kind of a test you can use one of these commands:
59 |
60 | ##### Unit testing
61 |
62 | `$ karma start`
63 |
64 | ##### JavaScript linting
65 |
66 | `$ npm start eslint`
67 |
68 | ##### SASS linting
69 |
70 | `$ npm run sasslint`
71 |
72 | ##### HTML validation
73 |
74 | `$ npm run htmllint`
75 |
76 | ##### Web accessibility linting
77 |
78 | `$ npm start accessibility`
79 |
80 | #### Creating sass documentation
81 |
82 | `$ npm run sassdoc`
83 |
84 | #### Open server to preview documentation
85 |
86 | `$ npm run docsserver`
87 |
--------------------------------------------------------------------------------
/generators/app/templates/_package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "generator-frontend-webpack",
3 | "version": "1.0.0",
4 | "description": "generator for frontend apps built on webpack",
5 | "main": "index.js",
6 | "scripts": {
7 | "prestart": "npm rebuild node-sass",
8 | "start": "webpack-dev-server --inline --content-base dist/ --open",
9 | "eslint": "./node_modules/.bin/eslint src/*.js",
10 | "accessibility": "node ./dev/accessibility-validation.js",
11 | "htmllint": "node ./dev/html-validator.js",
12 | "sasslint": "node ./node_modules/sass-lint/bin/sass-lint.js -v -q",
13 | "test": "npm run build && karma start && npm run eslint && npm run accessibility && npm run htmllint && npm run sasslint",
14 | "build": "rm -rf dist/ && webpack -p",
15 | "sassdoc": "node ./dev/sassdoc.js",
16 | "docsserver": "npm run sassdoc && webpack-dev-server --port 8010 --config webpack.docs.config.js --content-base ./docs/ --open"
17 | },
18 | "keywords": [
19 | "frontend",
20 | "webpack"
21 | ],
22 | "author": "Marcin Kwiatkowski",
23 | "license": "ISC",
24 | "devDependencies": {
25 | "access-sniff": "^3.0.1",
26 | "autoprefixer": "^6.7.7",
27 | "babel-core": "^6.23.1",
28 | "babel-eslint": "^7.1.1",
29 | "babel-loader": "^6.4.0",
30 | "babel-preset-es2015": "^6.22.0",
31 | "css-loader": "^0.26.4",
32 | "cssnano": "^3.10.0",
33 | "eslint": "^3.18.0",
34 | "extract-loader": "^0.1.0",
35 | "extract-text-webpack-plugin": "^2.0.0-beta.4",
36 | "file-loader": "^0.10.1",
37 | "filehound": "^1.16.0",
38 | "html-loader": "^0.4.5",
39 | "html-validator": "^2.2.0",
40 | "jasmine-core": "^2.5.2",
41 | "karma": "^1.5.0",
42 | "karma-jasmine": "^1.1.0",
43 | "karma-phantomjs-launcher": "^1.0.4",
44 | "karma-sourcemap-loader": "^0.3.7",
45 | "karma-webpack": "^2.0.3",
46 | "node-sass": "^4.5.2",
47 | "postcss-loader": "^1.3.3",
48 | "sass-lint": "^1.10.2",
49 | "sass-loader": "^6.0.3",
50 | "style-loader": "^0.13.2",
51 | "url-loader": "^0.5.8",
52 | "webpack": "^2.2.1",
53 | "webpack-dev-server": "^2.0.0-beta",
54 | "sassdoc": "^2.2.2"
55 | },
56 | "dependencies": {}
57 | }
58 |
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/styles/vendor/_burger.scss:
--------------------------------------------------------------------------------
1 | // Burger parts
2 | //
3 | // (---) top -> &::before
4 | // [---] middle -> &
5 | // (---) bottom -> &::after
6 |
7 |
8 |
9 | // Burger
10 | @mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: 0.3s) {
11 | $burger-height: $height !global;
12 | $burger-gutter: $gutter !global;
13 |
14 | position: relative;
15 | margin-top: $height + $gutter;
16 | margin-bottom: $height + $gutter;
17 | user-select: none;
18 |
19 | // 1. Fixes jagged edges in Firefox, see issue #10.
20 | &,
21 | &::before,
22 | &::after {
23 | display: block;
24 | width: $width;
25 | height: $height;
26 | background-color: $color;
27 | outline: 1px solid transparent; // 1
28 | @if $border-radius != 0 {
29 | border-radius: $border-radius;
30 | }
31 | transition-property: background-color, transform;
32 | transition-duration: $transition-duration;
33 | }
34 |
35 | &::before,
36 | &::after {
37 | position: absolute;
38 | content: "";
39 | }
40 |
41 | &::before {
42 | top: -($height + $gutter);
43 | }
44 |
45 | &::after {
46 | top: $height + $gutter;
47 | }
48 | }
49 |
50 |
51 | // Select parts of the burger
52 | @mixin burger-parts {
53 | &,
54 | &::before,
55 | &::after {
56 | @content;
57 | }
58 | }
59 |
60 | @mixin burger-top {
61 | &::before {
62 | @content;
63 | }
64 | }
65 |
66 | @mixin burger-middle {
67 | & {
68 | @content;
69 | }
70 | }
71 |
72 | @mixin burger-bottom {
73 | &::after {
74 | @content;
75 | }
76 | }
77 |
78 |
79 | // Burger animations
80 | @mixin burger-to-cross($color: auto) {
81 | & {
82 | background-color: transparent;
83 | }
84 |
85 | @if ($color != auto) {
86 | &::before,
87 | &::after {
88 | background-color: $color;
89 | }
90 | }
91 |
92 | &::before {
93 | transform: translateY($burger-gutter + $burger-height) rotate(45deg);
94 | }
95 |
96 | &::after {
97 | transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
98 | }
99 | }
100 |
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/styles/atoms/_typography.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,400i,600,700');
2 |
3 | .ui-title {
4 | font-weight: 700;
5 | font-size: $font-size-xxl;
6 | color: $color-dark;
7 | letter-spacing: 1.37px;
8 | text-transform: uppercase;
9 | }
10 |
11 | %heading-base {
12 | font-weight: 700;
13 | color: $color-primary;
14 | line-height: 32px;
15 | }
16 |
17 | h1,
18 | %h1 {
19 | @extend %heading-base;
20 |
21 | font-size: 24px;
22 | margin: $indent-l 0;
23 | line-height: 32px;
24 | }
25 |
26 | h2,
27 | %h2 {
28 | @extend %heading-base;
29 |
30 | font-size: 22px;
31 | margin: $indent-l 0;
32 | line-height: 28px;
33 | }
34 |
35 | h3,
36 | %h3 {
37 | @extend %heading-base;
38 |
39 | font-size: $font-size-xl;
40 | margin: $indent-base 0;
41 | line-height: $line-height-l;
42 | }
43 |
44 | h4,
45 | %h4 {
46 | @extend %heading-base;
47 |
48 | font-weight: 600;
49 | font-size: $font-size-xl;
50 | margin: $indent-base 0;
51 | line-height: $line-height-l;
52 | }
53 |
54 | h5,
55 | %h5 {
56 | @extend %heading-base;
57 |
58 | font-weight: 600;
59 | font-size: 17px;
60 | margin: $indent-base 0;
61 | line-height: $line-height-l;
62 | }
63 |
64 | h6,
65 | %h6 {
66 | @extend %heading-base;
67 |
68 | font-weight: 600;
69 | font-size: $font-size-l;
70 | margin: $indent-base 0;
71 | line-height: $line-height-l;
72 | }
73 |
74 | p,
75 | %paragraph {
76 | color: $color-typography;
77 | font-size: $font-size-base;
78 | line-height: $line-height-base;
79 |
80 | &.lead {
81 | font-size: $font-size-l;
82 | line-height: $line-height-l;
83 | }
84 |
85 | &.less {
86 | font-size: $font-size-s;
87 | line-height: $line-height-s;
88 | }
89 | }
90 |
91 | blockquote {
92 | color: $color-secondary-dark;
93 | font-size: $font-size-l;
94 | font-style: italic;
95 | margin: $indent-base 0;
96 | line-height: $line-height-l;
97 | padding-left: $indent-xl;
98 | position: relative;
99 |
100 | &::before {
101 | background-color: $color-secondary-dark;
102 | bottom: 0;
103 | content: '';
104 | height: 100%;
105 | left: 0;
106 | position: absolute;
107 | top: 0;
108 | width: 10px;
109 | }
110 |
111 | footer {
112 | font-size: $font-size-s;
113 | margin-top: $indent-s;
114 | line-height: $line-height-xs;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/generators/app/templates/_webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const path = require('path');
3 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
4 | const extractCSS = new ExtractTextPlugin('assets/styles/[name].bundle.css');
5 | const postCSSOptions = require('./postcss.config.js');
6 |
7 | const extractCommons = new webpack.optimize.CommonsChunkPlugin({
8 | name: 'commons',
9 | filename: 'assets/js/commons.js'
10 | });
11 |
12 | const config = {
13 | context: path.resolve(__dirname, 'src'),
14 | entry: {
15 | index: './index.js',
16 | uikit: './uikit.js',
17 | contact: './contact.js'
18 | },
19 | output: {
20 | path: path.resolve(__dirname, 'dist'),
21 | filename: 'assets/js/[name].bundle.js'
22 | },
23 | module: {
24 | rules: [
25 | {
26 | test: /\.js$/,
27 | include: path.resolve(__dirname, 'src'),
28 | use: [{
29 | loader: 'babel-loader',
30 | options: {
31 | presets: [
32 | ['es2015', { modules: false }]
33 | ]
34 | }
35 | }]
36 | },
37 | {
38 | test: /\.scss$/,
39 | loader: extractCSS.extract([
40 | {
41 | loader: 'css-loader'
42 | },
43 | {
44 | loader: 'postcss-loader',
45 | options: postCSSOptions
46 | },
47 | {
48 | loader: 'sass-loader'
49 | }
50 | ])
51 | },
52 |
53 | {
54 | test: /\.(png|jpg)$/,
55 | use: [{
56 | loader: 'file-loader?name=assets/images/[name].[ext]'
57 | }]
58 | },
59 | {
60 | test: /(^-partial)?\.html$/,
61 | use: [
62 | {
63 | loader: 'file-loader',
64 | options: {
65 | name: '[name].[ext]'
66 | }
67 | },
68 | {
69 | loader: 'extract-loader'
70 | },
71 | {
72 | loader: 'html-loader',
73 | options: {
74 | interpolate: true,
75 | attrs: ['img:src']
76 | }
77 | }
78 | ]
79 | }
80 |
81 | ]
82 | },
83 | plugins: [
84 | new webpack.NamedModulesPlugin(),
85 | extractCSS,
86 | extractCommons
87 | ]
88 | };
89 |
90 | module.exports = config;
--------------------------------------------------------------------------------
/generators/app/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | var Generator = require('yeoman-generator');
3 | var chalk = require('chalk');
4 | var yosay = require('yosay');
5 |
6 | module.exports = class extends Generator {
7 | constructor(args, opts) {
8 | // Calling the super constructor is important so our generator is correctly set up
9 | super(args, opts)
10 | }
11 |
12 | init () {
13 | this.log(yosay(
14 | 'Welcome to the peachy ' + chalk.red('generator-frontend-webpack')
15 | ));
16 |
17 | }
18 |
19 | writing () {
20 | // Have Yeoman greet the user.
21 | this.log(yosay(
22 | 'Welcome to the peaafachy ' + chalk.red('generator-frontend-webpack')
23 | ));
24 | this.fs.copy(
25 | this.templatePath('_package.json'),
26 | this.destinationPath('package.json')
27 | );
28 | this.fs.copy(
29 | this.templatePath('sass-lint.yml'),
30 | this.destinationPath('.sass-lint.yml')
31 | );
32 | this.fs.copy(
33 | this.templatePath('eslintrc'),
34 | this.destinationPath('.eslintrc')
35 | );
36 | this.fs.copy(
37 | this.templatePath('gitignore'),
38 | this.destinationPath('.gitignore')
39 | );
40 | this.fs.copy(
41 | this.templatePath('_karma.conf.js'),
42 | this.destinationPath('karma.conf.js')
43 | );
44 | this.fs.copy(
45 | this.templatePath('_postcss.config.js'),
46 | this.destinationPath('postcss.config.js')
47 | );
48 | this.fs.copy(
49 | this.templatePath('_webpack.config.js'),
50 | this.destinationPath('webpack.config.js')
51 | );
52 | this.fs.copy(
53 | this.templatePath('_webpack.docs.config.js'),
54 | this.destinationPath('webpack.docs.config.js')
55 | );
56 | this.fs.copy(
57 | this.templatePath('design/**'),
58 | this.destinationPath('design')
59 | );
60 | this.fs.copy(
61 | this.templatePath('dev/**'),
62 | this.destinationPath('dev')
63 | );
64 | this.fs.copy(
65 | this.templatePath('src/**'),
66 | this.destinationPath('src')
67 | );
68 | this.fs.copy(
69 | this.templatePath('test/**'),
70 | this.destinationPath('test')
71 | );
72 | this.fs.copy(
73 | this.templatePath('docs/**'),
74 | this.destinationPath('docs')
75 | );
76 | }
77 |
78 | install () {
79 | this.installDependencies({
80 | bower: false
81 | });
82 | }
83 |
84 | end () {
85 | if (!this.options['skip-install']) {
86 | this.log(chalk.green('All is done! Thank you for using Frodigo Frontend-webpack generator! Enter `npm start` to start development'));
87 | }
88 | }
89 | };
--------------------------------------------------------------------------------
/generators/app/templates/src/templates/uikit.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Ui kit
11 |Colors
13 |-
14 |
15 |
16 |
17 |
18 |
19 |
20 |
Typography
24 | 25 |Heading 1
26 |Heading 2
27 |Heading 3
28 |Heading 4
29 |Heading 5
30 |Heading 6
31 | 32 |33 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tellus est, rutrum et urna sed, 34 | hendrerit consectet dolor. Fusce cursus est vitae sapien suscipit, non scelerisque diam lobortis. 35 | Ut leo velit, semper id pharetra non, convallis quis libero. Donec magna metus, feugiat ut vestibulum in. 36 |
37 | 38 |39 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tellus est, rutrum et urna sed, 40 | hendrerit consectetur dolor. Fusce cursus est vitae sapien suscipit, non scelerisque diam lobortis. 41 | Ut leo velit, semper id pharetra non, convallis quis libero. Donec magna metus, feugiat ut vestibulum in. 42 |
43 | 44 |45 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tellus est, rutrum et urna sed, 46 | hendrerit consectetur dolor. Fusce cursus est vitae sapien suscipit, non scelerisque diam lobortis. 47 | Ut leo velit, semper id pharetra non, convallis quis libero. Donec magna metus, feugiat ut vestibulum in. 48 |
49 |53 | Blocquote 54 |
55 | 56 |57 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tellus est, rutrum et urna sed, 58 | hendrerit consectetur dolor. Fusce cursus est vitae sapien suscipit, non scelerisque diam lobortis. 59 | Ut leo velit, semper id pharetra non, convallis quis libero. Donec magna metus, feugiat ut vestibulum in. 60 | 61 | 62 |63 |
Lists
67 | 68 |-
69 |
- Apple 70 |
- Banana 71 |
- Orange 72 |
- Pear 73 |
-
76 |
- Apple 77 |
- Banana 78 |
- Orange 79 |
- Pear 80 |