This is how we generate column icons in overv.io. Full article: https://medium.com/p/5a075ca7d081
A Pen by Mirek Mencel on CodePen.
Last active
August 29, 2015 14:01
-
-
Save mirekm/b9b788139e3b1d2bbc07 to your computer and use it in GitHub Desktop.
A Pen by Mirek Mencel.
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> | |
| <head> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/md5.js"></script> | |
| </head> | |
| <div class="icon"> | |
| <div>P</div> | |
| </div> | |
| <div class="icon"> | |
| <div class="half-vertical">P</div> | |
| <div class="half-vertical">P</div> | |
| </div> | |
| <div class="icon"> | |
| <div class="quarter">P</div> | |
| <div class="quarter">P</div> | |
| <div class="half-horizontal">P</div> | |
| </div> | |
| <div class="icon"> | |
| <div class="quarter">P</div> | |
| <div class="quarter">P</div> | |
| <div class="quarter">P</div> | |
| <div class="quarter">P</div> | |
| </div> | |
| </body> |
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
| extractBits = (data) -> | |
| result = 0 | |
| BITS = [31, 23, 15, 7] | |
| for srcInt in data | |
| for bit in BITS | |
| bitMask = 1 << bit; | |
| result <<= 1 | |
| if srcInt & bitMask | |
| result |= 1 | |
| result | |
| toHslString = (color) -> | |
| "hsl(#{color.hue}, #{Math.round color.saturation*100}%, #{Math.round color.lightness*100}%)" | |
| generateColor = (id) -> | |
| hash = CryptoJS.MD5 id | |
| shortMD5 = extractBits hash.words | |
| hue = shortMD5*360 / (1<<16) | |
| color = | |
| hue: hue | |
| saturation: 0.4 | |
| lightness: 0.4 | |
| toHslString color | |
| buildIcon = (ids) -> | |
| # Create container div | |
| $icon = $('<div>').addClass 'icon example1' | |
| boxes = [] | |
| # Create inner boxes | |
| for id in ids | |
| color = generateColor id | |
| $innerBox = $('<div>').html id[0].toUpperCase() | |
| $innerBox.css 'background-color', color | |
| boxes.push $innerBox | |
| $icon.append $innerBox | |
| # Assign internal classes | |
| boxClass = [ | |
| [] | |
| ['half-vertical', 'half-vertical'] | |
| ['quarter', 'quarter', 'half-horizontal'] | |
| ['quarter', 'quarter', 'quarter', 'quarter'] | |
| ] | |
| for klass, index in boxClass[boxes.length-1] | |
| boxes[index].addClass klass | |
| $icon | |
| $ () -> | |
| ids = [ | |
| 'overv.io' | |
| 'overv.io-beta' | |
| 'saleor' | |
| 'satchless' | |
| ] | |
| $('body').append buildIcon ids[0..0] | |
| $('body').append buildIcon ids[0..1] | |
| $('body').append buildIcon ids[0..2] | |
| $('body').append buildIcon ids[0..3] |
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
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: rgba(0,0,0,0.3); | |
| } | |
| .icon:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .icon { | |
| width: 50px; | |
| height: 50px; | |
| border: 1px solid black; | |
| margin: 20px; | |
| div { | |
| float: left; | |
| border: 1px solid black; | |
| width: 100%; | |
| height: 100%; | |
| line-height: 50px; | |
| text-align: center; | |
| &.half-horizontal { | |
| height: 50%; | |
| font-size: 50%; | |
| line-height: 25px; | |
| } | |
| &.half-vertical { | |
| width: 50%; | |
| font-size: 50%; | |
| line-height: 50px; | |
| } | |
| &.quarter { | |
| width: 50%; | |
| height: 50%%; | |
| font-size: 50%; | |
| line-height: 25px; | |
| } | |
| } | |
| } | |
| .example1 { | |
| border: 0; | |
| color: white; | |
| text-align: center; | |
| line-height: 50px; | |
| div { | |
| border: 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment