What if Google released its Bootstrap?
How do you imagine a popular Twitter Bootstrap CSS framework will look like, if it was from Google? Let’s meet Plusstrap.
So, after I spent two days on study of the design features of Google services, in particular, Google Plus, I have decided to try to redo the basic elements of Bootstrap. Of course, I started with the search string (hereinafter, Plusstrap will be located on the right):
Then I redid all buttons, it should be noted that I have not found the option buttons in Google, such as Info, Warning and Inverse, so I had to improvise a little:
Next, I redid the tables (thanks to Google Docs), namely, the modal windows and the progress bars:
The last I corrected popup tooltips and other things, such as rounding the corners of blocks in the tag code and designing tab-navigation (thanks to Google Mail):
My little experiment turned out to be okay. Everyone is welcome to see the full version on Github, but I want to note that less-versions and the possibility of collecting css you will not find there. However, if you like the idea, then later I will try to add less and css customization.
I open to any suggestions and comments.
Out of curiosity
- Google almost does not use pseudo-classes, such focus and active, instead of that the classes of needed element are added the necessary classes (for example, .doc-list-hov).
- Also, Google uses virtually div blocks for almost everything, namely, to draw the buttons, checkboxes, and other ready elements.
- Google Docs uses ready css-file, while in GMail and Google Plus all css is in html code and is mounted very fast.
- Google likes short and register dependent class names, for example, .cm and .cM that are different classes, as well as to use each class for a couple of parameters, in order to gather the style of the several classes for the right element: <div class="wna M5a I9 LTa J9"></div>.
- Virtually, the entire makeup is rubber, and the location of all popup elements and those that are located out-of-order are given in absolute values, such as the top and left (right).
Once again, here is a link to Github.
|Vote for this post
Bring it to the Main Page