Matt Anderson mattanddesign
mattanddesign
/ font-basic.scss
Created
October 13, 2016 23:07
A good foundation for letting typography look consistent between browsers
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
| body { | |
| -webkit-font-smoothing: antialiased; /* Antialiasing for Webkit browsers */ | |
| -moz-osx-font-smoothing: grayscale; /* Antialiasing for Moz browsers */ | |
| -webkit-text-size-adjust: 100%; /* Correct rendering of font sizes on mobile Webkit devices */ | |
| font-feature-settings: "liga", "dlig"; /* Adds ligatures if font supports it */ | |
| } |
mattanddesign
/ breakPoints.scss
Created
October 13, 2016 21:53
Maintainable breakpoints using variables
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
| // Break Points | |
| // ========================== | |
| $wall: 1400px; | |
| $desk: 900px; | |
| $lap: 600px; | |
| h1 { | |
| font-size: 3.2rem; |
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
| // Z-index Scale | |
| // ========================== | |
| // Private vars | |
| $zIndex-1: 100; | |
| $zIndex-2: 200; | |
| $zIndex-3: 300; | |
| $zIndex-4: 400; | |
| $zIndex-5: 500; | |
| $zIndex-6: 600; |
mattanddesign
/ font-sizing.css
Last active
October 13, 2016 21:48
Font sizes which map to px values but still provide the benefits of scalable units.
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 { | |
| font-size: 62.5%; /* Sets default font size to 10px i.e. 16 * 62.5% = 10 */ | |
| } | |
| body { | |
| font-size: 1.4rem; /* Body font size is 14px */ | |
| } | |
| h1 { | |
| font-size: 3.2rem; /* H1 font size is 32px */ |
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
| × |
mattanddesign
/ font-stack.css
Created
September 25, 2016 02:46
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
| body { | |
| font-family: -apple-system, | |
| BlinkMacSystemFont, | |
| "Segoe UI", | |
| Roboto, | |
| Oxygen-Sans, | |
| Ubuntu, | |
| Cantarell, | |
| "Helvetica Neue", | |
| sans-serif; |
mattanddesign
/ global.js
Last active
August 1, 2016 12:27
If click target isn't within element do something
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
| element.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| if(this == e.target) { | |
| // Trigger something | |
| }; | |
| }); |