Skip to content

Instantly share code, notes, and snippets.

View mistergraphx's full-sized avatar

Arnaud B. mistergraphx

11 followers · 7 following
View GitHub Profile
@mistergraphx
mistergraphx / SassMeister-input-HTML.html
Created December 20, 2015 09:21
Generated by SassMeister.com.
<div class="container">
<div class="col-2">
<h3>Titre</h3>
</div>
</div>
@mistergraphx
mistergraphx / SassMeister-input.scss
Created December 20, 2015 07:26
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
@import "bourbon/bourbon";
$webfonts: (
icon:'fonts/icons/font/',
open-sans:'font/opensans/font/'
);
@mistergraphx
mistergraphx / _brightness.scss
Created December 20, 2015 06:52 — forked from jlong/_brightness.scss
// Brightness math based on:
// http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;
@function brightness($color) {
// Extract color components
@mistergraphx
mistergraphx / SassMeister-input.scss
Created December 19, 2015 10:00
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
@import "bourbon/bourbon";
$webfonts: (
icon:'fonts/icons/font/',
open-sans:'font/opensans/font/'
);
@mistergraphx
mistergraphx / SassMeister-input-HTML.html
Last active November 1, 2015 07:47
Generated by SassMeister.com.
<h1 column="2">Columns + value</h1>
<h1 column>Columns only</h1>
<p column="2 +1">Columns +Offsett</p>
<p column="2 -1">Columns -Offsett</p>
<p column="2 of 4">Columns OF Context</p>
<p column="2/4">Columns / Context</p>
<p column="2 of 4 +1">Columns OF Context +Offsett</p>
<p column="2/4 +1">Columns / Context +Offsett</p>
<p column="2 of 4 -1">Columns OF Context -Offsett</p>
<p column="2/4 -1">Columns / Context -Offsett</p>
@mistergraphx
mistergraphx / SassMeister-input-HTML.html
Last active December 5, 2017 09:27
Neat UnSemantic grid helpers https://www.sassmeister.com/gist/ccc5b07e65e2531517d7
<main container>
<div row>
<p column>Full-width is default</p>
<p column="2 +3">2 +3</p>
</div>
<div row>
<section column>
<p>8</p>
@mistergraphx
mistergraphx / SassMeister-input-HTML.html
Created October 30, 2015 12:40
Generated by SassMeister.com.
<main class="debug">
<h1>Summary</h1>
<div class="block">
<h2>Bloc 1</h2>
</div>
</main>
@mistergraphx
mistergraphx / mediaqueries.css
Last active October 30, 2015 16:53
Details about usin em, px or rems in mediaquerries: http://stackoverflow.com/questions/22228568/switching-to-em-based-media-queries From http://app.kodery.com/s/1075
/* ===== == = === 20em (320px) === = == ===== */
@media only screen and (min-width : 20em) {
}
/* ===== == = === 30em (480px) === = == ===== */
@media only screen and (min-width : 30em) {
@mistergraphx
mistergraphx / placeholder_theming.sass
Created September 10, 2015 06:05
SitePoint : Form theming with Sass : From http://www.sitepoint.com/theming-form-elements-sass/
$pseudo-phprefix: "::-webkit-input-placeholder" "::-moz-placeholder" ":-ms-input-placeholder" "::placeholder";
$ph-styles: (
font-family: sans-serif,
font-size: medium,
font-style: normal,
font-weight: normal,
color: inherit,
letter-spacing : normal,
line-height: normal,
@mistergraphx
mistergraphx / responsive_typography.scss
Last active September 9, 2015 07:32
From https://medium.com/@gommaar/responsive-typography-with-sass-maps-3b0838292662
@mixin landing($base-size){
font-size:$base-size/2.222;
h1 {margin:0 auto $base-size auto; height:$base-size*5;}
h2, h3 {margin:0 0 ($base-size - ($base-size/3));}
h2 {font-size:$base-size - ($base-size/5);}
h3 {font-size:$base-size - ($base-size/3);}
p {margin-bottom:$base-size/2;
&:last-child {margin-bottom:0}
}