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
 
nishthaneeraj profile image
Nishtha Neeraj Kushwah

where do you hosted your CSS files and how please tell.

Collapse
 
merichard123 profile image
Richard

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

Collapse
 
nishthaneeraj profile image
Nishtha Neeraj Kushwah

thanks,
it was great
Thanks for helping me!
I will also launch my framework soon. because of you.
thanks a lot again

Thread Thread
 
merichard123 profile image
Richard

Awesome well done!

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.