Fozzie
Web UI Base Library
Overview
Fozzie is an innovative SCSS Helper Library designed to streamline web development across JET projects. By providing a cohesive set of baseline SCSS variables, mixins, and functions, it facilitates a more efficient styling process. Including Fozzie in your web application grants access to well-defined PIE Design tokens, essential for maintaining a consistent look and feel across web projects.
What's particularly appealing about Fozzie is its versatility. It not only offers SCSS features for developers who prefer working with Sass but also includes pre-compiled CSS options for those not using SCSS. This dual functionality ensures that any web application can leverage Fozzie's extensive capabilities without complicated setup requirements.
Features
- Baseline Variables: Access a standardized set of SCSS variables that promote design consistency throughout your web projects.
- Mixins and Functions: Utilize a collection of helper mixins and functions for efficient styling tasks, such as defining font sizes, spacing, and media queries.
- Pre-compiled CSS: For projects not using SCSS, Fozzie provides several pre-compiled CSS files, including reset and typography styles, along with utility classes.
- Dart-Sass Compatibility: Ensure a seamless development experience with dart-sass support, avoiding the deprecated node-sass configurations.
- Unit Testing Support: Validate your SCSS functionalities with unit testing capabilities through the sass-true library, ensuring reliability and stability.
- Snapshot Testing: Conduct snapshot testing using Jest to ensure no unexpected style changes occur and maintain the integrity of the compiled CSS.
- Easy Installation: Easily integrate Fozzie into your project via NPM or Yarn, and quickly import it into your Sass files for immediate use.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.