Sass Buttons WIP
Easy button generation with color and size input -- considering text-to-background color contrast and size
A Pen by Una Kravets on CodePen.
Una Kravets una
una
/ sassy-shapes
Last active
October 30, 2021 18:56
Sassy Shape Machine Mixin :)
Make Sassy shapes in seconds!
View sassy-shapes
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
| // Some cute colors: | |
| $color1: #967bd3; | |
| $color2: #c8815b; | |
| $color3: #8cd6d8; | |
| $color4: #bee6b6; | |
| $color5: #dd9bb9; | |
| $color6: #c4b5e6; | |
| $color7: #cb6363; | |
| //Here's where you make the shapes! |
View SassMeister-input-HTML.html
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
| <div class="square"></div> | |
| <div class="circle"></div> | |
| <div class="triangle"></div> | |
| <div class="list-container"> | |
| <ul class="the-list"> | |
| <li class="one">One</li> | |
| <li class="two">Two</li> | |
| <li class="three">Three</li> | |
| <li class="four">Four</li> | |
| </ul> |
View SassMeister-input-HTML.html
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
| <ul class="color-list"> | |
| <li class="color-box brick-red"></li> | |
| <li class="color-box strawberry"></li> | |
| <li class="color-box deep-orange"></li> | |
| <li class="color-box tangerine"></li> | |
| <li class="color-box gold"></li> | |
| <li class="color-box sunshine"></li> | |
| <li class="color-box grass-green"></li> | |
| <li class="color-box lime"></li> | |
| <li class="color-box funky-purple"></li> |
View SassMeister-input-HTML.html
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
| <!-- @una made this --> | |
| <ul class="color-list"> | |
| <li class="color-box brick-red"></li> | |
| <li class="color-box strawberry"></li> | |
| <li class="color-box deep-orange"></li> | |
| <li class="color-box tangerine"></li> | |
| <li class="color-box gold"></li> | |
| <li class="color-box sunshine"></li> | |
| <li class="color-box grass-green"></li> |
View SassMeister-input.scss
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.3.4) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| .cat { | |
| color: gold; | |
| // must be both a cat and black in the same class=".." | |
| &.black { |
View SassMeister-input.scss
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.3.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| $breakpoints: ( | |
| "(min-width: 400px)" "small", | |
| "(min-width: 767px)" "med", | |
| "(min-width: 1200px)" "large" | |
| ); |
una
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:09
Singularity Sample 1: Grids in Grids
View SassMeister-input-HTML.html
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
| <body> | |
| <div class="main"> | |
| <div class="one">One</div> | |
| <div class="two">Two</div> | |
| <div class="three"> | |
| <div class="a">Three A</div> | |
| <div class="b">Three B</div> | |
| <div class="c">Three C</div> | |
| </div> | |
| </div> |
una
/ SassMeister-input-HTML.html
Created
November 13, 2014 02:26
Singularity Grid Sample 1: Spanning Grids
View SassMeister-input-HTML.html
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
| <body> | |
| <div class="main">Main Section</div> | |
| <div class="first">First Section</div> | |
| <div class="second">Second Section</div> | |
| </body> |
una
/ SassMeister-input-HTML.html
Created
November 13, 2014 02:40
Singularity Demo 3: Grids on Grids on Grids
View SassMeister-input-HTML.html
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
| <body> | |
| <div class="main"> | |
| <div class="one">One</div> | |
| <div class="two">Two</div> | |
| <div class="three"> | |
| <div class="a">Three A</div> | |
| <div class="b">Three B</div> | |
| <div class="c">Three C</div> | |
| </div> | |
| </div> |
OlderNewer