Skip to content

Instantly share code, notes, and snippets.

Una Kravets una

Block or report user

Report or block una

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@una
una / color-functions.md
Last active Aug 9, 2019
CSS Color Functions
View color-functions.md

CSS Color Functions

Web developers and design systems developers often use functions to design components. With the increasing usage of design systems that support multiple platforms, and increased capability of Dark Mode in UI, this becomes even more useful to not need to manually set color, and to instead have a single source from which layouts are calculated. Currently Sass, calc() on HSL values, or PostCSS is used to do this.

Examples:

  • Components with color variations based on calculations from a parent. (i.e. Button with outline that uses the primary button color to adjust the size)
  • Theming - Palletes based on a color or set of colors for themes. Especially when a single base system is used with multiple themes
  • Uniformity among transformations between components with different primary colors

Proposal

@una
una / todo.md
Last active May 27, 2018
TODOS
View todo.md

Memorial Day Weekend

  • Get a massage (use gift card)
  • Pedicure
  • Film/edit 2 videos
  • Channel art for Youtube
  • Record Toolsday
  • Watch The Shape of Water
  • Work on book
@una
una / links.md
Last active Jan 13, 2019
a-css-carol--links
@una
una / text.md
Last active Apr 26, 2017
Cleanup Branches
View text.md
  1. Go to the remote repo and delete outdated branches

  2. Then either:

    • Locally cleanup only merged branches: git branch --merged | grep -v "\*" | xargs -n 1 git branch -d
    • Locally remove fetched, outdated branches: git for-each-ref --format='%(refname:short) %(upstream)' refs/heads/ | awk '$2 !~/^refs\/remotes/' | xargs git branch -D
@una
una / index.html
Created Apr 2, 2017
Pure CSS (Sass) Carnival Game
View index.html
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<h1>CSS Only Carnival: Target Practice</h1>
<h2>This game uses no JS at all (isn't CSS awesome?). You have 8 seconds to hit as many targets as you can!</h2>
<div class="game-over">
<h1>Game Over!</h1>
<a class="play-again" target="_parent" href="http://codepen.io/una/full/NxZaNr">Play Again</a>
</div>
View keybase.md

Keybase proof

I hereby claim:

  • I am una on github.
  • I am una (https://keybase.io/una) on keybase.
  • I have a public key whose fingerprint is CC61 7710 B1E5 DC00 059A B02B E6C6 D8DA A734 F1ED

To claim this, I am signing this object:

@una
una / SassMeister-input.scss
Created Feb 4, 2016
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
// HELPER FUNCTIONS
// Map Deep Set by Hugo Giraudel
// link: http://www.sitepoint.com/extra-map-functions-sass/
@function map-deep-set($map, $keys.../*, $value */) {
$map-list: ($map,);
@una
una / SassMeister-input.scss
Last active Feb 4, 2016
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
// initial map
$colors: (
'red': (
'base': #f00
),
'yellow' : (
@una
una / SassMeister-input.scss
Created Feb 4, 2016
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
// initial map
$colors: (
'red': (
'base': #f00
),
'yellow' : (
You can’t perform that action at this time.