DEV Community

Cover image for Making my own CSS Framework

Making my own CSS Framework

Richard on June 11, 2020

A Couple of months ago I watched this video by Web Dev Simplified, where he was suggesting quarantine projects. The one that caught my eye was, as ...
Collapse
 
louislow profile image
Louis Low •

Good work! I've seen your repo at Github. I believe the final finished project would be like a component-based CSS framework if that your design goal. Keep it going. Some users would love this kind of framework.

Collapse
 
merichard123 profile image
Richard •

Thank you!, yes that was my goal I wanted it to be very unopinionated, just to give options of pre-styled components.

Collapse
 
edamghy profile image
ABDELLAH DAMRI •

Great Work Richard !! I just wanted to ask How did you make that build folder ?

Collapse
 
merichard123 profile image
Richard •

Hi! Thank you glad you enjoyed it! This is probably not the answer you wanted to hear but I created a folder called Build and then pasted all the CSS (Compiled from SCSS) into cssminifier.org and then pasted the minified CSS in a min.css file :)

Collapse
 
edamghy profile image
ABDELLAH DAMRI •

Oh Awesome, Thank you !! And for Link to use The framework I was just wandering how did the converting the repo recognize the min.css folder ? And Did you publish it on Npm Platform ? if u didn't do you have any idea how ? I apologize for all these questions !!

Thread Thread
 
merichard123 profile image
Richard •

I did try to use npm but npm serves mainly JavaScript and I didn't really want to mess with trying to get it working.
So what I did was had the min.css in the build folder on GitHub just like a regular CSS file (I probably would have been better if I had a separate branch for it but I didn't) and then copied it's URL into statically.io/convert this used GitHub to make a CND link straight to the file, so if anyone wanted to use the library they just needed to use the CDN.

Thread Thread
 
edamghy profile image
ABDELLAH DAMRI •

So you used the URL where the min.css file is (.../build/style.min.css) right ?
Yeah I understand now ! Thank you so much !! Neat Framework btw I used it for bit !

Thread Thread
 
merichard123 profile image
Richard •

Yeah exactly!
Oh thanks for trying it! Maybe one day I'll get to adding more stuff 😉 and making something finished.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
merichard123 profile image
Richard •

I just stuck them on GitHub and used statically.io/convert/ to turn them into a CDN

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
merichard123 profile image
Richard •

Awesome well done!