Frontend-Boilerplates
Collection of Boilerplates with ES6, Vue, React, Nuxt, TypeScript, SCSS, Nodejs. Using good practices and file structures to inspire your real projects.
MIT License
Published by CKGrafico over 6 years ago
Info version 2.3.5
vue-master: Stable version of a Vuejs example with SCSS and TypeScript.
vue-dev: Dev version of a Vuejs example with SCSS and TypeScript.
Changes
Normalize template versions
Published by CKGrafico over 6 years ago
Info version 2.3.5
node-ts-master: Stable version of a Nodejs with TypeScript example with SCSS and Nodejs.
node-ts-dev: Dev version of a Nodejs with TypeScript example with SCSS and Nodejs.
Changes
Fix some issues
Improve readme
Published by CKGrafico over 6 years ago
Published by CKGrafico over 6 years ago
Info version 2.2.0
vue-master: Stable version of a Vuejs example with SCSS and TypeScript.
vue-dev: Dev version of a Vuejs example with SCSS and TypeScript.
Changes
Support .vue and .html/.scss/.ts files
Published by CKGrafico almost 7 years ago
Info version 2.2.0
vue-master: Stable version of a Vuejs example with SCSS and TypeScript.
vue-dev: Dev version of a Vuejs example with SCSS and TypeScript.
Changes
Improve IOC
Add Augmentation types
Update dependencies
Published by CKGrafico almost 7 years ago
Info version 2.1.1
ts-master: Stable version of a TypeScript example with SCSS.
ts-dev: Dev version of a TypeScript example with SCSS.
Changes
Fix some issues
Improve readme
Improve package.json
Published by CKGrafico almost 7 years ago
Info version 2.1.1
node-ts-master: Stable version of a Nodejs with TypeScript example with SCSS and Nodejs.
node-ts-dev: Dev version of a Nodejs with TypeScript example with SCSS and Nodejs.
Changes
Fix some issues
Improve readme
Improve package.json
Published by CKGrafico almost 7 years ago
Published by CKGrafico about 7 years ago
Improve tasks
Published by CKGrafico about 7 years ago
Improve automated tasks
Published by CKGrafico over 7 years ago
Use Webpack for scripts
Improve SASS mixins
Improve folder structure
Published by CKGrafico over 7 years ago
App Technologies
On this branch (Vue) we use:
- BEM + BEMIT + etc: A mix of BEM and related-BEM technologies to create conventions for CSS classes.
- TypeScript: This project uses TypeScript instead of JavaScript.
- Vue: The components framework.
- Linting: Linting for TypeScript and SASS.
- Normalize: Normalize our css, you can extend it easily.
- SASS: Scss structure with good practises.
Tasks Technologies
On this branch (Vue) we use:
- Gulp Autoprefixer: Add browser prefixes for last two versions of the browsers.
- Gulp Clean CSS: To minify CSS.
- Gulp Connect: Preview website on local server.
- Gulp Environment: Call to different tasks depending of the environment.
- Gulp Tslint: Linting for TypeScript.
- Gulp Fontmin: Generate fonts from .ttf.
- Gulp Imagemin: Compress images.
- Gulp Load plugins: Load all the plugins once.
- Gulp Newer: On some tasks we want to do something only with the newer files.
- Gulp Noop: Basic Noop but on stream.
- Gulp Sass: Compile Scss to CSS.
- Gulp Sasslint: Linting for SASS.
- Gulp Sourcemaps: Generate Sourcemaps when is necessary (only used with SCSS).
- Gulp Uglify: Minify and obfuscate JavaScript.
- Opn: Open browser to see the preview.
- Require all: Load all gulp tasks once.
- Browserify: To bundle our code.
- Yarn: Instead of NPM.
Published by CKGrafico over 7 years ago
App Technologies
On this branch (Basic) we use:
- BEM + BEMIT + etc: A mix of BEM and related-BEM technologies to create conventions for CSS classes.
- TypeScript: This project uses TypeScript instead of JavaScript.
- Linting: Linting for JavaScript and SASS.
- Normalize: Normalize our css, you can extend it easily.
- SASS: Scss structure with good practises.
Tasks Technologies
On this branch (Basic) we use:
- Gulp Autoprefixer: Add browser prefixes for last two versions of the browsers.
- Gulp Clean CSS: To minify CSS.
- Gulp Environment: Call to different tasks depending of the environment.
- Gulp Fontmin: Generate fonts from .ttf.
- Gulp Imagemin: Compress images.
- Gulp Load plugins: Load all the plugins once.
- Gulp Newer: On some tasks we want to do something only with the newer files.
- Gulp Nodemon: To launch the NodeJS application.
- Gulp Noop: Basic Noop but on stream.
- Gulp Rollup: To transpile out code.
- Gulp Sass: Compile Scss to CSS.
- Gulp Sasslint: Linting for SASS.
- Gulp Sourcemaps: Generate Sourcemaps when is necessary.
- Gulp TSLint: Linting for TypeScript.
- Gulp Uglify: Minify and obfuscate JavaScript.
- Opn: Open browser to see the preview.
- Require all: Load all gulp tasks once.
- Yarn: Instead of NPM.
Published by CKGrafico over 7 years ago
Update tslint
Update yarn
Normalize all versions
Published by CKGrafico over 7 years ago
Fix watcher
Update yarn
Normalize all versions
Published by CKGrafico over 7 years ago
App Technologies
- BEM + BEMIT + etc: A mix of BEM and related-BEM technologies to create conventions for CSS classes.
- TypeScript: This project uses TypeScript instead of JavaScript.
- jQuery: Only to show how to import an external library.
- Linting: Linting for TypeScript and SASS.
- Normalize: Normalize our css, you can extend it easily.
- SASS: Scss structure with good practises.
Tasks Technologies
- Gulp Autoprefixer: Add browser prefixes for last two versions of the browsers.
- Gulp Clean CSS: To minify CSS.
- Gulp Connect: Preview website on local server.
- Gulp Environment: Call to different tasks depending of the environment.
- Gulp Tslint: Linting for TypeScript.
- Gulp Fontmin: Generate fonts from .ttf.
- Gulp Imagemin: Compress images.
- Gulp Load plugins: Load all the plugins once.
- Gulp Newer: On some tasks we want to do something only with the newer files.
- Gulp Noop: Basic Noop but on stream.
- Gulp Sass: Compile Scss to CSS.
- Gulp Sasslint: Linting for SASS.
- Gulp Sourcemaps: Generate Sourcemaps when is necessary.
- Gulp Uglify: Minify and obfuscate JavaScript.
- Opn: Open browser to see the preview.
- Require all: Load all gulp tasks once.
- Gulp TypeScript: To compile TypeScript
- Yarn: Instead of NPM.
Published by CKGrafico almost 8 years ago
App Technologies
- BEM + BEMIT + etc: A mix of BEM and related-BEM technologies to create conventions for CSS classes.
- EcmaScript2015: All the code uses this version of ES, also gulp files.
- jQuery: Only to show how to import an external library.
- Linting: Linting for JavaScript and SASS.
- Normalize: Normalize our css, you can extend it easily.
- SASS: Scss structure with good practises.
Tasks Technologies
- Gulp Autoprefixer: Add browser prefixes for last two versions of the browsers.
- Gulp Clean CSS: To minify CSS.
- Gulp Connect: Preview website on local server.
- Gulp Environment: Call to different tasks depending of the environment.
- Gulp Eslint: Linting for JavaScript.
- Gulp Fontmin: Generate fonts from .ttf.
- Gulp Imagemin: Compress images.
- Gulp Load plugins: Load all the plugins once.
- Gulp Newer: On some tasks we want to do something only with the newer files.
- Gulp Noop: Basic Noop but on stream.
- Gulp Rollup: To transpile out code.
- Gulp Sass: Compile Scss to CSS.
- Gulp Sasslint: Linting for SASS.
- Gulp Sourcemaps: Generate Sourcemaps when is necessary.
- Gulp Uglify: Minify and obfuscate JavaScript.
- Opn: Open browser to see the preview.
- Require all: Load all gulp tasks once.
- Rollup Babel: To use Babel with Rollup (ES2015 -> ES5).
- Require CommonJS: Uses CommonJS for modules.
- Require Inject: Include external dependencies to our code.
- Require Node Resolve: Uses node resolution for path names.
- Yarn: Instead of NPM.