This is just stuff that I have put down that I find I use a lot of the time for my own reference.
$ git pull
Ondreas
Ondreas
/ _invisible-content.scss
Created
July 20, 2017 08:13
Invisible content technique | 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
| // =========================================================================== | |
| // INVISIBLE CONTENT technique | |
| // =========================================================================== | |
| // 1) Hide visually and from screen readers | |
| // http://bit.ly/hide-for-all | |
| // 2) Hide only visually, but have it available for screen readers | |
| // http://bit.ly/hide-only-visually-but-keep-accessible | |
| // 3) For long content, line feeds are not interpreted as spaces and small | |
| // width causes content to wrap 1 word per line. |
Ondreas
/ _scroll-shadows.scss
Last active
May 1, 2020 14:36
[Scrolling Shadows Sass @mixin] Pure CSS scrolling shadows with background-attachment: local #sass #mixin #shadow
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
| // =========================================================================== | |
| // SCROLL SHADOWS | |
| // =========================================================================== | |
| // | |
| // @title: Pure CSS scrolling shadows with background-attachment: local | |
| // @author: Roman Komarov & Lea Verou | |
| // @source: http://kizu.ru/en/fun/shadowscroll/ | |
| // @article: http://lea.verou.me/2012/04/background-attachment-local/ | |
| // @code: https://codepen.io/laustdeleuran/pen/DBaAu?editors=1100 | |
| // |
Ondreas
/ SassMeister-input.scss
Created
July 18, 2017 22:59
— forked from lunelson/SassMeister-input.scss
Fork of Tomeij's Animation 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
| // ---- | |
| // Sass (v3.4.14) | |
| // Compass (v1.0.3) | |
| // ---- | |
| @mixin animation($args...) { | |
| $name: unique-id(); // name for @keyframes | |
| $args: join((), $args, 'space'); // conform args as SSV | |
| animation: $name + ' ' + $args; | |
| @keyframes #{$name} { |
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
| /* Webkit-only custom scrollbar styling */ | |
| ::-webkit-scrollbar-button { | |
| background: blue; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 12px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background-color: #ffff00; |
Ondreas
/ content-box.css
Created
July 1, 2017 11:48
Aligning an element’s background with its content box (via CSS background-origin). (link: http://codepen.io/HugoGiraudel/pen/vXpqmw)
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
| .box { | |
| margin: 1em auto; | |
| padding: 1.5em 2em; | |
| border: 4px solid #ccc; | |
| border-radius: 0.15em; | |
| } | |
| .box--manual, | |
| .box--automatic { | |
| background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABpUlEQVRYR+2V4TEEQRCF30VABi4DMkAGRIAIEAEiQASIgAyQARmQARFQ39XMVV/ruZnZq8KP7T9bdbvd883rfn0T/XFMVjh/XdJlyj+V9DGk1lCALUk3kngSL5KO0rOLYwjAXjocBWygABAPPQS9AFeSjisH8A0taYpWAG57L2mnqar0JGm/ZS5aAOjzoyQvOSxITjAPPmjJbm0uagAnZtLtAe+SmAWGjwCS3m8EINS4LilXAsgWOwwSn9Ph3nbkALEd5Nymufhh1QjAW8zWu5B0nn4o7QHenwUQoVU9QMlin5JQI1ustgeow63Xala1ACWLvSbJ31IxQNiA0R7AfhxMTBPwZqDG3KoAUIgpz1vNfn8niSGid8vmwubYfpPDYQcBxMyqAFDcS5Utlm+zbC6iAff9RrXQqgB8uQreYiXJS87Kv3Mx25LQqh7AWqxV8hqIb8mCVS2AtViv5DUI35K5VfMMWIsNlbwG4VsysyoA2CVbjCJ+JmqFe99b60+jTfibABoBhihQ+wuvtXAhfwQYFRgV+JcK9O72lb6vLZWVirckfwPf2XItb8PuCwAAAABJRU5ErkJggg=="); |
Ondreas
/ github-cheat-sheet.md
Created
June 8, 2017 09:51
— forked from spences10/github-cheat-sheet.md
GitHub Cheat Sheet
Ondreas
/ _strip-units.scss
Last active
July 26, 2017 14:51
Strip units from a value | Sass @function by Hugo Giraudel
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
| // =========================================================================== | |
| // STRIP UNITS | |
| // =========================================================================== | |
| // | |
| // @source : CSS-Tricks | |
| // @author : Hugo Giraudel | |
| // @article: http://bit.ly/sass-strip-units | |
| // | |
| // @param | $number = The value including units to be 'stripped'. | |
| // |
Ondreas
/ _px-to-rem.scss
Last active
May 1, 2020 13:26
[px2rem Sass @function] Calculate 'rem' from 'px' units (Sass @function by Nicole Sullivan) #sass #converter #units #rem #function
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
| // ============================================================================ | |
| // PX to REM @function | |
| // ============================================================================ | |
| // | |
| // Calculate 'rem' units from 'px' units | |
| // Oldie but Goodie ;) | |
| // | |
| // @author : Nicole Sullivan | |
| // @twitter: @stubbornella | |
| // @article: http://bit.ly/2bbFozp |
Ondreas
/ _string-replacement-func.scss
Created
November 6, 2016 15:27
String replacement @function | 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
| // ============================================================================ | |
| // STRING REPLACEMENT @function | |
| // ============================================================================ | |
| // | |
| // @param: $string | target the desired value of a property | |
| // @param: $a | which part of the '$string' to target | |
| // @param: $b | desired replacement value of the targeted '$a' parameter | |
| // | |
| // USAGE: | |
| // ---------------------------------------------------------------------------- |