This January we have decided to start the year in SiloCreativo in a different way. We have softened the workload for two weeks to have time and dedicate it to create a Side Project (or parallel project if you prefer to call it that way.)
If you have never heard about what a Side Project is, search on Wikipedia and you will find that the definition comes from the field of music, when two or more members of other bands come together to record an album or give a concert, usually with another style, without abandoning their groups of origin. Applied to our field, it would be a matter of creating a project among several colleagues leaving your comfort zone, usually in a short time and / or in your free time.
With these premises we just needed an idea, which we actually found last year writing one of our tutorials on CSS Grid (In Spanish). The point is that in this article we wanted to refer to a web in production that was already using CSS Grid, but it was almost impossible to find any. Going web by web inspecting code was not feasible and there was no showcase or compilation that had real sites instead of examples and demos in Codepen. So, why not do it ourselves? Thus how gridexamples.com was born.
How to create a compilation of examples of CSS Grid?
The idea behind gridexamples.com is simple: a showcase or compilation of examples of sites in production (sites that are visible and functioning) as a portfolio. The visitor is used to learn CSS Grid with real examples and the designers to show their work.
We have selected the first designs and programmed them to be published with a relative periodicity, but the idea is that the designers themselves can submit their designs through a form to send new examples. That is the idea, since being a side project the objective is not to devote too much time in the medium term.
As for the internal functioning, the site works under WordPress with a theme that we have designed to measure, very simple, with styles for the listings pages (index.php and archive.php) and for the individual view of each example (single. php) where the url of the web, the author, the categories, tags and other related examples are collected.
For the layout, we opted for CSS Grid (it was mandatory to use it in a website where we are going to talk about CSS Grid,) so if you visit the web with an old browser it is possible that some things do not fit. Here you can see the current Grid Layout compatibility.
What have we learned when developing a Side Project?
Developing a project of this type has many benefits for the team. You will leave your comfort zone and try new things, things you do not do in your day to day and that serves to disconnect, you will learn something you did not know and you will also have fun. Therefore we have changed the roles in some tasks during the development of the project, so for example Alfonso designed the logo and the individual page of the examples in addition to the tasks of layout, Verónica touched some code in addition to their design tasks and I designed the home and I learned a little more about CSS Grid.
The initial goal of developing it in a week is accomplished, however during the following weeks we have made some changes and improvements, provided that it is voluntary and without taking time away from other projects, as we will continue to receive the same benefits in terms of learning, as we said before.
In our case, the project was much related to our day to day, and therefore the change of role was the way out of our comfort zone. However, in the mini-game we did for the Christmas greeting everyone assumed their role, but in that case to develop a final result very different from what we usually do in our day to day.
So now you know, if you have an idea in mind, no matter how crazy it is, book one week a year to develop it, you will learn a lot by dedicating just the right time. And if you know any website made with CSS Grid, it would be great if you send it to the showcase. Thanks in advance!
