DEV Community

Cover image for I created my own Pure CSS Micro-Framework, a tale 🙃

I created my own Pure CSS Micro-Framework, a tale 🙃

Felippe Regazio on May 26, 2020

Cover Photo by Kelly Sikkema on Unsplash But Why? Ok, thats a Funny story. But, first of all, here is the link in case you are curious ...
Collapse
 
jeffjadulco profile image
Jeff Jadulco

This is nice! There's a bit of inconsistency though. The meter and progress seemed off compared to the rest. I'm using Firefox. Here's the screenshot: gyazo link

Collapse
 
felipperegazio profile image
Felippe Regazio • Edited

Uow, thats true. What firefox version? I tested with the last one. Also, meter and progress are hard to style natively, and all components are directly styled, there is no opinionated architecture or imposed html structure to build fake elements. This is not wrong of course, but this framework is just not intended to that. Meter and Progress are styled using vendor prefixes, maybe your version doesnt support those vendors yet, ill wait to know about which version are you using and try to figure out if has a workaround. Thanks for your feedback :D

Collapse
 
jeffjadulco profile image
Jeff Jadulco

I'm using Firefox 76.0.1 (64-bit). It looks okay on Chrome though. So yeah I think it doesn't support it yet D:

Thread Thread
 
felipperegazio profile image
Felippe Regazio

True. I'll download your version and try to figure out a solution. If all fails, maybe offer a workaround with spans. Thanks again.

Collapse
 
codiagkai profile image
codiag-kai

Hi Felippe,

Awesome post and a cool project. The idea to scope it is soo important for adopting the styles.

Two questions are spinning in my head:

  1. why did you decide against Miligram and Skeleton in the first place

  2. how would you compare plume vs something like MVP.css

Collapse
 
felipperegazio profile image
Felippe Regazio

Hey! Thanks for your comment!

  1. Skeleton and Milligram are micro-frameworks that i use to fast-build small projects. As there were some points there i would like to be different and i were already experimenting different styling approaches, they automatically became an inspiration.

  2. I didnt know MPV.css. Looks great! MVP.css sure will be a reference for the future. I want a no-classes frameworks by default too, just semantic HTML. MVP seems more mature in this point. I think that the main difference is that Plume is Scoped (as you pointed), but i assume thats easy to achieve with MVP.css. Plume has a larger set of elements styled, also with more consistence (at a first sight): andybrewer.github.io/mvp/mvp.html. The available props to customize are easier to tune on MVP, but Plume seems more complete at this point, but at here i think is more about taste: do you want props or do you want to override selectors? Despite the semantic approach, Plume's also has a nice set of utilities. But at the end, i think its all about your taste and needing. MVP seems really great.

Collapse
 
louislow profile image
Louis Low • Edited

Great work! I can see the plume.css is a component-based framework. Waiting for your new component collection soon. You earned a star at Github, from me.

Collapse
 
felipperegazio profile image
Felippe Regazio

Yes, i have a solid plan to write a "plume components-js" lib also with a simple set of plume-based components using JS web components to encapsulate complex behaviors. Many thanks Loouis :D

Collapse
 
dhintz89 profile image
Daniel Hintz

I just wrote an article about my experience trying out Plume. Spoiler alert: I love it! So simple, but very powerful. Amazing job!

Also, now that I've randomly stumbled into this article and got to read about the backstory, I love it even more. 😄

Collapse
 
madeindra profile image
Made Indra

This is neat! I like the style you used, gonna star this on github so I can go back when I need to create a web using this style. Thanks!

Collapse
 
felipperegazio profile image
Felippe Regazio • Edited

Thanks Made! Take a look on the bottom left button on the project github page, its a menu with some custom themes to toggle that you might also like ; )

Collapse
 
manishfoodtechs profile image
manish srivastava

Nice work. Plume- css seems too promising. Please add datatable ui ... search indexing etc

Collapse
 
felipperegazio profile image
Felippe Regazio

Would be cool to build some components based on Plume style. But implement a datatable or search indexing i believe it would be problematic since Plume is a pure CSS lib

Collapse
 
moopet profile image
Ben Sinclair

Can you disable the scoping?

Collapse
 
felipperegazio profile image
Felippe Regazio • Edited

Hello Ben, yes its possible. You must clone the Gihub Repository, then in the file "plume.config.js" you must set the { superclass: ... } to "" and the { prefixer: ... } to false. Then run:

npm install
npm run build-all

By doing this, styles will be applied on body instead of the "plume" class (or one designated by you), and the selectors wont be prefixed.

Collapse
 
emanuelgsouza profile image
Emanuel Gonçalves

That's amazing job! Very interesting! I will test it!

Collapse
 
mikaelgramont profile image
Mikael Gramont

This looks flexible enough that I could see myself use it next time I start a project from scratch.
That, and it seems to work like a "regular" CSS framework.

Well done!

Collapse
 
felipperegazio profile image
Felippe Regazio • Edited

Many thanks Mikael! Happy to read that. I thought a lot about if this is a framework or a micro-framework, but there is no grid-system (as a choice), no optionated architecture, no components (cards, menus, sidebars, etc). At the end its just pure and native HTML elements and CSS. A framework for those who like to code the things from scratch, maybe? So i called a micro framework (but i dont know), and yeah, its a pretty complete one haha.

Collapse
 
chanmyaemaung profile image
Chen Lay

Congratulations! You did a great job.

Collapse
 
felipperegazio profile image
Felippe Regazio

uow, thank you Chan!

Collapse
 
dinsmoredesign profile image
Derek D

Nice job. Love the style. This might be the first "framework" I've been excited about in years. Will have to give it a whirl!

Collapse
 
felipperegazio profile image
Felippe Regazio

Nice to hear that Derek. Hope it can be useful for you! Have a nice code!

Collapse
 
nclarx profile image
Nick Clark

Hey Felippe, this looks really cool and am keen to try Plume out, thanks for the really insightful article.

Collapse
 
felipperegazio profile image
Felippe Regazio

Hey, thank you Nick! :B

Collapse
 
shriji profile image
Shriji

Awesome I like it.

BTW have you checked chota css?

Collapse
 
felipperegazio profile image
Felippe Regazio

Thanks Shriji! Yes, i didnt implemented Chota, but i saw the documentation and the sources as a brief reference also. Seems really nice : )

Collapse
 
suvink profile image
Suvin Nimnaka

This is awesome <3 Especially the date and time inputs. Looking forward to contribute!

Collapse
 
felipperegazio profile image
Felippe Regazio

Thanks Suvin!