For little over two years now I had the same styling on my site. I still really live the Hive theme, so I kept that one around. However, I was keen to try a new colour palette and some new Sass challenges.
Colour palette
I’m not someone to go invent colour palettes from scratch, so I did what pretty much anyone else would do: I googled. I ended up on an article looking at 50 Gorgeous Color Schemes from Award Winning Websites. Several of those appealed to me, and I ended up going for a combination that was quite outside of my normal comfort zone.
I had also played around with the idea of making a logo that had my URL in it but in a more subtle way. I’m not a professional designer, but it was really fun playing with this a bit.
Sass
Finally, I wanted to try a few new things with Sass. I’ve been a big fan since I did some courses in CSS and its advanced version, Sass (I took those courses on Treehouse by the way). Last year, at WordCamp Cape Town, I even gave an introduction to Sass.
As I said, I wanted to push myself beyond my comfort zone; not just with the colour palette, but also with my skills.
One of the things I wanted to try was coding a form wherein each of the elements was somehow 5% lighter in colour than the previous one. In my first version, I just used the div.nth-of-type() function and called each of the ns separately while manually adding the percentage change. I ended up with 42 lines of Sass for 4 form elements, not include any colour variables.
I then started research if there was no option to create this into a function and actually use the n as a variable in the calculation. I messed up multiple times, but after a lot of trial and error, I found a way to run a Sass loop on the form, allowing me to limit it to 19 lines of Sass for an almost unlimited amount of form elements. The only limitation would’ve rested in the lighten() levels of the colour, but increasing in smaller steps would’ve made that be able to go up to 50+ elements. No one would want a form that long of course, but I’ve gone for a more gradual change in the tags at the bottom of this article.
This is what I ended up with for the form.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $color: #804A69; | |
| /*——- | |
| Goal: The main color gets lighten by a small percentage each time the nth-of-type increase | |
| ——-*/ | |
| form { // to limit to forms only | |
| $n: 15; // to make sure the loop stops | |
| @for $i from 0 to $n { // for loop | |
| $label: $i/10 * 100% – 10%; // e.g. for nth-of-type(1) $i = 3 -> $label = (3/10 * 100%) – 10% = 20% | |
| $input: $i/10 * 100% – 5%; // e.g. for nth-of-type(3) $i = 3 -> $input = (3/10 * 100%) – 5% = 25% | |
| div:nth-of-type(#{$i + 1}) { // start loop | |
| label { | |
| color: lighten($color, $label); // e.g. for nth-of-type(3), color: lighten( #804A69, 20%); | |
| } | |
| input[type], | |
| textarea { | |
| border: 2px solid lighten($color, $input); | |
| &:focus { | |
| background-image: linear-gradient(to bottom right, transparent, transparent, lighten($color, 55%)); | |
| } | |
| } | |
| } | |
| } | |
| } |
And here’s the result of what this form looks like. I’ve inserted a picture here in case I want to change the styling again at some point, but you can see it in action on my About page.
Leave a Reply