Skip to content

Instantly share code, notes, and snippets.

View NickColley's full-sized avatar

Nick Colley NickColley

86 followers · 1 following
View GitHub Profile
@NickColley
NickColley / index.html
Created July 3, 2018 16:55
Customised colours - Circle SVG example
<!-- Example of using `currentColor` to set the colour of a SVG circle -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle fill="currentColor" cx="10" cy="10" r="10"/>
</svg>
@NickColley
NickColley / index.html
Created July 3, 2018 16:55
Customised colours - Panel example
<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration -->
<style>
.panel {
box-sizing: border-box;
height: 100px;
width: 100px;
border: 3px solid black;
background: black;
color: white;
@NickColley
NickColley / index.html
Created July 13, 2018 12:31
Customised colours - Box-shadow example
<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration -->
<style>
.round-button {
font-size: 16px;
border-radius: 50%;
height: 6em;
width: 6em;
}
.round-button:focus {
@NickColley
NickColley / index.html
Created October 21, 2018 23:36
JS Bin // source https://jsbin.com/bucijav
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
html, body {
font-size: 16px;
font-family: sans-serif;
@NickColley
NickColley / data-list-examples.njk
Created November 22, 2018 13:43
data-list-examples
{% from "warning-text/macro.njk" import govukWarningText %}
{{ govukWarningText({
text: "This is work in progress — No macro",
iconFallbackText: "Warning"
}) }}
<h2 class="govuk-heading-m">DL - govuk-data-list with actions and borders</h2>
@NickColley
NickColley / webfonts-are-huge-and-blocking.md
Created December 14, 2018 16:31
GOV.UK Webfonts are huge and blocking

Webfonts are huge and blocking

July 25th, 2016

Webfonts on GOV.UK block initial render and are surprisingly big at 200kb GZIPed

Measured impact

I have measured a 2g/3g connection with fonts blocked to see the difference it could make to lazy-load the font with the following results

@NickColley
NickColley / visually-hidden-audit.csv
Last active July 6, 2019 15:18
Visually Hidden Audit
We can make this file beautiful and searchable if this error is corrected: Unclosed quoted field in line 3.
Test name,Link,VoiceOver OSX,VoiceOver iOS,VoiceOver iPad,NVDA,JAWS,IE8,IE9,IE10,Internet Explorer 11 (Windows),Edge (Windows),Google Chrome (Windows),Mozilla Firefox (Windows),Safari (macOS),Google Chrome (macOS),Mozilla Firefox (macOS),Safari (iOS),Google Chrome (iOS),Google Chrome (Android),Samsung Internet (Android)
Control,https://output.jsbin.com/yesilis,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected
Visually Hidden with CSS,https://output.jsbin.com/xiqohaz,"Visually hidden text in links is always at the front for example: ""link, name Change"".
This is still the same if the visually hidden text is in the middle of the link.
Buttons behave as expected.
","When swiping left and right visually hidden text is read out.
When pressing on links directly visually hidden text is not read out.
@NickColley
NickColley / govuk-frontend-popular-content.md
Created February 8, 2019 16:45
govuk-frontend-popular-content
Content Views Unique visitors
GitHub - alphagov/govuk-frontend: GOV.UK Frontend contains the code you need ... 1,230 403
govuk-frontend/src at master 423 97
Issues 301 45
Pull Requests 264 25
Search · template 243 48
govuk-frontend/installing-with-npm.md at master · alphagov/govuk-frontend · G... 221 111
govuk-frontend/src/components at master 213 66
govuk-frontend/src/settings at master 181 21
@NickColley
NickColley / _focusable.scss
Created May 8, 2019 10:00
_focusable.scss mixin with drop-shadow depending on display property
////
/// @group helpers
////
/// Focusable helper
///
/// Provides an additional outline to clearly indicate when the target element is
/// focussed. Used for interactive elements which themselves have some background
/// or border, such as most form elements.
///
@NickColley
NickColley / Sass mixins to help people implement focus styles.md
Created May 20, 2019 11:12
Sass mixins to help people implement focus styles

Sass mixins to help people implement focus styles

Overview of mixins

Sass is an extension language for CSS, it adds features to make maintaining large CSS codebases easier.

One feature in Sass is mixins.

“Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.”