Okay so.....two days ago I wrote 59k lines of code in less than 3 hours 😲.....well as true as that actually is in context, it's actually a lie, let me explain. So I'm creating a CSS framework.....sometimes last year I was working on a CSS library called Dolphin UI, it's more like Bootstrap but later I stopped working on it coz I myself don't like using UI libraries. So 2 days ago I changed my mind, instead of creating a library, why not create an actual framework where everything is going to be customizable.
Introducing Orca CSS...
(What's the obsession with fish names tho 🤣🤣🤣🤣)
It's more like Tailwind CSS but better (that's what she said 😂😂), instead of being just a CSS framework, it's going to be also a UI library if you want to get things done faster without worrying about fully customizing it. So it's going to be a CSS framework, UI library (so I can now re-use my Dolphin UI code), an animation library, and an icon library... and I have plans to make it support all colors...that's a lot of stuff man. But it's not impossible.
So the way Orca CSS works is if you want to add display flex to a div instead of creating an external CSS file where you are going to have all your CSS code you can add a class name and it's going to do it for you. Something like
<div class="displayFlex"></div>
and that's going to be it, you won't need to write any CSS. So the way the naming convention works is just a mixture of camelCase and BEM. Normally you'll have display:flex; in your CSS so instead just do displayFlex but what if it's double words, let's say you want to add a flex-direction:reverse-column, you'll just have flexDir__reverseCol. The property name in camelCase then double underscores followed by the value in camel case too. I choose this route coz most developers are already familiar with camel case and BEM.
So back to the 59k lines of code. In order to create this and have all the CSS properties and values, there's a lot of CSS that has to be written. Imagine the font-size for example what if you want to use any value from 1 to 1000 px or rem or %. I want Orca CSS to have this, so I wrote all of the thousands of lines of codes to do this........or did I? 🤔 Well what I just did is a lot of automation for repetitive tasks in JavaScript using forEach and just looped through the 0 - 1k array (yea the array was automated too 🤓) and did the magic and I just copied and pasted it into my CSS 😎 GENIUS!!! So that's how I was able to have that much code in about 3 hours. Right now Orca CSS only supports em, rem, px, vh, vw, and % coz that's the most used ones, later in the future, it might or might not have the rest of the.......I forgot what it's called. So to test what I've done so far I created this with Orca CSS👇🏽👇🏽👇🏽
I wanted to do something really nice with only black and white coz Orca CSS doesn't support colors yet and tbh I think it came out really nice.
What do you think?
I'll keep you updated about how the development goes, and I really hope this will be something that will be used in production someday.
Thanks so much for reading this very long post, so make sure you follow me if you want to see more of my posts, I'm on Twitter @bossoncode and if you're just starting out with JavaScript do make sure you check out my last post where I talked about things most beginners miss learning in JavaScript. Thanks once again for reading and I'll catch you in the next one ✌🏽