CSS
Raiting:
8

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.
image

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):
image
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:
image
Next, I redid the tables (thanks to Google Docs), namely, the modal windows and the progress bars:
image
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):
image
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.
Killer 15 october 2012, 14:53
Vote for this post
Bring it to the Main Page
 

Comments

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute