This file contains 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
| /** | |
| * For modern browsers | |
| * 1. The space content is one way to avoid an Opera bug when the | |
| * contenteditable attribute is included anywhere else in the document. | |
| * Otherwise it causes space to appear at the top and bottom of elements | |
| * that are clearfixed. | |
| * 2. The use of `table` rather than `block` is only necessary if using | |
| * `:before` to contain the top-margins of child elements. | |
| Src= http://nicolasgallagher.com/micro-clearfix-hack/ |
This file contains 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
| /*for any paragraph in order to divide it into columns*/ | |
| .three-col { | |
| -moz-column-count: 3; | |
| -moz-column-gap: 20px; | |
| -webkit-column-count: 3; | |
| -webkit-column-gap : 20px; | |
| -moz-column-rule-color: #ccc; | |
| -moz-column-rule-style: solid; | |
| -moz-column-rule-width: 1px; |
This file contains 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
| <nav> | |
| <ul> | |
| <li>..</li> | |
| </ul> | |
| </nav> |
This file contains 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
| <nav class="navbar center"><!--this goes inside the header--> | |
| <ul> | |
| <li><a href="/">Home</a></li> | |
| <li><a href="/">About us</a></li> | |
| <li><a href="/">Our products</a></li> | |
| <li><a href="/">Customer support</a></li> | |
| <li><a href="/">Contact</a></li> | |
| </ul> | |
| </nav> |
This file contains 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
| /* | |
| layout | |
| box | |
| text | |
| elements | |
| based on conversation here: Mozilla, seen here: http://smacss.com/book/formatting#comment-323275246 | |
| missing a place for animations and transitions | |
| */ | |
| el { |
SaraSoueidan
/ styles
Created
June 8, 2013 02:36
Let's say you had three major breakpoints in a design. This design also had a large background graphic and you wanted it looking it's best on any screen (retina or not) and not waste any bandwidth. You'd set up 6 media queries, one for each breakpoint and one for each one of those breakpoints on retina. Then you'd override the background image a…
This file contains 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
| @media only screen and (min-width: 320px) { | |
| /* Small screen, non-retina */ | |
| } | |
| @media | |
| only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), |
SaraSoueidan
/ snippet
Created
June 8, 2013 02:35
DOM Query (select all elements in a list under a condition)
This file contains 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
| /*select all elements in a given list on elements as soon or as long as this lists contains | |
| at least a certain number of elements*/ | |
| /*useful when we need to start changing styles of elements when they start getting crowded | |
| after a certain number*/ | |
| /*for more explanation: http://vimeo.com/31719130 (lea verou's talk)*/ | |
| /*Supported in all major moder browsers, and IE >= 9 */ | |
| #palette > li:first-child:nth-last-child(n+3) span, /*like media query for the dom, now it checks if | |
| it has at leat 3 elements, and selects the span, in other words, select the span in all |
This file contains 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
| .element { transform: rotateY(12deg); outline: 1px solid transparent; } | |
| /*just add a transparent outline to the image/div that's being transformed*/ |
This file contains 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
| .superscript{font-size:xx-small; vertical-align:top;} | |
| .subscript{font-size:xx-small; vertical-align:bottom;} |
This file contains 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
| @media | |
| only screen and (-webkit-min-device-pixel-ratio: 2), | |
| only screen and ( min--moz-device-pixel-ratio: 2), /* Looks like a bug, so may want to add: */ | |
| only screen and ( -moz-min-device-pixel-ratio: 2), | |
| only screen and ( -o-min-device-pixel-ratio: 2/1), | |
| only screen and ( min-device-pixel-ratio: 2), | |
| only screen and ( min-resolution: 192dpi), | |
| only screen and ( min-resolution: 2dppx) { | |
| /* Your retina specific stuff here */ | |
| } |