form-component-lib with ITCSS

Form component library using the ITCSS architecture and Sass/SCSS and Gulp.js for local development workflow with Yarn as the node package manager. Local development workflow requres: Node.js, Yarn, and Gulp.js.

• ITCSS architecture resources
  • The Inverted Triangle Architecture: how to manage large CSS Projects
• Sass/SCSS resources
  • CSS with superpowers
• Node resources
  • Node.js
• Yarn resources
  • Fast, reliable, and secure dependency management
• Gulp resources
  • Automate and enhance your workflow

Project requirements

• Node^8.0.0
• Yarn^1.12.3
• Gulp^3.9.1
• Sass/SCSS

Components in the library

• Form
• Short and long textfield
• Textarea
• Checkbox, radio button
• Select
• Button

Scope of library

• Create components, modules, layouts, pages for forms
• ITCSS architecture
• Sass/SCSS
• Build tools: Node, Yarn, Gulp

ITCSS Architecture Layers

• Settings
• Tools
• Generic
• Elements
• Objects
• Components
• Overrides (also known as Trumps)

ITCSS Layers Diagram

ITCSS Specificity Diagram