Skip to content

Instantly share code, notes, and snippets.

Ben Frain benfrain

Block or report user

Report or block benfrain

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
View pseudo-elements.md

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@benfrain
benfrain / cat-colors.json
Created Feb 20, 2015
PostCSS basic setup and test with Gulp
View cat-colors.json
{
"colorList": {
"c1" : ["#000000", "#000011"],
"c2" : ["#000011", "#000022"],
"c3" : ["#000022", "#000033"],
"c4" : ["#000033", "#000044"],
"c7" : ["#000044", "#000055"],
"c8" : ["#000055", "#000066"],
"c9" : ["#000066", "#000077"],
"c10" : ["#000077", "#000088"]
@benfrain
benfrain / inject-css.js
Created Jan 15, 2015
Inject CSS with JavaScript
View inject-css.js
function loadCSS(filename){
var file = document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("href", filename);
if (typeof file !== "undefined") {
document.getElementsByTagName("head")[0].appendChild(file);
}
}
@benfrain
benfrain / iphone-inherit-color-telephone-number.css
Created Dec 23, 2014
Stop iOS rendering a phone number in a different colour
View iphone-inherit-color-telephone-number.css
a[href^=tel] { color: inherit; }
@benfrain
benfrain / SassMeister-input.scss
Last active May 12, 2017
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.0.2)
// ----
$colourList: (
id-1: (
color1: #bbb,
color2: #ccc
),
id-2: (
@benfrain
benfrain / off-canvas.js
Created Nov 30, 2014
Simple Off Canvas Javascript (warning my JS-fu is weak so this may be pants)
View off-canvas.js
// First wait for the DOM to be ready
document.addEventListener('DOMContentLoaded', function(){
// This function merely toggles the class
function a() {
document.querySelector('body').classList.toggle('OffCanvas-Active');
}
// When the header is clicked we fire the function to toggle the class
document.querySelector('.Header').addEventListener('click', a );
// This debounce function (via: https://remysharp.com/2010/07/21/throttling-function-calls) merely stops functioned firing too often on repetitive events (such as resize/scroll)
@benfrain
benfrain / Gulpfile.js
Last active May 17, 2019
Basic Gulp setup
View Gulpfile.js
// Set up vars and mixins so available anywhere
var cssMixins = require("./global/css/mixins.js");
var cssVariables = require("./global/css/variables.js");
var rename = require("gulp-rename");
var gulp = require("gulp");
var postcss = require("gulp-postcss");
var ts = require("gulp-typescript");
var concat = require("gulp-concat");
var nested = require("postcss-nested");
@benfrain
benfrain / scroll-test.css
Created Oct 24, 2014
Full prefixed code for scroll-test example
View scroll-test.css
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
html,body {
@benfrain
benfrain / SublimeLinter.sublime-settings
Created Oct 23, 2014
Sublime Linter scss-lint excludes
View SublimeLinter.sublime-settings
{
"user": {
"debug": false,
"delay": 0.25,
"error_color": "D02000",
"gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
"gutter_theme_excludes": [],
"lint_mode": "background",
"linters": {
"csslint": {
@benfrain
benfrain / Emmet.sublime-settings
Created Oct 15, 2014
Emmet override for Sublime - goes in Packages > User (stops Emmet autocompletes appearing in Sass)
View Emmet.sublime-settings
{
"show_css_completions": false
}
You can’t perform that action at this time.