Skip to content

Instantly share code, notes, and snippets.

@achisholm
achisholm / breakpoint-groups.md
Last active March 11, 2018 10:14
Mixins for clean and readable RWD @ media includes.

Note: Don't just copy & paste this. ADAPT THE WIDTHS TO SUIT THE CONTENT.

TODO notes to self:

  • Decide and articulate where you stand with most appropriate unit. em, px, or something else?
  • Naming system – is mobile, tablet, desktop really the best method for naming the main horizontal divisions?
  • Add sets of -up and -only suffixed mixins.
@achisholm
achisholm / bem-nesting.scss
Created March 11, 2018 07:59
The okay-way to nest BEM-style selectors
.block {
// Declarations for `.block`
&__element {
// Declarations for `.block__element`
}
&--modifier {
// CSS declarations for `.block--modifier`
@achisholm
achisholm / comment-headers.scss
Last active March 11, 2018 07:45
SASS header comments for dividing large files into sections and sub-sections.
//******************************************************************************
// Page Header.
//
// Styles for the main <header> section and including the main banner, main
// search form and social media links.
//******************************************************************************
//==============================================================================
// Section Heading.
//
ZE2 9AW - Perrie Beanie's, Skaw, Shetland
M1 5AN - Manchester
W13 8DL - The Duke of Kent, London
@achisholm
achisholm / ui-colours.scss
Last active March 11, 2018 10:48
A set of nice UI Colours
$turqouise: #1abc9c;
$green-sea: #16a085;
$emerald: #2ecc71;
$nephritis: #27ae60;
$peter-river: #3498db;
$belize-hole: #2980b9;
$amethyst: #9b59b6;
$wisteria: #8e44ad;
$wet-asphalt: #34495e;
$midnight-blue: #2c3e50;
@achisholm
achisholm / gist:6ccdd02478ad2e46e02d
Created May 13, 2014 07:31
Exercise in summing
// http://www.codewars.com/kata/52cd0d600707d0abcd0003eb/train/javascript
// Test Failed: maximumSum with n>values.length not working as expected
var values = [5, 4, 3, 2, 1];
function minimumSum(values, n){
values.sort();
var total = 0;
for (var i = 0; i < n; i++) {
total += values[i];
// Write a function that takes a function and an argument, and returns a function that can supply a second argument.
function add(x,y){
return x + y;
}
function mul(x,y){
return x * y;
}
function curry(a,b){
// Write a function that takes a binary function, and makes it callable with two invocations.
function mul(x, y){
return x * y;
}
function applyf(binary){
return function (x) {
return function (y) {
return binary(x, y);
// Write a function that adds from two invocations.
function addf(x){
return function(y){
return x + y;
}
}
console.log(addf(3) (4));
@achisholm
achisholm / gist:11184118
Created April 22, 2014 15:42
CSS truncating one-line text headings
%truncate {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}