Very simple and semantic google alike UI with Compasss
A Pen by Alexis Sgarbossa on CodePen.
Created
October 14, 2013 12:13
-
-
Save Saminou24/6974683 to your computer and use it in GitHub Desktop.
A Pen by Alexis Sgarbossa.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Google UI with Compass</title> | |
| <link rel="stylesheet" media="all" href="stylesheets/screen.css" type="text/css"> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <header> | |
| <h1>Google UI with Compass</h1> | |
| <p>Simple & semantic google UI recreation</p> | |
| </header> | |
| <section id="ui"> | |
| <ul class="interface"> | |
| <li class="first"> | |
| <a href="#">Archive</a> | |
| </li> | |
| <li> | |
| <a href="#">Spam</a> | |
| </li> | |
| <li> | |
| <a href="#">Delete</a> | |
| </li> | |
| <li class="last"> | |
| <a href="#">Mark as read</a> | |
| </li> | |
| </ul> | |
| <ul class="interface"> | |
| <li class="first"> | |
| <span> | |
| <a class="icon plus" href="#">+</a> | |
| </span> | |
| </li> | |
| <li class="last"> | |
| <span> | |
| <a class="icon less" href="#">-</a> | |
| </span> | |
| </li> | |
| </ul> | |
| <ul class="interface"> | |
| <li class="first"> | |
| <a class="move" href="#">Move To</a> | |
| </li> | |
| <li class="last"> | |
| <a class="label" href="#">Labels</a> | |
| </li> | |
| </ul> | |
| <ul class="interface"> | |
| <li class="unique"> | |
| <a class="more" href="#">More</a> | |
| </li> | |
| </ul> | |
| <ul class="interface"> | |
| <li class="unique"> | |
| <span> | |
| <a class="refresh" href="#">Reload</a> | |
| </span> | |
| </li> | |
| </ul> | |
| </section> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass" | |
| // Utilities -------------------------------------------------------------- | |
| @import compass/utilities | |
| @import compass/css3 | |
| @import compass/utilities/general/clearfix | |
| @import compass/reset | |
| $base-font-size: 12px | |
| @import compass/typography/vertical_rhythm | |
| $border: #818181 | |
| $gradient_start: whitesmoke | |
| $gradient_end: #f1f1f1 | |
| // Grid BG --------------------------------------------------------- | |
| body | |
| background: none repeat scroll 0 0 #fafafa | |
| color: #333 | |
| font-family: "Helvetica Neue",Arial,Helvetica,sans-serif | |
| font-size: 75% | |
| line-height: $base-rhythm-unit | |
| html > body | |
| font-size: $base-font-size | |
| a | |
| color: darken($border, 20%) | |
| &:hover | |
| color: lighten($border, 20%) | |
| // Commons --------------------------------------------------------- | |
| h1,h2,h3,h4,h5,h6 | |
| font-weight: normal | |
| color: #111 | |
| h1, .lh1 | |
| +adjust-font-size-to(32px) | |
| +margin-leader(1, 32px) | |
| h2, .lh2 | |
| +adjust-font-size-to(26px) | |
| +margin-leader(1, 26px) | |
| p,ul, ol, dl, | |
| margin: 0 0 1.5em | |
| ul, ol | |
| margin-left: 1.5em | |
| // Layout --------------------------------------------------------- | |
| #wrapper | |
| width: 950px | |
| margin: 0 auto | |
| overflow: hidden | |
| header | |
| margin-bottom: 4em | |
| text-transform: uppercase | |
| text-align: center | |
| #ui | |
| margin-left: 5em | |
| // Google UI -------------------------------------------------------- | |
| .interface | |
| +horizontal-list-container | |
| +inline-block | |
| margin-right: 2em | |
| li | |
| background: $gradient_start | |
| border-bottom: 1px solid lighten($border, 35%) | |
| border-top: 1px solid lighten($border, 35%) | |
| border-left: 1px solid lighten($border, 35%) | |
| +horizontal-list-item(0, left) | |
| cursor: pointer | |
| +background-image(linear-gradient(top, $gradient_start, $gradient_end 100%)) | |
| +box-shadow(0 1px 2px rgba(0, 0, 0, 0.05) inset) | |
| &:hover | |
| border-bottom: 1px solid $border | |
| border-top: 1px solid $border | |
| border-left: 1px solid $border | |
| li:hover+li | |
| border-left: 1px solid $border | |
| //* Adjacent selectors rulez! ** | |
| a | |
| color: darken($border, 10%) | |
| padding: 2px 12px | |
| text-decoration: none | |
| font-weight: 700 | |
| display: inline-block | |
| margin: 0 0 0 4px | |
| +text-shadow(white, 0, 1px, 0) | |
| span | |
| +inline-block | |
| padding: 2px 8px | |
| .first | |
| border-right: 0 | |
| +border-radius(2px 0 0 2px) | |
| .last | |
| +border-radius(0 2px 2px 0) | |
| border-right: 1px solid lighten($border, 35%) | |
| &:hover | |
| border-right: 1px solid $border | |
| .unique | |
| +border-radius(2px) | |
| margin-left: 0 | |
| border-right: 1px solid lighten($border, 35%) | |
| &:hover | |
| border-right: 1px solid $border | |
| .icon | |
| background-image: url(data:image/png;base64,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) | |
| background-repeat: no-repeat | |
| .plus | |
| background-position: 0 -60px | |
| height: 10px | |
| width: 14px | |
| padding: 0 | |
| text-indent: -119988px | |
| overflow: hidden | |
| .less | |
| background-position: 0 -70px | |
| height: 10px | |
| width: 14px | |
| padding: 0 | |
| text-indent: -119988px | |
| overflow: hidden | |
| .move, .label, .more | |
| position: relative | |
| &:after | |
| background-image: url(data:image/png;base64,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) | |
| background-repeat: no-repeat | |
| background-position: -18px -70px | |
| content: "" | |
| height: 6px | |
| width: 7px | |
| margin-left: 3px | |
| display: inline-block | |
| .refresh | |
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAAZBJREFUOMtj+P//PwM1McOogdQ3EAmwA7EREGcCcQ0QZwOxAZK6BFIMVGJlZZ3Az89/QVJS8r6CgsIjKSmp+7y8vBeAcl1AXMoA1kqcgeJiYmJLgAa9MTAw+BgTE/OiqKjoUUJCwnNjY+OPgoKCn0CGEW2gnJxcmZKS0isHB4fP27ZtuwQUmwLEtd++fZuUk5PzEGYY0Qbq6OicBuIvEydOvADk28DCgIODIxnZMKIN1NPTewn06ufFixeXIscQUA4UCeiAsIEWFhbvgC78FBkZGcOAHUgDsS0QqxJlYGJi4n11dfWvQLwGqIkNzTBWaWnpNiA+aGVllUeUgRs2bFgIVPwZmEzeApPOZKhrxIDYkpmZeTowBbwwNTV9MWnSpHKiDPzw4YPJ1KlTLzs6On6Wl5d/KSAgcIWNje00Hx/fdWAKeG1pafmlt7cXFPvGxGY9ZiCOOH369IHCwsJnzs7Ob4Eu+mhnZ/chPz//+f79+08DLU0iOesB2epA3ADE64F4PxBvA+ImqMvYRosvOAYAThfjRa6TdnUAAAAASUVORK5CYII=) | |
| background-repeat: no-repeat | |
| background-position: -2px 0 | |
| height: 12px | |
| width: 12px | |
| text-indent: -119988px | |
| overflow: hidden | |
| padding: 2px 4px |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment