Loop

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.

Installation

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

Getting started

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(); // Launch

Separation of concerns

Loop differentiates components and utilities with semantic for more clarity

• data-oo-componentName / oo-componentName for component attributes
• .prefixName-valueName for utility classes

Documentation

To know more how to use Loop in your project check the live documentation

Why Loop?

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.

License

MIT