Matt Zimmermann influxweb

## Elegant and accessible content toggle with CSS.markdown

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                influxweb
                / Elegant and accessible content toggle with CSS.markdown
            
            
              Created
              November 11, 2015 15:36
            
              
                Elegant and accessible content toggle with CSS
              
          
    Elegant and accessible content toggle with CSS

A Pen by Hugo Giraudel on CodePen.
License.

  
## product_display_layout.html
<section class="bg--white h-corners product-details">
	<article itemscope itemtype="http://schema.org/Product">
		<div class="row h-nm">
			<div class="column whole">
				<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:product_flags">
					<mvt:if expr="l.settings:product:customfield_values:customfields:product_flags EQ 'On Sale'">
						<mvt:assign name="l.settings:product:flagColor" value="'bg--red color--white'" />
					<mvt:elseif expr="l.settings:product:customfield_values:customfields:product_flags EQ 'New'">
						<mvt:assign name="l.settings:product:flagColor" value="'bg--green'" />
					<mvt:else>

## css-masonry.css
.masonry-layout {
	box-sizing: border-box;
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;
}
.masonry-layout * {

## README.md

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                influxweb
                / README.md
            
            
              Created
              February 24, 2016 20:16
                — forked from aaronsama/README.md
            
              
                Star rating
              
          
    Star rating

JQuery + CSS code to make a simple rating widget based on Fontawesome. Nothing
fancy but I don't want to figure out how to do it again.
Based on the example found here: http://css-tricks.com/star-ratings/ which unfortunately
provides only CSS and no actual functionality.
See it on Plunker: https://plnkr.co/vptHYAnWHMbX2LfR6a02

  
## .gitconfig
# The basics, who you commit as:
[user]
  name = John Doe
  email = john@doe.org
# Your Github username
[github]
  user = githubusername
# Some aliases to save 1000s keystrokes each year:
[alias]
  log = log --color

## RWD-|-Responsive-HTML5-form-elements-with-CSS-Flexbox.markdown

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                influxweb
                / RWD-|-Responsive-HTML5-form-elements-with-CSS-Flexbox.markdown
            
            
              Created
              July 12, 2016 22:42
            
              
                RWD | Responsive HTML5 form elements with CSS Flexbox
              
          
    RWD | Responsive HTML5 form elements with CSS Flexbox

HTML form with responsive web design. Furthermore it's done with CSS Flexbox, so no floats are used at all.
This form layout was inspired by another pen made by Chris Coyier:
http://codepen.io/chriscoyier/pen/DmnlJ
A Pen by Torben Colding on CodePen.
License.

  
## disableContextMenu.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                influxweb
                / disableContextMenu.md
            
            
              Last active
              July 28, 2016 17:16
            
          
    If you're building a web app, it's good to be familiar with the different techniques to disable the right-click menu, AKA context menu. Of course, many would suggest this should never be done, but now that web apps are pushing more towards native behavior, I'm sure a lot of developers will be interested in doing this sort of thing.
Here I'm listening for the contextmenu event, then I use event.preventDefault() (like the old return false) to keep the menu from appearing. This disables the context menu whether it's accessed via mouse or keyboard.
To disable the context menu, the best technique is as follows:
window.addEventListener('contextmenu', function (e) {
	console.log('context menu disabled');
	e.preventDefault();

  
## example.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="main.css" />
  <title>ITCSS Grid Example</title>
</head>
<body>

## quick-maintenance-tip.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                influxweb
                / quick-maintenance-tip.md
            
            
              Last active
              September 2, 2016 16:11
            
              
                Assuming you're still using ES5, here's a quick maintenance tip regarding immediately invoked anonymous functions that have a return value that you assign to a variable.
              
          
    Here's some example code:
var myVar = function() {
  // function body goes here...
  return {
    value: "something"
  }
}();

  
## modern-scale.scss
// --------------------------------------------------------------------------------------
// A More Modern Scale for Web Typography
// Based on this article: http://typecast.com/blog/a-more-modern-scale-for-web-typography
// --------------------------------------------------------------------------------------

$body-font-size: 1em !default;

// Adjusts body typography to be default
// for each browser.
@mixin reset-body-font-size($font-size: 100%, $size-adjustment: 0.5) {
	<section class="bg--white h-corners product-details">
	<article itemscope itemtype="http://schema.org/Product">
	<div class="row h-nm">
	<div class="column whole">
	<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:product_flags">
	<mvt:if expr="l.settings:product:customfield_values:customfields:product_flags EQ 'On Sale'">
	<mvt:assign name="l.settings:product:flagColor" value="'bg--red color--white'" />
	<mvt:elseif expr="l.settings:product:customfield_values:customfields:product_flags EQ 'New'">
	<mvt:assign name="l.settings:product:flagColor" value="'bg--green'" />
	<mvt:else>
	.masonry-layout {
	box-sizing: border-box;
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;
	}
	.masonry-layout * {
	# The basics, who you commit as:
	[user]
	name = John Doe
	email = john@doe.org
	# Your Github username
	[github]
	user = githubusername
	# Some aliases to save 1000s keystrokes each year:
	[alias]
	log = log --color
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<link rel="stylesheet" href="main.css" />
	<title>ITCSS Grid Example</title>
	</head>
	<body>
	// --------------------------------------------------------------------------------------
	// A More Modern Scale for Web Typography
	// Based on this article: http://typecast.com/blog/a-more-modern-scale-for-web-typography
	// --------------------------------------------------------------------------------------

	$body-font-size: 1em !default;

	// Adjusts body typography to be default
	// for each browser.
	@mixin reset-body-font-size($font-size: 100%, $size-adjustment: 0.5) {