Fractal Starter Kit

screenshot of Fractal Starter Kit

Starter kit for Fractal with SCSS, Webpack, XO, sass-lint and Gulp

Overview

The Fractal Starter Kit is an innovative tool designed to streamline the development and documentation of web component libraries. With its robust and modern setup, it allows developers to easily manage their projects while ensuring high-quality output. This starter kit is packed with tools to enhance efficiency, like Webpack, Babel, and various linting tools, making it a solid choice for both new and experienced developers looking to optimize their workflows.

Features

  • Fractal Integration: The kit utilizes Fractal, a powerful tool that aids in building and documenting web component libraries seamlessly.
  • Modern JavaScript: Built with Webpack and Babel, it supports ES6 and Stage 3 features, allowing for more elegant and concise code.
  • Linting Support: Integrated SCSS linting through sass-lint ensures that styles are consistent and error-free, while JavaScript is checked using xo for improved code quality.
  • Autoprefixer: Automatically adds vendor prefixes to CSS, ensuring compatibility with various browsers without manual adjustments.
  • Gulp.js: Utilizes Gulp.js for task automation, simplifying repetitive processes and enhancing development speed.
  • SVG Icons: Combines icons into a single SVG file using <symbol> elements, which helps in optimizing loading time and maintaining cleaner code.
  • Easy Deployment: Includes simple commands like $ yarn build or npm run build to create production-ready CSS and JS files effortlessly.
  • Open Source License: Released under the MIT License, encouraging collaboration and contribution from the development community.
gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.