Backpack

The CSS starter toolkit

Features

Technologies

• Node.js
• Gulp
• Sass
• Bower
• PostCSS

CSS toolkit

• ITCSS architecture
• SUIT CSS naming convention
• Barebone styles
• Configurable class names
• Wireframe mode
• Generate settings file with Octophant (Coming Soon)

Getting Started

Install dependencies

npm start

Run the styleguide

gulp

Architecture

• build/: compiled HTML, CSS, and JavaScript – Don't edit files here, folder rebuilds on change
• assets/: project assets (CSS, JavaScript) – file structure to be redone
• docs/: project assets (CSS, JavaScript)
  • data/: Data files (menu, colors, icons) – not working at the moment
  • styleguide/: Styleguide files
    • components/: Styleguide Polymer components
    • layouts/: Styleguide layouts
    • styles/: Styleguide styles – needs cleanup
  • globals/: Project globals examples – can be rename
  • components/: Project components examples – can be rename
  • templates/: Project templates examples – can be rename
  • index.html: Project homepage
• gulpfile.js/: Gulp tasks
  • config.js: Styleguide configuration
  • index.js: Main gulpfile with global tasks
  • gulpfile.js/: Tasks files
• libs/: project dependencies (CSS, JavaScript)

TODO

CSS toolkit

• Integrate Guidebook as a dependency
• Define and create utilities/components
• Cleanup unnecessary CSS
• Recreate architecture following ITCSS principles
• Add these tasks to Github Issues
  • Manage with Waffle.io
• Create the wireframe theme
  • Like this
• Add Octophant to generate data about stylesheets
• Add better integration with Guidebook

Authors

Benoit Deziel - ben@benoitdeziel.com