Fluffy

Css Framework/theme using bootstrap

• framework used bootstrap
• Preprocessor
  • Less
  • Stylus
  • Sass

Directory Structure

• src : folder to keep our source files
• dist : folder to keep our compiled files

Gulp Guide

• https://fettblog.eu/gulp-4-parallel-and-series/

HOW TO Contribute

• Edit sass file from src/scss with the help of sass docs
• run gulp in the terminal.

Choice preprocessor

• sass
• bourbon/compass

Methodology

• Scalable and Modular Architecture for CSS (SMACSS) https://smacss.com/
• Object Oriented CSS (OOCSS) http://oocss.org/
• Block Element Modifier (BEM) https://en.bem.info/

Terminology

• CSS Specificity
• CSS Selectors
  • Attributes with exact value [attribute="value"]
  • Attributes which begin with [attribute^="value"]
  • Whitespace separated attribute values [attribute~="value"]
  • Attribute values ending with [attribute$="value"]
  • Attributes containing strings [attribute*="value"]
• Traditional box model
• CSS Position Property
• Floating Elements
• Display Types
• Responsive
• Sprite CSS
• base64 images
• Email Template
  • Zurb Foundation
• UnCss

Cross-browser Compatibility Test

• https://crossbrowsertesting.com/
• https://www.browserling.com/
• https://www.browserstack.com/
• http://caniuse.com/
• create virtual box and test with browser you want.

Road map

• Get final product independent of bootstrap

References

• http://themes.guide/
• https://medium.com/@iampuredanger/customize-bootstrap-4-sass-w-gulp-95098f13333
• https://themestr.app/
• https://uxplanet.org/how-to-customize-bootstrap-b8078a011203
• http://bootstrap.themes.guide/how-to-customize-bootstrap.html