Skip to content

Instantly share code, notes, and snippets.

View klepas's full-sized avatar
🏗️
building design systems

Simon Pascal Klein klepas

🏗️
building design systems
164 followers · 38 following
View GitHub Profile
@klepas
klepas / force-scrollbars-visible.css
Created January 21, 2021 02:03 — forked from IceCreamYou/force-scrollbars-visible.css
Mac OS X hides scrollbars by default. This is annoying for UI design because it means users might not realize that certain areas are scrollable. This public domain Gist forces the scrollbar to always be visible with native behavior in Webkit-based browsers (Chrome and Opera) on Macs.
.force-show-scrollbars ::-webkit-scrollbar-track:vertical {
border-left: 1px solid #E7E7E7;
box-shadow: 1px 0 1px 0 #F6F6F6 inset, -1px 0 1px 0 #F6F6F6 inset;
}
.force-show-scrollbars ::-webkit-scrollbar-track:horizontal {
border-top: 1px solid #E7E7E7;
box-shadow: 0 1px 1px 0 #F6F6F6 inset, 0 -1px 1px 0 #F6F6F6 inset;
}
@klepas
klepas / document-outliner.js
Created March 21, 2019 02:57
Document outliner JS bookmarklet
javascript:(function()%7Bvar numbering%3D0001%2ClinkColor%3D%27%27%2CclickOutside%3Dtrue%2CshowDetails%3Dfalse%2Ci%3D%5B%27%23h5o-outside%2C%23h5o-outside *%7Bbackground-color%3Atransparent%3Bborder%3Anone%3Bborder-radius%3A0%3Bbottom%3Aauto%3Bbox-shadow%3Anone%3Bbox-sizing%3Acontent-box%3Bclear%3Anone%3B%27%2B(linkColor%3F%27color%3A%27%2BlinkColor%2B%27%3B%27%3A%27%27)%2B%27cursor%3Aauto%3Bdirection%3Altr%3Bfloat%3Anone%3Bfont-family%3Asans-serif%3Bfont-size%3Asmall%3Bfont-stretch%3Anormal%3Bfont-style%3Anormal%3Bfont-variant%3Anormal%3Bfont-weight%3Anormal%3Bheight%3Aauto%3Bleft%3Aauto%3Bletter-spacing%3Anormal%3Bline-height%3Anormal%3Bmargin%3A0%3Bopacity%3A1%3Boutline%3Anone%3Boverflow%3Avisible%3Bpadding%3A0%3Bposition%3Astatic%3Bright%3Aauto%3Btext-align%3Aleft%3Btext-decoration%3Anone%3Btext-indent%3A0%3Btext-overflow%3Aclip%3Btext-shadow%3Anone%3Btext-transform%3Anone%3Btop%3Aauto%3Bvertical-align%3Abaseline%3Bvisibility%3Avisible%3Bwhite-space%3Anormal%3Bwidth%3Aauto%3Bword-break%3Anormal%3Bword-spa
@klepas
klepas / mixin-css-truncate.scss
Created May 7, 2018 10:27
Sass CSS truncation mixin
/// Truncate text mixin.
///
/// Expected usage: (visually) truncate text.
///
/// To avoid vertical alignment issues, we set the parent block to
/// display: inline-flex; therefore call this mixin on a parent block.
///
/// @param {keywords} $width ['300px']
///
/// @output Sets rules for truncating text
@klepas
klepas / keybase.md
Created December 6, 2017 06:18

Keybase proof

I hereby claim:

  • I am klepas on github.
  • I am klepas (https://keybase.io/klepas) on keybase.
  • I have a public key whose fingerprint is CD8C 687B BABF CDB1 7481 11A0 F9B2 A031 3665 6A37

To claim this, I am signing this object:

@klepas
klepas / scss-dynamic-class-colour-map-generation.scss
Last active February 18, 2017 09:01
//# Demo: https://codepen.io/anon/pen/MJdXQr
//Assumes something like this:
$uikit-colour-Error: #cc0000 !global;
$uikit-colour-Success: #007554 !global;
$uikit-colour-Warning: #f9c642 !global;
$uikit-colour-Info: #00bfe9 !global;
@klepas
klepas / uikit-unit-testing-ideas.md
Last active February 18, 2017 10:33
CSS tests we may want to implement for UI-Kit 2.x

Tests

  • whitespace between ‘modules’/components
  • maintaining horizontal spacing (eg typographic indents)
  • image sizing (with varying w:h ratios) across varying breakpoints
  • logo sizes, esp. at specific breakpoints
  • checking nested content styles, esp. when expanding the .gov-speak typography classes
  • icon alignment
  • table styling and behaviour at varying breakpoints, esp. with more complex tables
  • visibility and placement of menu buttons, etc. for interactive components at varying breakpoints