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
June 9, 2025 07:29
Sassy Shape Machine Mixin :)
Make Sassy shapes in seconds!
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
| // Some cute colors: | |
| $color1: #967bd3; | |
| $color2: #c8815b; | |
| $color3: #8cd6d8; | |
| $color4: #bee6b6; | |
| $color5: #dd9bb9; | |
| $color6: #c4b5e6; | |
| $color7: #cb6363; | |
| //Here's where you make the shapes! |
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 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> |
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
| <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> |
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
| <!-- @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> |
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
| // ---- | |
| // 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 { |
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
| // ---- | |
| // 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
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> | |
| <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
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> | |
| <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
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> | |
| <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