Strawberry: a new flexbox based CSS micro-framework
Frameworks, frameworks everywhere
- Buzz Lightyear
In a world full of stable and proven frameworks, with increasing attention to web components, it seems inevitable that most new projects in this field are doomed to fail.
Failure.
People hate to fail. People hate having to deal with the harsh and sad truth: your new project, your new sensational idea is sensational just for you. It is hard to argue that we are someone special between millions and millions of repositories.
So.
Try to be objective with yourself, someone has already wasted too much time tilting at windmills.
And he lost.
If the outcome from a war against giants like Bootstrap & Co. is a defeat for sure, considering the resources they can rely on, when, my dear, you are alone, it doesn’t mean you cannot do anything to make CSS a better place.
With this philosophy of life I climbed on my Rocinante, ready for a new adventure through t̶h̶e̶ ̶w̶a̶s̶t̶e̶l̶a̶n̶d̶ ̶o̶f̶ ̶S̶p̶a̶i̶n̶.̶
I don’t believe Flexbox needs an introduction. I do not have time to write another guide. I do not want to. You can find useful information about it here, here, here and here. Rather, let’s see how Strawberry can help speed up your work.
My favorite features, so I can fill an empty space that I did not know how to fill, are:
- It’s light: less than 34Kb
- It’s powerful: create Flexbox-based layouts in few lines of code
- No preset graphic style: it helps you create layouts without messing up your life
- No conflicts with other used framework in the same project: all classes start with the sb- prefix
- Easy to override: strawberry never use !important
- The End
Now, as promised, here’s a live example
I know what you’re thinking and I’ll tell you something that will make you happy: you’re right. It would be better to use Css Grid to create this layout. I did that with a single purpose: to show this little guy’s skills.
A result like this can be achieved by adding the following classes to the flex container:
- sb-flex-row
- sb-wrap
- sb-ai-center
- sb-jc-space-ad
- sb-items-20-nogs
- sb-n-flex-col
- sb-n-ai-center
The remaining is graphic style. Not Strawberry’s business.
Too much classes? Maybe not. As you’ve probably noticed, you can implement nested flexboxes very quickly, forcing items to become flexbox containers by adding classes directly to the main container.
I like the word container.
I forgot to insert the logo, but I can fix that right away.
Strawberry sees the light on github on the evening of 5 June 2018 and in a few days a stable, elegant version with proven reliability was released.
