Skip to content

Scaffold boilerplate for web Design and rapid UX prototyping with Gulp 4, Browsersync and SASS

Notifications You must be signed in to change notification settings

Mr-Thunder/Scaffold-II-A-Gulp-4-boilerplate-for-rapid-prototyping-and-design

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Scaffold II - A Gulp 4 boilerplate for rapid prototyping and design

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.

Sacffold II

Features

Installation and Prerequisites

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

Tasks

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

Structure

|--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

Credits

License

MIT

Made with ⚡ by MrThunder