awsm.css v3

It’s funny, but once a year I usually rewrite awsm.css from scratch, because... I don’t know the reason, actually. But today I suddenly realized that I didn’t touch the lib last year. Well, this mistake should be fixed!

Fonts

There were a lot of examples of previous version usage, but most of them looked quite strange, because of serif fonts.

Don’t misunderstand me, I like serif fonts, most of the time they are amazing. But when you’re creating a CSS library for personal sites, documentation, CVs, prototypes and things like these, you shouldn’t expect that users would care about fonts. Honestly, you must be ready that they won’t care at all.

If you don’t want to be upset because of “incorrect” usage of your tool, you must design it in the way that makes this “incorrectness” impossible. So, that’s exactly what I did—I removed serif fonts completely.

Simplify, simplify everything!

Once I decided to remove some “beauty” of the library, it forced me to remove some other things.

Retina borders. You can remember them, some years ago I used them everywhere, including awsm.css. If you don’t understand what I’m talking about, go to Ilya Birman’s website, and look at the main menu. It looks pretty on Retina screens because it has a really thin underline. But this underline leads to some problems. Sometimes browsers update their rendering settings and these borders transform to the usual 1px border. Or there are conditions when you can’t create a multiline anchor.

Well, I removed them. And you know what? Now it looks better. With ordinary text-decoration: underline. I don’t know why. Either browsers render them cooler nowadays, or my internal “style pendulum” swung to the other side. Who knows.

After retina borders, I removed all transitions without any problems. It looks like I just bored of them. They are everywhere.

Forms

But let’s talk about additions. The most desired feature users asked about was a stylization of inputs, buttons, selects, textareas and everything related to forms. I wasn’t surprised, because I saw that most of the time people used awsm for their pet projects, and they wanted to have everything stylized.

Okay, no problem. I resurrected styles from the first version of the library and tuned them a bit. Now you can style forms using awsm.css.

Nonetheless, I don’t understand the typical use case of styling forms using a library like awsm. And that’s the reason why I implemented styles for form items mostly like blocks, not inline elements. So, if you have some problem with current styles, give me a sign in issues, please.

Sealed styles

Besides forms, there were other requests from users. One of them—make it possible to use the lib’s styles inside some sort of selector, because sometimes it’s impossible to inject the whole library to the project because it already has some other styles.

Okay, now it’s possible to do it. There is a version of the library which is called “sealed”, where instead of this:

html, body { /* rules */ }
p { /* rules */ }

...we have this:

.awsm { /* rules */ }
.awsm p { /* rules */ }

Yeah, I know that it’s better to call them “scoped” styles, not “sealed”. But for some inexplicable reason, I like the way it sounds.

awsm.css header colored in different colors

Themes

Finally, the colors. I must say, that I like the black and white version of awsm.css, because it’s simple, and because when I change the color temperature of my screen, I get softly orange. But I understand that someone may want to create an unusual website, so I added seven color themes and made it possible to create new ones effortlessly.

But I should say that I don’t know anything about colors. I seem to understand things like contrast, brightness, hue, and saturation. I think that I know the difference between RGB model and HSL. But I surely don’t know anything about harmony and complementary colors. About color theory I know, well, that it’s something about colors, right? So, when I decided to add some colors I picked the easiest way to do it—find some cool pictures and take colors from them.

A reader may remember that demo page of awsm has always contained photos and videos of cats. That’s because everybody like them, and because I have a university friend who has that cats ¯\_(ツ)_/¯. When I created demo pages I asked her about media and used some of them to make demo funnier. Well, why not to go the same way once again, right?

My friend has two accounts on Instagram: the first one with cats and the second with cakes. Colors of these cakes are gorgeous, so I used them to create themes. Just picked some photos (you can find sources of each theme in the repo) and poked eyedropper randomly to them.

But as you remember I don’t know anything about colors, and I don’t know how to name them. “Well, it’s fine”, I thought, and started googling services that could name colors for me. After a few seconds, I found Name That Color and used it to create strange theme names such as “Big Stone”, “Gondola” and “Mischka” (I’m not sure that I know how to pronounce the last one; it sounds very funny in Russian).

And of course, I updated the demo site. Now you can look at every theme in one place and pick one of them for your future pet-project, homepage, CV, everything you want. Check them now!

Demo