Skip to content

Instantly share code, notes, and snippets.

@jonathanpath
jonathanpath / _z-index.scss
Last active June 23, 2018 10:51
Z-index Sass scale
// ----------------------
// == Z-index scale (inspired by https://gist.github.com/fat/1f6da6b3bd0311a1f8a0)
// ----------------------
// Z-Index Scale (private vars)
// --------------------------------------------------
$zindex-1: 100;
$zindex-2: 200;
$zindex-3: 300;
$zindex-4: 400;
@jonathanpath
jonathanpath / Full modal on Bootstrap
Last active May 23, 2017 10:06
_full-modal-boostrap.scss
/* =Modal full
---------------------- */
.modal-full {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
background: #fff;
transform: translate(0,0) !important;
@jonathanpath
jonathanpath / _header-title.scss
Created March 8, 2017 13:19
Header title full width for bootstrap (mobile first style)
.header-title {
@media (max-width: $screen-xs-max) {
width: 100%;
position: absolute;
left: 0;
text-align: center;
padding: 15px 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@jonathanpath
jonathanpath / _table-bootstrap.scss
Created January 17, 2017 15:53
Smart responsive bootstrap tables
/*===========================================
= Override BS3 tables =
===========================================*/
.table-smartresponsive {
@media (max-width: $screen-xs-max) {
th {
display: none;
}
@jonathanpath
jonathanpath / _constrained.scss
Last active January 17, 2017 14:24
Constrained layout SMACSS style
/*===================================
= Constrained =
===================================*/
$constrained-width: 1170;
/* =With padding
---------------------- */
@jonathanpath
jonathanpath / _buttons-bootstrap.scss
Last active September 9, 2016 12:20
Facebook and Twitter shares buttons (based on Bootstrap)
/* ==|====================
Vendor override/Bootstrap/Buttons
======================= */
/* =Sizes
---------------------- */
.btn-xlg {
font-size: 20px;
padding: 14px 32px;
@jonathanpath
jonathanpath / _buttons-foundation.scss
Last active September 9, 2016 12:20
Facebook and Twitter Buttons (based on Foundation)
/* =Icons
---------------------- */
.button-icon-left {
position: relative;
padding-left: 63px !important;
padding-right: 10px !important;
i {
position: absolute;
@jonathanpath
jonathanpath / responsive-lap-and-top.scss
Created July 6, 2016 10:23
Inuit CSS media query Lap and top
<snippet>
<content><![CDATA[
@include media-query(lap-and-up) {
}
]]></content>
<tabTrigger>inuitcss-medium</tabTrigger>
<scope>source.scss</scope>
</snippet>
@jonathanpath
jonathanpath / gulpfile.js
Last active June 24, 2016 08:54
Gulpfile sass + livereload + autoprefixer
'use strict';
var gulp = require('gulp'),
sass = require('gulp-sass'),
livereload = require('gulp-livereload'),
autoprefixer = require('gulp-autoprefixer');
livereload({ start: true });
gulp.task('sass', function () {
@jonathanpath
jonathanpath / share.js
Last active June 8, 2016 13:35
Share Twitter/Facebook/Googleplus Custom
$('a.js-share-facebook').click(function(e){
e.preventDefault();
var loc = encodeURIComponent($(this).attr('href'));
window.open('https://www.facebook.com/sharer/sharer.php?&u=' + loc, 'twitterwindow', 'height=450, width=550, top='+($(window).height() - 450)/2 +', left='+($(window).width() - 550)/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});
$('a.js-share-tweet').click(function(e){
e.preventDefault();
var loc = $(this).attr('href');
var text = $(this).data('text'); // Need title encoding http://stackoverflow.com/questions/10771728/encoding-get-the-title-for-twitter-share-url