Loop

"Why go in circles?"

CSS Companion for Front-end Developer
> Documentation

Introduction

Have you ever worked on a project with your go-to css framework realizing that you were only using 10% of it. You had to add your own utilities, your own components and when trying to reuse something from its library, you actually had to overwrite some rules, tweak it, in order to reproduce what you wish for.
Have you ever wonder if the framework you were using was a real fit?.

Loop has been developed out of that feeling to overcome this problem.

Loop

Loop wants to reconsider the way CSS is created and used, aiming to make it more maintainable, readable and expressive.

Loop works towards flexibilty and customization to give the developer complete control on his project letting him create his own set of utilities.
It is specifically based on variables to facilitate the addition and removal of rules and properties.

Loop is not a framework providing any possible existing components. Its philosophy is to be non-opinionated and to be more like a companion for CSS development assisting the developer matching their styles with their design needs.

Semantic

Loop differentiates components and utilities with semantic for more clarity

• oo-componentName loop attribute for component
• .utilityName class attribute for utility.

Beware

The loop attribute is not a valid html5 attribute.
If it does concern you, set the variable $loop-component-html5-validity to true.
Loop components will be then available through the data attribute data-oo-componentName.

Start

Use yarn yarn add oo-loop
Use Npm npm install oo-loop