Laura Kalbag laurakalbag
laurakalbag
/ Sass For Designers Example #2
Created
December 17, 2012 16:53
Example of how repetitive hex colours in CSS can be replaced by Sass variables
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
| // My Sass colour library | |
| $brand-colour: #822733; | |
| a { | |
| color: $brand-colour; | |
| } | |
| .summary { | |
| color: $brand-colour; |
laurakalbag
/ Sass For Designers Example #3
Created
December 17, 2012 17:12
Example of repetitive units in CSS replaced with variables in Sass
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
| $unit = 10px; | |
| h1, h2, h3 { | |
| margin-bottom: $unit; | |
| } | |
| p { | |
| margin-bottom: $unit; | |
| } |
laurakalbag
/ Sass For Designers Example #4
Created
December 17, 2012 17:17
Example of repetitive units in CSS replaced with variables in Sass and arithmetic for calculations with those variables
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
| $unit = 10px; | |
| h1, h2, h3 { | |
| margin-bottom: $unit; | |
| } | |
| p { | |
| margin-bottom: $unit; | |
| } |
laurakalbag
/ Sass for Designers Example #5
Created
December 18, 2012 16:58
Example of non-semantic classes based on design patterns in CSS
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
| .shadow-border { | |
| border-bottom: 1px solid #a4a4a4; | |
| -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
| box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
| padding-bottom: 20px; | |
| margin-bottom: 40px; | |
| } |
laurakalbag
/ Sass for Designers Example #6
Created
December 18, 2012 17:16
Example of rules based on design patterns in CSS
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
| header, article, p.intro { | |
| border-bottom: 1px solid #a4a4a4; | |
| -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
| box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
| padding-bottom: 20px; | |
| margin-bottom: 40px; | |
| } |
laurakalbag
/ Sass for Designers Example #7
Created
December 18, 2012 17:21
Example of rules based on design patterns in CSS made into a Sass mixin
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
| @mixin shadow-border { | |
| border-bottom: 1px solid #a4a4a4; | |
| -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
| box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
| padding-bottom: 20px; | |
| margin-bottom: 40px; | |
| } |
laurakalbag
/ Sass for Designers Example #8
Created
December 18, 2012 17:22
Example of rules based on design patterns in CSS made into a Sass mixin and applied to HTML elements
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
| @mixin shadow-border { | |
| border-bottom: 1px solid #a4a4a4; | |
| -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
| box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
| padding-bottom: 20px; | |
| margin-bottom: 40px; | |
| } |
laurakalbag
/ Sass for Designers Example #9
Created
December 18, 2012 17:33
Example of rules based on design patterns in CSS made into nested Sass mixins and applied to HTML elements
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
| // A few variables thrown in for good measure | |
| $border-colour: #a4a4a4; | |
| $unit: 10px; | |
| @mixin subtle-shadow { | |
| -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
| box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); | |
| } | |
| @mixin shadow-border { |
laurakalbag
/ Sass for Designers Example #10
Created
December 28, 2012 16:29
Example of nesting selectors in Sass to make your stylesheet easier to read.
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
| /* written in plain old CSS */ | |
| .module h3 { | |
| font-weight: bold; | |
| } | |
| .module p { | |
| padding-bottom: 10px; | |
| } |
laurakalbag
/ Sass for Designers Example #11
Last active
December 10, 2015 07:09
Example of an article with varying widths, font-sizes and line-heights depending on the viewport width.
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
| /* initial rule for all viewports, including browsers that don't support @media */ | |
| article { | |
| font-size: 14px; | |
| line-height: 25px; | |
| } | |
| article h2 { | |
| font-size: 18px; | |
| padding-bottom: 15px; | |
| } |
OlderNewer