We compiled into SiloCreativo a number of resources and tools for web designers who will make sure your life easier. And as we are of the idea which is not shared is lost, today it’s time to talk about free resources for CSS (you know, cascading style sheets.)
There are frameworks, resources for learning, CSS icons … It is difficult to categorize them all together, so we will name them as CSS resources to inspire (surely in some days off creativity they will be great.)
If you want to implement them on your website, you must add them according to the specifications of each one of them, and if you work with WordPress, I advise you to use an alternative method as we mentioned here to not to modify the parent theme.
I hope you enjoy them and they serve you for your projects:
The Encyclopedia of CSS
It is very good for beginners to the world of web layout and design, but also for veterans as there are so much elements and pseudo-classes, so it is easy to forget some property.
Everything is well explained with code excerpts and examples of applications. It is highly recommended. To favorite!
Template for creating our style guide
Someday we will discuss the entire process of design and production of a web project, meanwhile, we will let you know that one of the most important parts today is the definition of a good style guide always available and that the client approves.
The file can be downloaded and used freely. Although it is quite simple (lack of more styles of fonts, lists, extensive forms …) it is a good starting point to create our own framework or template style sheet for our projects. 🙂
Web icons with CSS only
This seems like a genius. Icons only with CSS! We talked about the importance of replacing the icons of our web with icons fonts to avoid having many small images, to save calls to the server and to make scalable graphics for retina displays.
Well, this goes a step further and is a complete set of icons (which includes flags of some countries) made only with CSS. If we inspect it you will notice of the great use of pseudo elements :after and :before that the author makes. So far there have not been social network icons, but you will see them in the future!
You can download the full pack or if you just need an icon, copy the necessary CSS lines and save a lot of traffic and problems. Your users will thank this improved loading and UX.
Framework of Material Design
It was obvious that it was coming. It is a complete framework ready to download and use. There are no excuses not to adapt us to the design recommendations that mark the design materials (not to be confused with flat design.)
Resolutions devices and media query for CSS
The responsive design allows us to adapt our website to all devices, not just mobile phones and tablets, but also large monitors or other devices. This is important to know the devices and their resolutions, and also know the ratio of pixel, if we have to work with a special media query for retina displays.
However, if you are thinking that these dimensions are the ones to set breakpoints in your CSS, it is best that you think that what matters is not the container but the content, and good management and its distribution ensures good compatibility in all resolutions. For more info, we have recently talked about responsive design methodology with mobile first.
Más info
A little of CSS humor
If you have come this far, it’s time for a break, take a break and laugh a little, because not everything in life is work! Therefore, Saijo George has been commissioned to collect some jokes with CSS so we can laugh a little.
Resources: Lean on them and do not try to reinvent the wheel
Resources like these are the fulcrum of a good professional. They help build a faster project also relying on tried and tested elements. For example, you can access to a good quality of stock images for a pre or demo site, so you do not need to bring the camera on your shoulder and take pictures…
So if you have some that can serve the others, share or release it; the community will be grateful. And remember that if you want to go fast, go alone, but if you want to go far, it is better to have company.
I hope the resources have served and make you smile (at least the last one.) If you like it, I am sure that you will make glad a CSS-addict colleague sharing it.
very nice post.