Alom
The lightest, simplest framework ever.
Howdy fellow designers and coders, if you are anything like me, you’ll agree that it is easier to have some help when starting a new project, having said that I’ll admit that I’m not a big fan of using a framework, and the reason why is because most of them, or at least the ones that I’d use, always interfere with your style (CSS).
I know that there are a lot of frameworks out there that only provide you with the basic stuff you need, but for some reason neither of them seemed to fulfill all of the things that I was looking for, so one day, talking to a friend about this, we decided to go ahead and created something that included the things that we always use on a new project, the basics: grid, utility classes, text alignments, responsive classes, etc. That is how Alom was born.
It’s a pretty simple and light “Framework” that will help you kick up your project, providing you with the basics and not interfering with any of the styles you have.
It covers the basic things you need:
A grid
It’s a simple grid we took from our CTOs’ Furatto framework and it’s based on 12 columns, you can change that number if you want in the variables.
We did that same grid but instead of using the float property we use flex, you can use either one of them, we just thought that on some occasions is easier to use flex.
Functions
We added 2 simple functions to help you out with the responsive side, one of them is px-to-ems and the other one is px-to-rems, we found out that while we prefer using rems, in some scenarios, it’s better to use ems, you can use whichever you prefer.
Utility Classes
We included all the classes we thought could help anybody out, Floating, Text alignments, Alignments and we even included display classes.
Media Queries
We included a set of media queries that we often use in all of our projects, but we created some mixins with them to make it even easier for you to include them on your SCSS. We have one for Mobile, Tablet, Laptop, and Desktop.
Visibility
We also added classes we thought would be useful when you want to hide or show something just in a specific size.
That’s pretty much what Alom is made of, we hope you like it and find it useful, Alom is open source so if you think of anything that you would like to add to it feel free to contact us or just go ahead and do it.
Here’s the link: https://github.com/IcaliaLabs/alom
