Flexible and Expressive CSS
Loop is a fully customizable CSS framework built with Sass aiming to create a more maintainable and readable Code. It gives you complete control on your project to let you create and match your styles with your design needs.
Quick install via npm or yarn
npm install oo-loop / yarn add oo-loop
Being a sass framework, Loop requires a sass environment to be setup. Here are some options
- Sass applications or command line
- node-sass
- Webpack and sass loader
- Rollup and rollup-plugin-sass
Import Loop framework into your sass file and launch it to start developing with it. Basing all its settings around the config map, the main file is the only import needed.
@import 'oo-loop/loop'; // Import
@include ooCreate(); // LaunchLoop differentiates components and utilities with semantic for more clarity
data-oo-componentName/oo-componentNamefor component attributes.prefixName-valueNamefor utility classes
To know more how to use Loop in your project check the live documentation
The first iteration of Loop (0.4) focused on bringing the minimum to bootstrap any project. Instead of providing any possible existing components, Loop worked towards flexibility and customization to let the developer manage his own set of utilities; thus, making the CSS easier to maintain. Loop also introduced a new component syntax to improve HTML readibility making styling code more expressive and less confusing.
Loop v1 continues into the same philosophy tackling this time the variables situation. What we often get from a css framework, is a list of single variable to customize elements or components properties. The list, covering a multitude of parameters, tends to be exhaustive and can become painful while searching for a possible change.
Loop proposes to treat the variables as a single structured map to facilitate its use. As the result, the config map is enabling easy parsing and access to all the data during the development. Moreover, the introduction of properties such props and states offers a complete control over the style of elements and components. It is simplifying its customization by allowing you to add whatever CSS properties you need without worrying if it's changeable or not.