Scaffold II is a design focused gulp boilerplate that automates tasks to speed up workflow, such as SCSS, HTML and JS compilation and minification. It allows for experimental CSS with PostCSS Preset Env and follows and the recommended SASS 7-1 file architecture. Image optimisation, live reload across multiple devices and the latest jQuery, normalize.css and customisable modernizr are also included.
- gulp 4 Gulp is a build system or task runner that automates common tasks.
- browserSync Allows live reload and browser synchronization across multiple devices simultaneously
- gulp-sass Transforms CSS into SASS, using the SAAS 7-1 pattern
- gulp-imagemin Minifies images. Compresses GIF with Gifsicle, compresses JPEG Mozjpeg, compresses PNG with Optipng and compresses SVG with SVGO.
- gulp-modernizr Detects features in the user's browser.
- gulp-uglify Minifies JS.
- gulp-rename Allows renaming of files to add .min
- Jquery jQuery is a JavaScript library, that will be updated to the latest version via NPM
- node-normalize-scss Adds CSS reset for browsers via NPM
- cssnano Minifies CSS
- gulp-postcss PostCSS pipes CSS through other plugins such as Autoprefixer.
- autoprefixer Adds vendor prefixes to CSS
- gulp-sourcemaps Sourcemaps allow the browser to map CSS and JS generated by Sass and Uglify back to the original source file.
- gulp-cache A temp file based caching proxy, used to stop repeating Imagemin optimisations.
- del Allows cleaning and deleting of generated files.
- gulp-htmlmin Minifies HTML.
- gulp-concat Merges JS files.
- PostCSS-Preset-Env Use tomorrow’s CSS today
Node and gulp must be installed.
Node.js above 12.0.x.
Gulp above 4.0.x.
$ npm install --global gulp-cli
Install Scaffold II dependencies:
npm install
Compile the code for development, start local server, watch files for changes and automatically Refresh Across Devices:
gulp
Delete files in dist folder
gulp clean
Clear the cache
gulp clearCache
|--dist/ # → Static version of the website ready to upload (never edit)
|
|--gulpfile.js/ # → Gulpfile config and tasks
|--node_modules/ # → Node.js packages (never edit)
|--src/ # → Source files
| |--assets/ # → Assets
| | |--fonts/ # → Assets: Fonts
| | |--img/ # → Assets: Images
| | | |--favicon/ # → Assets: Favicons
| | |--videos/ # → Assets: Video
| |--js/ # → JS
| | |--plugins/ # → JS: Plugins
| | | |--modernizr.js # → Plugins: Modernizr file
| | |--global.js # → JS: Main file
| |--scss/ # → Styles: SASS 7-1 Architecture
| | |--abstracts/
| | | |--_variables.scss # → Abstracts: Sass Variables
| | | |--_functions.scss # → Abstracts: Sass Functions
| | | |--_mixins.scss # → Abstracts: Sass Mixins
| | | |--_placeholders.scss # → Abstracts: Sass Placeholders
| | |--base/
| | | |--_reset.scss # → Base: Reset - normalize.css
| | | |--_typography.scss # → Base: Typography rules
| | |--components/
| | | |--_buttons.scss # → Components: Buttons
| | | |--_carousel.scss # → Components: Carousel
| | | |--_cover.scss # → Components: Cover
| | | |--_dropdown.scss # → Components: Dropdown
| | | |--_loading-animation.scss # → Components: Animated Loader
| | |--layout/
| | | |--_navigation.scss # → Layout: Navigation
| | | |--_grid.scss # → Layout: Grid system
| | | |--_header.scss # → Layout: Header
| | | |--_footer.scss # → Layout: Footer
| | | |--_sidebar.scss # → Layout: Sidebar
| | | |--_forms.scss # → Layout: Forms
| | |--pages/
| | | |--_about.scss # → Pages: About specific styles
| | | |--_contact.scss # → Pages: Contact specific styles
| | | |--_home.scss # → Pages: Home specific styles
| | |--themes/
| | | |--_theme.scss # → Themes: Default theme
| | | |--_admin.scss # → Themes: Admin theme
| | |--vendors/
| | | |--_bootstrap.scss # → Vendors: Bootstrap
| | | |--_jquery-ui.scss # → Vendors: jQuery UI
| | |--main.scss # → SCSS: Main Sass file
| |--pages/ # → Pages
| | |--about.html # → Pages: HTML
|--.gitignore # → Gitignore
|--package-lock.json # → NPM lock file (never edit)
|--package.json # → Node.js dependencies and scripts
Made with ⚡ by MrThunder