jayj

// --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
	display: ~"-webkit-@{display}";
	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox

jareware

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

lukaszgrolik

unknown source

value	name
100	extralight/ultralight
200	light/thin
300	book/demi/light
400	regular/normal
500	medium
600	semibold/demibold

azat-co

Here is the list of most commonly used jQuery API functions:

• find(): Selects elements based on the provided selector string
• hide(): Hides an element if it was visible
• show(): Shows an element if it was hidden
• html(): Gets or sets an inner HTML of an element
• append() Injects an element into the DOM after the selected element
• prepend() Injects an element into the DOM before the selected element
• on(): Attaches an event listener to an element
• off() Detaches an event listener from an element

francoishill

/*http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/*/
/*At least requires the meta viewport tag with content  'width=device-width'*/
@media only screen and (max-width: 1080px) and (orientation : portrait) {
  /* PORTRAIT:
	Windows Surface Pro*/
}

@media only screen and (max-width: 800px) and (orientation : portrait) {
	/* PORTRAIT:
	Acer Iconia Tab A100

chrisjlee

Borrowed from: [http://stackoverflow.com/questions/8888491/how-do-you-display-javascript-datetime-in-12-hour-am-pm-format](Stack Overflow: How do you display javascript datetime in 12 hour AM/PM format).

The following snippet allows one to convert an existing date object to period format, or 12 hour notation.

Source

KyleAMathews

@import "modular-scale";
@import "functions";

$base-font-size: 16px;
$base-line-height: 24px;
$rhythm-unit: "rem";

// Setup vertical rhythm
@include establish-baseline;

needim

/*
  Based on:
  1. http://stephen.io/mediaqueries
  2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/

/* iPhone X in portrait & landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)

ramsaylanier

const headingsArray = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

const headingsStyles = {
	base: {
		textRendering: "optimizeLegibility",
		lineHeight: 1,
		marginTop: 0,
		color: "#222",
		fontFamily: Fonts.serif,
	},

joseluisq

Add Git Branch Name to Terminal Prompt (Linux/Mac)

Open ~/.bash_profile in your favorite editor and add the following content to the bottom.

# Git branch in prompt.

parse_git_branch() {