- 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
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
//# 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; | |
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:
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
/// 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 |
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
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 |
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
.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; | |
} |