scss-starter

Simple scss for my personal usage. It contain common styles, mixins, variables and other useful stuffs

Note: This is not only for personal usage

Structure of helper

• _pages
  • _index.scss
  • _single.scss
  • _other.scss
• _common
  • _device.scss
  • _utlities.scss
  • _buttons.scss
  • _form.scss
  • _mixins.scss
  • _keyframes.scss
    • _dashboard.scss
    • _table.scss
• main.scss

Main.scss

It load all scss styles, device.scss has breakpoints, variables has couple of color, width etc. utlitities has common useful classes like padding, margin and all useful styles.

Technologies

• ES6
• SASS/SCSS
• Gulp Babel
• PostCSS
• WebPack

Required packages

Install globally

sudo npm install typescript@latest  babel-cli@latest babel-core@latest babelify@latest browserify@latest gulp postcss -g

Install locally, dev dependencies

npm  install autoprefixer @babel/cli  @babel/core @babel/preset-env @babel/preset-react  babel-core babel-loader babel-core@^7.0.0-bridge.0 babelify browserify cssnano dotenv gulp gulp-babel gulp-browserify gulp-concat gulp-plumber gulp-postcss gulp-rename gulp-sass gulp-typescript gulp-uglify install postcss postcss-color-function typescript vinyl-buffer vinyl-source-stream browser-sync gulp-sourcemaps precss postcss-extend babel-preset-react postcss-simple-vars -D

Install locally, dependencies

npm install  bootstrap dropzone font-awesome foundation-sites highcharts jquery jquery-slimscroll popper.js slick-carousel -S

- Webpack 
- React 
- Post CSS
- ELM 
- WebPack