CSS vs. Stylus – Generating unlimited color shades
What is Stylus?
Stylus is an innovative style-sheet language that compiles down to CSS. Inspired by SASS, Stylus is built with node.js and capable of running in the browser.
What that means practically is that CSS turns to a modular language which supports variables and mixins (functions) and that is every front-end designers dream. So, in plain language you can completely change the looks of the webpage in only changing a few variables. Are you excited yet ? 🙂
What did Stylus help me solve ?
For one project I needed to create 20 shades of gradient of 8 colors. In old times, this would be a very time consuming and boring task (write 160 CSS classes by hand), as you would go to the graphic program, create a specific color gradient and with a color-picker choose and copiy all the colors as hex values in your CSS file classes.
The quick “1 minute” solution
shades_generator(color, value) for i in 20..0 .shades-{value}-{i} border-radius 3px var1 = (100-(i*5))+'%' background lighten(color, var1) background alpha(color, ((i)/20))
Note to the code: in stylus you have to indent your code with tabs. When you copy this, just create a variable before the function – for example: “color_1 = #ff6600” and run it after the function: “shades_generator(color_1, 1)” – value “1” here represent only the prefix then naming the classes
This simple loop would then preprocess 160 static CSS classes with different shades (background css property). If I needed a different color, I would simply change the variable or if I needed 100 or 1000 different shades, no problem – scale here doesn’t matter, since this is a stylus function and options become unlimited.
Welcome to the brave new world of preprocessors
I will be writing about Stylus more, so tune in.
Tailwind CSS – Dream way of building UI and quick landing pages
This is a quick review and demo of the “utility style CSS framework” named “Tailwindcss” – https://tailwindui.com/ What is Tailwind CSS? Tailwind CSS is a utility-first CSS framework that provides […]
Blender 3D | Best way to start with 3D
It’s been a while since I done 3D stills and animations and 3D Blender seems to be perfect software to start, even if you have zero experience. I have to […]
Basic text scraping from websites in Python
In my experience, Python is a easier programming languages to start with, mostly because of syntax which is very readable and minimal. For python apps that means reduced cost of maintenance […]
Basic webpage preloader
Page preloaders are useful if you have a big landing page or a lot of content and pictures, videos, so the visitors are “entertained” while the page is loading.