├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmrc ├── .pug-lintrc.json ├── .stylelintrc ├── .travis.yml ├── .vuegenerator ├── .woloxci ├── Dockerfile └── config.yml ├── CONTRIBUTING.md ├── Jenkinsfile ├── LICENSE ├── README.md ├── backstop.json ├── circle.yml ├── internal ├── ADDING_GOOGLE_ANALYTICS.md ├── CSS_REGRESSION_TESTING.md ├── FEA_open_source_sm.png └── TROUBLESHOOTING.md ├── package-lock.json ├── package.json ├── pull_request_template.md ├── script ├── bootstrap.js └── bootstrapFileManager.js ├── src ├── assets │ ├── wolox_bg.png │ └── wolox_logo.svg ├── components │ └── Example.vue ├── robots.txt ├── scss │ ├── application.scss │ ├── base.scss │ └── variables │ │ └── _colors.scss ├── serviceWorkerInstaller.js └── views │ └── index │ ├── index.js │ ├── index.pug │ └── index.scss ├── templates ├── component │ └── {name_pc}.vue └── view │ └── {name_sc} │ ├── {name_sc}.js │ ├── {name_sc}.pug │ └── {name_sc}.scss ├── webpack.config.js └── webpack.config.prod.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-object-rest-spread", 4 | "dynamic-import-webpack", 5 | "syntax-dynamic-import" 6 | ], 7 | "presets": [ 8 | ["env", { 9 | "targets": [ 10 | "last 2 versions", "safari >= 7", "not ie < 9" 11 | ] 12 | }] 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/** 2 | /script/** 3 | /gulp/** 4 | test.js 5 | !.eslintrc.js 6 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "wolox-vue" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # npm dependencies 2 | node_modules 3 | 4 | # npm log file 5 | npm-debug.log 6 | 7 | # compiled code folder 8 | build 9 | 10 | # webpack monitor results 11 | monitor 12 | 13 | # aws keys file 14 | config/aws.js 15 | 16 | # config keys 17 | config/secrets.js 18 | 19 | # mac files 20 | .DS_Store 21 | 22 | # deploy cache 23 | .awspublish* 24 | 25 | #Backstopjs images 26 | backstop_data 27 | 28 | #IDE files 29 | .vscode 30 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.pug-lintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "pug-lint-config-wolox" 3 | } 4 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "processors": ["stylelint-processor-html"], 3 | "extends": "stylelint-config-wolox" 4 | } 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.12" 4 | 5 | install: 6 | - npm i 7 | 8 | script: 9 | - ./node_modules/.bin/gulp ci:js 10 | - ./node_modules/.bin/gulp ci:sass 11 | - ./node_modules/.bin/gulp ci:pug 12 | 13 | cache: 14 | directories: 15 | - node_modules 16 | -------------------------------------------------------------------------------- /.vuegenerator: -------------------------------------------------------------------------------- 1 | { 2 | "viewDestination": "./src/views/", 3 | "storeDestination": "./src/store/module/", 4 | "componentDestination": "./src/components/", 5 | "templatePath": "./templates/" 6 | } 7 | -------------------------------------------------------------------------------- /.woloxci/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:8.5.0 2 | 3 | WORKDIR /usr/src/app 4 | 5 | ENV NODE_ENV development 6 | 7 | ENV HOME /usr/src/app 8 | 9 | RUN mkdir -p /install 10 | 11 | ENV NODE_PATH=/install/node_modules 12 | 13 | # Install app dependencies 14 | # A wildcard is used to ensure both package.json AND package-lock.json are copied 15 | # where available (npm@5+) 16 | COPY package*.json /install/ 17 | 18 | WORKDIR /install 19 | 20 | RUN npm i 21 | # If you are building your code for production 22 | # RUN npm install --only=production 23 | 24 | WORKDIR /usr/src/app 25 | 26 | # Bundle app source 27 | COPY . . 28 | -------------------------------------------------------------------------------- /.woloxci/config.yml: -------------------------------------------------------------------------------- 1 | config: 2 | dockerfile: .woloxci/Dockerfile 3 | project_name: frontend-bootstrap 4 | 5 | steps: 6 | copy_node_modules: 7 | - cp -r $NODE_PATH/ ./ 8 | lint: 9 | - cd /install 10 | - npm run precommit 11 | 12 | deploy: 13 | copy_node_modules: 14 | - cp -r $NODE_PATH/ ./ 15 | s3_push: 16 | - echo $AWS_ACCESS_KEY_ID 17 | - echo $AWS_SECRET_ACCESS_KEY 18 | - gulp s3 --env stage 19 | 20 | environment: 21 | GIT_COMMITTER_NAME: a 22 | GIT_COMMITTER_EMAIL: b 23 | LANG: C.UTF-8 24 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | First off, thank you for considering contributing to this project! Now, to start contributing: 4 | 5 | ## Issues and suggestions 6 | 7 | If you either find a bug or have any suggestion or opinion you want to discuss and share, please open an issue and add the proper label to it so we can get in contact with you. 8 | There are no wrong opinions! All feedback is welcome to make this the most suitable tool for you to use and for us to grow. 9 | 10 | ## How to contribute 11 | 12 | If you have a new feature you want to add or a bug you think you can fix, follow this steps: 13 | 14 | 1. Fork the repo 15 | 2. Create your feature branch (`git checkout -b my-new-feature`) 16 | 3. Commit your changes (`git commit -am 'Add some feature'`) 17 | 4. Push to the branch (`git push origin my-new-feature`) 18 | 5. Create new Pull Request with **clear title and description** 19 | 20 | ## Installation 21 | 22 | To dev this project and see changes on the fly, simply use the script 23 | 24 | ```bash 25 | npm start 26 | ``` 27 | 28 | ## Documentation 29 | 30 | If you are adding a new feature, you **must** add the documentation for it, showing how to use it. 31 | -------------------------------------------------------------------------------- /Jenkinsfile: -------------------------------------------------------------------------------- 1 | @Library('wolox-ci') _ 2 | 3 | node { 4 | 5 | checkout scm 6 | 7 | woloxCi('.woloxci/config.yml'); 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 Gabriel Zanzotti , 2 | Martín Callegari , 3 | Francisco Iglesias 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![FEArmy](./internal/FEA_open_source_sm.png)](https://github.com/orgs/Wolox/teams/front-end-army/members) 2 | # Frontend Bootstrap 3 | Kickoff for landing pages & multi-page websites. 4 | 5 | ## Main Tools 6 | 7 | + [Webpack](https://webpack.js.org/) 8 | + [Babel](https://babeljs.io/) 9 | + [Pug](https://pugjs.org) 10 | + [Sass](http://sass-lang.com) 11 | + [VueJS](https://vuejs.org/) 12 | + [ESLint](http://eslint.org/) 13 | 14 | ## First steps 15 | #### Installing node 16 | Get the latest version of node from the [official website](https://nodejs.org/) or using [nvm](https://github.com/creationix/nvm) 17 | Nvm approach is preferred. Also, you may find this [tool](https://github.com/wbyoung/avn) useful to automate version changing between projects. 18 | 19 | #### Getting the dev dependencies 20 | Run `npm i` from rootpath of the project. 21 | 22 | ## Development 23 | 24 | #### Run the project 25 | After doing `npm i`, execute `npm start`. This will run the project instance in: 26 | ``` 27 | http://localhost:3000/ 28 | ``` 29 | 30 | We use HTTPS protocol to make our site secure and also because it's required for some cool webpack configurations and it will allow us to develop a custom service worker. 31 | 32 | #### SCSS 33 | When creating SCSS files you don't need to import other files inside yours to use properties from them. There's a specific file called `application.scss` where every SCSS file should be imported in the desired priority order. This works just like the stylesheet elements in the head of an html, when repeated rules are present the rule that was imported last will override the other. 34 | 35 | ## Further reading 36 | Check the docs folder for extra help on usual tasks or issues: 37 | - [Adding google analytics](internal/ADDING_GOOGLE_ANALYTICS.md) 38 | - [Troubleshooting](internal/TROUBLESHOOTING.md) 39 | - [Maintenance mode](internal/MAINTENANCE_MODE.md) 40 | 41 | ## Contributing 42 | 43 | check [this](./CONTRIBUTING.md) document. 44 | 45 | ## About 46 | 47 | This project is maintained by [The Front-End Army](https://github.com/orgs/Wolox/teams/front-end-army) and it was written by [Wolox](http://www.wolox.com.ar). 48 | 49 | ![Wolox](https://raw.githubusercontent.com/Wolox/press-kit/master/logos/logo_banner.png) 50 | -------------------------------------------------------------------------------- /backstop.json: -------------------------------------------------------------------------------- 1 | { 2 | "viewports": [ 3 | { 4 | "name": "notebook M", 5 | "width": 1366, 6 | "height": 768 7 | } 8 | ], 9 | "scenarios": [ 10 | { 11 | "label": "My Homepage", 12 | "url": "http://localhost:3000", 13 | "selectors": [ 14 | "document" 15 | ], 16 | "readyEvent": null, 17 | "delay": 5000, 18 | "misMatchThreshold" : 0.1, 19 | "onBeforeScript": "onBefore.js", 20 | "onReadyScript": "onReady.js" 21 | } 22 | ], 23 | "paths": { 24 | "bitmaps_reference": "../../backstop_data/bitmaps_reference", 25 | "bitmaps_test": "../../backstop_data/bitmaps_test", 26 | "compare_data": "../../backstop_data/bitmaps_test/compare.json", 27 | "casper_scripts": "../../backstop_data/casper_scripts" 28 | }, 29 | "engine": "slimerjs", 30 | "report": ["CLI", "browser"], 31 | "casperFlags": [], 32 | "debug": false, 33 | "port": 3333 34 | } 35 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 8.5.0 4 | dependencies: 5 | override: 6 | - yarn 7 | test: 8 | override: 9 | - npm rebuild node-sass 10 | -------------------------------------------------------------------------------- /internal/ADDING_GOOGLE_ANALYTICS.md: -------------------------------------------------------------------------------- 1 | ### Google Analytics 2 | First add the following code snippet to the head of **index.pug** 3 | 4 | ```jade 5 | script. 6 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 7 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 8 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 9 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 10 | 11 | ga('create', '', { 12 | 'cookieDomain': 'none' 13 | }); 14 | ga('send', 'pageview'); 15 | ``` 16 | 17 | Then, in order to monitor your page by google analytics set the GOOGLE_ANALYTICS_TRACK_ID with the tracking id in each secrets file in the `config` folder at the root of the project. 18 | -------------------------------------------------------------------------------- /internal/CSS_REGRESSION_TESTING.md: -------------------------------------------------------------------------------- 1 | ### CSS Regresion Testing 2 | If you want to test how your views change according to the changes in your css we are using [BackstopJS](https://github.com/garris/BackstopJS), so follow this instructions: 3 | 4 | - Add the views you want to test in the scenarios array inside the ```backstop.json``` file. 5 | - Go to ```node_modules/backstopjs``` 6 | - Run ```npm run reference``` to generate reference images 7 | - Run ```npm run test``` to check the images again. Your browser will show a report with the image diffs, so if there's an error fix it and run the reference command again. 8 | -------------------------------------------------------------------------------- /internal/FEA_open_source_sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolox/frontend-bootstrap/2c0414ca97ec2be4b18214ef13188baec9426c43/internal/FEA_open_source_sm.png -------------------------------------------------------------------------------- /internal/TROUBLESHOOTING.md: -------------------------------------------------------------------------------- 1 | ### Troubleshooting 2 | 3 | #### npm permissions 4 | If you are struggling with permission problems when using npm, you can try the following commands to avoid using ```sudo``` every time you have this troubles. 5 | 6 | ```bash 7 | sudo chown -R $USER ~/.npm 8 | ``` 9 | ```bash 10 | sudo chown -R $USER . 11 | ``` 12 | #### Incorrect node version 13 | If ```Unexpected token``` error occurs when you try to commit, please make sure you have installed nvm with node version 10 or higher as default. 14 | Use this command for get current default version 15 | ```bash 16 | nvm alias default 17 | ``` 18 | Use this command for install specific node version (example with 10.16.0) 19 | ```bash 20 | nvm install 10.16.0 21 | ``` 22 | Use this command for set node version as default 23 | ```bash 24 | nvm alias default 10.16.0 25 | ``` 26 | Now try to commit. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend-bootstrap", 3 | "version": "1.0.0", 4 | "engines": { 5 | "node": ">= 10.15.3", 6 | "npm": ">= 6.9.0" 7 | }, 8 | "description": "Kickoff for multi-page web apps & landing pages", 9 | "scripts": { 10 | "start": "webpack-dev-server --config webpack.config.js", 11 | "build": "webpack --config webpack.config.prod.js", 12 | "pug-lint": "find ./src -name \\**.pug | xargs ./node_modules/.bin/pug-lint -c ./.pug-lintrc.json", 13 | "pug-lint-vue": "find ./src -name \\**.vue | xargs ./node_modules/.bin/pug-lint-vue -c ./.pug-lintrc.json", 14 | "es-lint": "find ./src -name \\**.vue | xargs ./node_modules/eslint/bin/eslint.js && find ./src -name \\**.js | xargs ./node_modules/eslint/bin/eslint.js", 15 | "style-lint": "find ./src -name \\**.scss | xargs ./node_modules/.bin/stylelint --config .stylelintrc --syntax scss", 16 | "style-lint-vue": "find ./src -name \\**.vue | xargs ./node_modules/.bin/stylelint --config .stylelintrc --syntax scss", 17 | "precommit": "npm run pug-lint && npm run pug-lint-vue && npm run es-lint && npm run style-lint && npm run style-lint-vue", 18 | "create-view": "vg view", 19 | "create-component": "vg component" 20 | }, 21 | "cacheDirectories": [ 22 | "node_modules" 23 | ], 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/Wolox/frontend-bootstrap.git" 27 | }, 28 | "author": "Wolox", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/Wolox/frontend-bootstrap/issues" 32 | }, 33 | "homepage": "https://github.com/Wolox/frontend-bootstrap", 34 | "dependencies": { 35 | "eslint": "^5.9.0", 36 | "eslint-plugin-vue": "^5.0.0-beta.4", 37 | "vue": "^2.5.17", 38 | "wolox-equalizer": "0.0.2" 39 | }, 40 | "devDependencies": { 41 | "autoprefixer": "^8.2.0", 42 | "babel-core": "^6.26.0", 43 | "babel-eslint": "^7.1.1", 44 | "babel-loader": "^7.1.4", 45 | "babel-plugin-dynamic-import-webpack": "^1.0.2", 46 | "babel-plugin-syntax-dynamic-import": "^6.18.0", 47 | "babel-plugin-transform-object-rest-spread": "^6.8.0", 48 | "babel-preset-env": "^1.6.1", 49 | "clean-webpack-plugin": "^0.1.19", 50 | "css-loader": "^0.28.11", 51 | "dotenv-webpack": "^1.5.7", 52 | "eslint-config-wolox": "^2.2.1", 53 | "eslint-config-wolox-vue": "^1.0.8", 54 | "eslint-loader": "^2.0.0", 55 | "eslint-plugin-prettier": "^3.0.0", 56 | "extract-loader": "^2.0.1", 57 | "file-loader": "^1.1.11", 58 | "glob": "^7.1.2", 59 | "html-loader": "^0.5.5", 60 | "html-webpack-plugin": "^3.2.0", 61 | "husky": "^0.14.3", 62 | "image-webpack-loader": "^4.2.0", 63 | "mini-css-extract-plugin": "^0.4.0", 64 | "node-sass": "^4.8.3", 65 | "optimize-css-assets-webpack-plugin": "^4.0.1", 66 | "postcss-flexbugs-fixes": "^3.3.0", 67 | "postcss-loader": "^2.1.3", 68 | "prompt": "^1.0.0", 69 | "pug": "^2.0.3", 70 | "pug-html-loader": "^1.1.5", 71 | "pug-lint": "^2.5.0", 72 | "pug-lint-config-wolox": "^1.0.0", 73 | "pug-lint-loader": "0.0.4", 74 | "pug-lint-vue": "^0.1.3", 75 | "pug-plain-loader": "^1.0.0", 76 | "replace": "^0.3.0", 77 | "require-dir": "^0.3.2", 78 | "resolve-url-loader": "^3.0.0", 79 | "sass-lint": "^1.12.1", 80 | "sass-loader": "^6.0.7", 81 | "style-loader": "^0.20.3", 82 | "stylelint": "^9.5.0", 83 | "stylelint-config-wolox": "^1.0.3", 84 | "stylelint-no-indistinguishable-colors": "^1.2.1", 85 | "stylelint-processor-html": "^1.0.0", 86 | "stylelint-scss": "^3.3.2", 87 | "uglifyjs-webpack-plugin": "^1.2.5", 88 | "url-loader": "^1.0.1", 89 | "vue-eslint-parser": "^3.2.2", 90 | "vue-generator": "^1.1.0", 91 | "vue-loader": "^15.4.2", 92 | "vue-pug-lint-loader": "0.0.1", 93 | "vue-template-compiler": "^2.5.17", 94 | "webpack": "^4.4.1", 95 | "webpack-bundle-analyzer": "^2.11.1", 96 | "webpack-cli": "^3.1.2", 97 | "webpack-dashboard": "^1.1.1", 98 | "webpack-dev-server": "^3.1.1", 99 | "webpack-monitor": "^1.0.14", 100 | "webpack-serve": "^0.3.1", 101 | "workbox-webpack-plugin": "^3.6.2" 102 | }, 103 | "husky": { 104 | "hooks": { 105 | "pre-commit": "npm run pug-lint-diff && npm run pug-lint-vue-diff && npm run es-lint-diff && npm run style-lint-diff" 106 | } 107 | }, 108 | "sassLintConfig": ".sass-lint.yml", 109 | "pugLingConfig": ".pug-lintrc" 110 | } 111 | -------------------------------------------------------------------------------- /pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Summary 2 | 3 | [Change!] Describe your feature, problems you had, notes, improvements and others. 4 | 5 | ## Screenshots 6 | 7 | [Change!] Show the screenshots of the views you modified. 8 | 9 | ## Trello Card 10 | 11 | [Change!] Link to the associated Trello card. 12 | -------------------------------------------------------------------------------- /script/bootstrap.js: -------------------------------------------------------------------------------- 1 | // Must be executed from same folder README is located 2 | var prompt = require('prompt'), 3 | bfm = require('./bootstrapFileManager'); 4 | 5 | prompt.colors = false; 6 | prompt.message = ''; 7 | prompt.delimiter = ''; 8 | prompt.start(); 9 | 10 | var config = { 11 | properties: { 12 | responsibleUsername: { 13 | pattern: /^[a-zA-Z0-9]+$/, 14 | message: 'Username must contain only alphanumeric characters.', 15 | description: 'Responsible Username:', 16 | required: true 17 | }, 18 | responsibleFullName: { 19 | pattern: /^([a-zA-Z]+[ ]?){2,13}$/g, 20 | message: 'Responsible full name must contain only letters.', 21 | description: 'Responsible Full Name:', 22 | required: true 23 | }, 24 | projectName: { 25 | pattern: /^[a-zA-Z\-]+$/, 26 | message: 'Name must be only letters or dashes.', 27 | description: 'Projects name:', 28 | required: true 29 | }, 30 | projectDescription: { 31 | description: 'Projects description:', 32 | required: false 33 | } 34 | } 35 | }; 36 | 37 | console.log('\nWelcome to the bootstrap script.'); 38 | console.log('\nPlease enter the following data.\n'); 39 | 40 | prompt.get(config, function (err, result) { 41 | 42 | if (err) { 43 | console.log('\nError found. Operation ' + err.message + '.'); 44 | } else { 45 | bfm.initReadme(result.responsibleUsername, result.responsibleFullName, result.projectName, result.projectDescription); 46 | bfm.initPackage(result.responsibleFullName, result.projectName, result.projectDescription); 47 | bfm.removeScripts(); 48 | } 49 | 50 | }); 51 | -------------------------------------------------------------------------------- /script/bootstrapFileManager.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | module.exports.initReadme = function (responsibleUername, responsibleFullName, projectName, projectDescription) { 4 | 5 | var readme = 'README.md'; 6 | fs.readFile(readme, 'utf8', function (err, data) { 7 | 8 | if (err) { 9 | return console.log(err); 10 | } 11 | 12 | var index; 13 | var result = data.replace(/Sebastian Balay/g, responsibleFullName) 14 | .replace(/sbalay/g, responsibleUername); 15 | 16 | result = result.toString(); 17 | result = result.split('\n'); 18 | 19 | result[0] = projectName; 20 | result[3] = projectDescription; 21 | 22 | index = result.indexOf('## Contributing'); 23 | result.splice(index, 8); 24 | 25 | index = result.indexOf('## License'); 26 | result = result.splice(0, index - 1) 27 | 28 | result = result.join('\n'); 29 | 30 | fs.writeFile(readme, result, 'utf8', function (err) { 31 | if (err) return console.log(err); 32 | }); 33 | }); 34 | 35 | } 36 | 37 | module.exports.initPackage = function (responsibleFullName, projectName, projectDescription) { 38 | 39 | var packagejson = 'package.json'; 40 | fs.readFile(packagejson, 'utf8', function (err, data) { 41 | 42 | if (err) { 43 | return console.log(err); 44 | } 45 | 46 | var result = JSON.parse(data); 47 | result['name'] = projectName; 48 | result['description'] = projectDescription 49 | result['author'] = responsibleFullName; 50 | result['repository']['url'] = 'https://github.com/Wolox/' + projectName + '.git' 51 | result['repository']['url'] = 'https://github.com/Wolox/' + projectName + '/issues'; 52 | result = JSON.stringify(result, null, ' ') + '\n'; 53 | 54 | fs.writeFile(packagejson, result, 'utf8', function (err) { 55 | if (err) return console.log(err); 56 | }); 57 | 58 | }); 59 | } 60 | 61 | module.exports.removeScripts = function () { 62 | deleteFolderRecursive('./script'); 63 | } 64 | 65 | function deleteFolderRecursive (path) { 66 | if(fs.existsSync(path)) { 67 | fs.readdirSync(path).forEach(function(file,index){ 68 | var curPath = path + '/' + file; 69 | if(fs.lstatSync(curPath).isDirectory()) { // recurse 70 | deleteFolderRecursive(curPath); 71 | } else { // delete file 72 | fs.unlinkSync(curPath); 73 | } 74 | }); 75 | fs.rmdirSync(path); 76 | } 77 | }; 78 | -------------------------------------------------------------------------------- /src/assets/wolox_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolox/frontend-bootstrap/2c0414ca97ec2be4b18214ef13188baec9426c43/src/assets/wolox_bg.png -------------------------------------------------------------------------------- /src/assets/wolox_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 15 | 16 | 22 | 24 | 25 | -------------------------------------------------------------------------------- /src/components/Example.vue: -------------------------------------------------------------------------------- 1 | 5 | 14 | 21 | -------------------------------------------------------------------------------- /src/robots.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolox/frontend-bootstrap/2c0414ca97ec2be4b18214ef13188baec9426c43/src/robots.txt -------------------------------------------------------------------------------- /src/scss/application.scss: -------------------------------------------------------------------------------- 1 | @import '~wolox-equalizer/equalizer'; 2 | 3 | @import 'variables/colors'; 4 | 5 | @import 'base'; 6 | -------------------------------------------------------------------------------- /src/scss/base.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:700'); 2 | 3 | [v-cloak] { // stylelint-disable-line selector-max-attribute 4 | display: none; 5 | } 6 | 7 | .page { 8 | align-items: center; 9 | background-color: $wolox-blue; 10 | background-image: url('../../assets/wolox_bg.png'); 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | padding: 100px 0; 15 | } 16 | 17 | .logo { 18 | max-width: 350px; 19 | margin-bottom: 50px; 20 | } 21 | 22 | .title { 23 | color: $white; 24 | font-size: 30px; 25 | font-weight: 500; 26 | font-family: Montserrat, sans-serif; 27 | } 28 | -------------------------------------------------------------------------------- /src/scss/variables/_colors.scss: -------------------------------------------------------------------------------- 1 | $wolox-green: #8DC63F; 2 | $wolox-blue: #00AFF4; 3 | $white: #FFF; 4 | -------------------------------------------------------------------------------- /src/serviceWorkerInstaller.js: -------------------------------------------------------------------------------- 1 | export function installServiceWorker() { 2 | if ('serviceWorker' in navigator) { 3 | window.addEventListener('load', () => { 4 | navigator.serviceWorker.register('/service-worker.js') 5 | }) 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/views/index/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import { installServiceWorker } from '../../serviceWorkerInstaller' 4 | 5 | const Example = () => import(/* webpackChunkName: "example" */ '../../components/Example') 6 | 7 | import './index.pug' 8 | import './index.scss' 9 | 10 | // eslint-disable-next-line 11 | const vm = new Vue({ 12 | el: '#app', 13 | components: { 14 | Example 15 | }, 16 | data: { 17 | title: 'Welcome to Frontend Bootstrap!' 18 | } 19 | }) 20 | 21 | if (process.env.NODE_ENV === 'production') { 22 | installServiceWorker() 23 | } 24 | -------------------------------------------------------------------------------- /src/views/index/index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang='en') 3 | head 4 | title title here 5 | meta(charset='UTF-8') 6 | meta(name='viewport' content='width=device-width, initial-scale=1') 7 | link(rel='preload' href='./index.js' as='script') 8 | link(rel='preload' href='./vendor.js' as='script') 9 | link(rel='preload' href='styles.index.css' as='style') 10 | link(rel='stylesheet' href='styles.index.css') 11 | script(src='./vendor.js') 12 | body 13 | #app(v-cloak) 14 | .page 15 | img.logo(src='./assets/wolox_logo.svg' alt='logo') 16 | h1.title 17 | | {{ title }} 18 | example 19 | script(src='./index.js') 20 | -------------------------------------------------------------------------------- /src/views/index/index.scss: -------------------------------------------------------------------------------- 1 | @import 'application'; 2 | -------------------------------------------------------------------------------- /templates/component/{name_pc}.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /templates/view/{name_sc}/{name_sc}.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import './{{name_sc}}.pug' 4 | import './{{name_sc}}.scss' 5 | 6 | const vm = new Vue({ 7 | el: '#app', 8 | data: { 9 | 10 | }, 11 | components: { 12 | 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /templates/view/{name_sc}/{name_sc}.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang='en') 3 | head 4 | title title here 5 | meta(charset='UTF-8') 6 | meta(name='viewport' content='width=device-width, initial-scale=1') 7 | link(rel='preload' href='{{name_sc}}.js' as='script') 8 | link(rel='preload' href='/vendor.js' as='script') 9 | link(rel='preload' href='/styles.{{name_sc}}.css' as='style') 10 | link(rel='stylesheet' href='/styles.{{name_sc}}.css') 11 | script(src='/vendor.js') 12 | body 13 | #app(v-cloak) 14 | .center 15 | h1 16 | | {{name_cc}} is working! 17 | script(src='{{name_cc}}.js') 18 | -------------------------------------------------------------------------------- /templates/view/{name_sc}/{name_sc}.scss: -------------------------------------------------------------------------------- 1 | @import 'application'; 2 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const webpack = require('webpack') 4 | const path = require('path') 5 | const CleanWebpackPlugin = require('clean-webpack-plugin') 6 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // eslint-disable-line prefer-destructuring 7 | const DotEnv = require('dotenv-webpack') 8 | const autoprefixer = require('autoprefixer') 9 | const glob = require('glob') 10 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 11 | 12 | const rootFiles = ['index', 'serviceWorkerInstaller', 'vendor'] 13 | 14 | const entry = glob 15 | .sync('./src/**/*.js') 16 | .reduce( 17 | (entries, entryFile) => Object.assign(entries, { [path.parse(entryFile).name]: entryFile }), 18 | {} 19 | ) 20 | 21 | module.exports = { 22 | entry, 23 | output: { 24 | filename: (chunkFileName) => rootFiles.some(file => file === chunkFileName.chunk.name) ? '[name].js' : '[name]/[name].js', 25 | path: path.resolve(__dirname, 'build') 26 | }, 27 | target: 'web', 28 | mode: 'development', 29 | devServer: { 30 | contentBase: path.resolve(__dirname, 'src'), 31 | watchContentBase: true, 32 | compress: true, 33 | port: 3000, 34 | hot: true 35 | }, 36 | resolve: { 37 | extensions: ['.js', '.vue'], 38 | alias: { 39 | vue: 'vue/dist/vue.js' 40 | } 41 | }, 42 | module: { 43 | rules: [ 44 | { 45 | test: /\.vue$/, 46 | loader: 'vue-loader' 47 | }, 48 | { 49 | enforce: 'pre', 50 | test: /\.pug$/, 51 | exclude: /node_modules/, 52 | use: { 53 | loader: 'vue-pug-lint-loader', 54 | options: require('./.pug-lintrc.json') 55 | } 56 | }, 57 | { 58 | test: /\.pug$/, 59 | oneOf: [ 60 | // this applies to `