Andy Mangold andymangold
andymangold
/ touchscreen-considerations.scss
Last active
August 25, 2015 21:20
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
| a.class-name { | |
| display: inline-block; | |
| margin-right: 1em; | |
| text-decoration: none; | |
| &:hover { | |
| text-decoration: underline; | |
| } | |
| @media screen and (max-width: 1000px) { |
andymangold
/ flexbox-example.scss
Created
August 18, 2015 20:35
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
| .flex-box-example { | |
| margin: 1rem 0; | |
| padding: 0.75rem; | |
| box-sizing: border-box; | |
| background-color: gold; | |
| display: flex; | |
| flex-direction: row; | |
| @media screen and (max-width: 1050px) { | |
| flex-direction: column; |
andymangold
/ practical-variable-example-1.scss
Last active
August 29, 2015 14:27
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
| // Variable Declard in Globals | |
| $line-item-breakpoint: 750px; | |
| // cart_page.scss: | |
| 155 | |
| 156: @include max-width(get-width($line-item-breakpoint)) { | |
| 157 font-size: 1rem; | |
| 158 top: 1.5rem; | |
| ... |
andymangold
/ bootstrap-media-query-variables.scss
Created
August 18, 2015 14:01
Example variables used for media queries, taken from Bootstrap.
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
| $screen-xs: 480px; | |
| $screen-sm: 768px; | |
| $screen-md: 992px; | |
| $screen-lg: 1200px; |
andymangold
/ sass-variable-media-query.scss
Created
August 18, 2015 13:52
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
| $breakpoint: 1020px; | |
| @media screen and (max-width: $breakpoint) { | |
| // Styles | |
| } |
andymangold
/ scss-example.scss
Created
August 11, 2015 18:48
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
| %example { | |
| padding: 0.75rem; | |
| box-sizing: border-box; | |
| @media screen and (min-width: 1201px) { | |
| display: inline-block; | |
| width: 50%; | |
| } | |
| } |
andymangold
/ efficient-grouping-of-styling.css
Created
August 11, 2015 16:01
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
| div.example-left, | |
| div.example-right { | |
| padding: 0.75rem; | |
| box-sizing: border-box; | |
| } | |
| div.example-left { | |
| background: gold; | |
| } |
andymangold
/ what-not-to-do.css
Last active
August 29, 2015 14:27
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
| div.example-left, | |
| div.example-right { | |
| padding: 0.75rem; | |
| box-sizing: border-box; | |
| display: inline-block; | |
| width: 50%; | |
| } | |
| div.example-left { | |
| background: gold; |
andymangold
/ two-ways-to-skin-a-cat.css
Last active
August 29, 2015 14:27
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
| /* Default is pink, exception is indigo */ | |
| .class-name { | |
| background: pink; | |
| } | |
| @media screen and (max-width: 1200px) { | |
| .class-name { | |
| background: mediumSpringGreen; | |
| } |
andymangold
/ viewport-meta-tag.html
Last active
August 29, 2015 14:26
This meta tag, or some variation, should be placed in the <head> of your document.
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
| <html> | |
| <head> | |
| <meta name=“viewport” content=“width=device-width, initial-scale=1”> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
NewerOlder