Skip to content

Instantly share code, notes, and snippets.

View atelierbram's full-sized avatar

Bram de Haan atelierbram

52 followers · 62 following
View GitHub Profile
@atelierbram
atelierbram / Colorscheme-Lab-–-with-Sass-Variables.markdown
Last active March 4, 2022 11:02
A CodePen by Bram de Haan.

Colorscheme Lab – with Sass Variables

Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme. When using Base16 Builder as a building tool, you can, like Solarized, make colorschemes that come in a light – and in a dark background version.
The Sass variables that are used here in this 'Colorscheme Lab', are basically the same that are used in the template.erb files by Base16 Builder, so after creating a colorscheme with this lab, converting to many application formats for syntax highlighting comes within reach.

A CodePen by Bram de Haan

@atelierbram
atelierbram / bash-shell-cheatsheet.md
Last active July 7, 2017 20:26

BASH CHEAT SHEET

This file contains short tables of commonly used items in this shell. In most cases the information applies to both the Bourne shell (sh) and the newer bash shell.

Tests (for ifs and loops) are done with [ ] or with the test command.

Checking files:

-r file # Check if file is readable.
@atelierbram
atelierbram / rems-fallbacks-and-support.css
Last active January 2, 2016 23:39
Rems fallbacks and support
/* the font-size mixin */
/* example of usage */
.prose p {
font-size: 14px;
font-size: 0.875rem;
}
@atelierbram
atelierbram / working-with-lists-and-each-loops-in-sass.css
Last active January 2, 2016 23:39
Working with lists and @each loops in Sass with the index and nth function
/* Sass-variables template (https://github.com/atelierbram/c-tiles16)
* http://codepen.io/atelierbram/pen/cnEpr
* http://benfrain.com/working-with-lists-and-each-loops-in-sass-with-the-index-and-nth-function/
*/
.stuff-1 {
color: #101718;
background-color: #8357db;
border: 1px solid #5a29bd;
}
@atelierbram
atelierbram / css-user-agent-selectors.html
Created January 11, 2014 22:24
CSS: User Agent Selectors
<html>
<head> … </head>
<body>
<!-- http://rog.ie/blog/html5-boilerplate-addon -->
<script>
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
</script>
@atelierbram
atelierbram / get-pseudo-element.css
Last active January 3, 2016 06:59
/*
* http://davidwalsh.name/pseudo-element/
* https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle
*/
.element:before {
content: 'NEW';
color: rgb(255, 0, 0);
}
@atelierbram
atelierbram / conditional-media-query-mixins.css
Last active January 3, 2016 17:29 — forked from anonymous/SassMeister-input.scss
.sidebar {
width: 33.33%;
}
@media (max-width: 600px) {
.sidebar {
width: 100%;
}
}
@media (min-width: 1250px) {
.sidebar {
@atelierbram
atelierbram / SVG-background-images-PNG-retina-fallback.css
Last active January 3, 2016 17:29
Generated by SassMeister.com.
body {
background-image: url(../img/pattern.svg);
}
.no-svg body {
background-image: url(../img/pattern.png);
}
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.no-svg body {
background-image: url(../img/pattern@2x.png);
}
@atelierbram
atelierbram / clearfix.css
Last active January 3, 2016 17:38
Generated by SassMeister.com.
.container-with-floated-children:before, .container-with-floated-children:after {
content: " ";
display: table;
}
.container-with-floated-children:after {
clear: both;
}
br {
clear: both;
@atelierbram
atelierbram / visuallyhidden.css
Created January 18, 2014 21:19
Generated by SassMeister.com.
.visuallyhidden,
.mobile-navigation-trigger b {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;