Hillcss - A Sass Toolkit for Intuitive Layouting
Starting with the foundation of a frontend project is always about the same repeating things. Creating a Grid for example: Decide how many columns you need and talking with design teams to find a suitable solution for the design layout.
With hillcss, we start from across. First define the defaults for your project. After that frontend and design teams can start their work but now with the same fundamentals:
- Grid and gutter spaces
- Vertical and horizontal spaces
- Breakpoints
- Layers on which elements can be placed (
z-indexlevels) - Root text size
- Text sizes based on the root size
Hillcss comprises exactly that parts. As we think enough to create a skeleton of a website or application. The next step is to fill this skeleton with live, your modules. Each module can be placed inside a hillcss layout container. We call them boxes. A box can spread differently on the page. Therefore we create a box grid layout based on fractions.
There is a lot more to say about hillcss, but for now I think it gives you a short overview why we create hillcss and how you could benefit from it when using it for your next upcoming project. Your can read more about the actual feature-set of hillcss on Github.