Test, Review, and Deploy the Design System
Finish the project by compiling the stylesheet in both development and production modes. Inspect the generated CSS and confirm that selectors, media queries, theme tokens, and component variants behave as expected.
Test the dashboard at narrow, intermediate, and wide viewport sizes. Check keyboard navigation, visible focus, contrast, text wrapping, grid overflow, and component behavior when content is longer than expected.
Run the configured linter and ensure that the production build fails when Sass compilation fails. Review source maps, generated asset sizes, and the deployment path for compiled CSS.
Definition of done
- All required modules compile without errors.
- Design tokens are centralized and consistently consumed.
- Button and badge variants are generated from controlled maps.
- Light and dark themes work without recompilation.
- Responsive layouts work across the intended viewport range.
- Interactive elements have visible keyboard focus.
- The generated CSS is inspected and unnecessary output is removed.
- The build process is repeatable locally and in CI.
- The project README explains installation, development, compilation, and production deployment.
Build and Validate the Capstone
npm install
npx sass --watch src/scss:public/css
npx sass --no-source-map --style=compressed src/scss/main.scss public/css/main.css
npx stylelint "src/scss/**/*.scss"💡 The first command installs the dependencies from the project's package manifest and lockfile. The second starts development watch mode. The third produces compressed CSS without a source map. The fourth runs Stylelint against the SCSS source files.
Run the watch command separately from the remaining commands because it continues running until stopped. Configure the actual npm scripts and linter according to your project's directory structure and installed tool versions.
Key Takeaways
- The compiled stylesheet is the artifact that must be validated for production.
- Design tokens and Sass modules help establish a maintainable styling architecture.
- CSS custom properties support runtime theme switching.
- Automated compilation and linting complement browser-based accessibility and responsive testing.
- A successful capstone should demonstrate both reusable source code and predictable generated CSS.
Knowledge Check
Which combination provides the strongest validation before deploying the Sass design system?