Tom Cunningham thomasthesecond

## north-america.usa.json
[
  {
    "name": "New York City",
    "url": "https://www.lonelyplanet.com/usa/new-york-city"
  },
  {
    "name": "San Francisco",
    "url": "https://www.lonelyplanet.com/usa/san-francisco"
  },
  {

## design-systems-and-css-grid-8.markdown

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                thomasthesecond
                / design-systems-and-css-grid-8.markdown
            
            
              Created
              February 28, 2018 07:38
            
              
                Design Systems and CSS Grid, 8
              
          
    Design Systems and CSS Grid, 8

A Pen by Tom on CodePen.
License.

  
## radium.jsx
import React, { PropTypes } from "react";
import radium, { Style } from "radium";
import { color } from "../../../settings.json";
import font from "../../utils/font";

const styles = {
  color: color.detailHeaderSmall,
  fontFamily: font("benton"),
  fontSize: "11px",
  lineHeight: (17 / 11),

## slug.js
// Takes a string and creates a hyphenated slug
const slug = string.toLowerCase()
  .replace(/[\. ,:;&()-]+/g, "-") // replace spaces and some characters with "-"
  .replace(/-\s*$/, ""); // if last character is a "-", remove it

## line-clamp.scss
/// Clamps, aka truncates, multi-line text. Note that non-webkit browsers will
/// not see the ellipsis ¯\_(ツ)_/¯
/// @param {Value}          $font-size     - Font size of the text
/// @param {Unitless Value} $line-height   - Line height of the text; **must be a unitless value**
/// @param {Number}         $lines-to-show - Number of lines to show
/// @example scss
/// p {
///   @include line-clamp($font-size: 16px, $line-height: 1.5, $lines-to-show: 3);
/// }
@mixin line-clamp(

## icon.scss
.pop-out-icon {
  display: block;
  position: relative;

  &:after {
    @include pop-out;
    bottom: 1.5rem;
    content: "";
    position: absolute;
    right: 1.5rem;

## _entry.twig
{% extends '_layouts/default' %}

{% set meta = {
  title: entry.title,
  url: entry.url,
  description: entry.description|default(entry.body),
  keywords: entry.keywords,
  image: entry.image.first().url
} %}

## phone.twig
+1-{{ phoneNumber|trim|replace({'(': '', ')': '', ' ': '-', '.': '-'}) }}

## notEqualTo.js
$.validator.addMethod('notEqualTo', function(value, element, param) {
  return this.optional(element) || value !== param;
}, 'Value cannot be equal to ' + param + '.');

## SassMeister-input-HTML.html
<html>
  <head>
    <title>Sass Breakpoints</title>
  </head>
  <body>
    <div></div>
  </body>
</html>
	[
	{
	"name": "New York City",
	"url": "https://www.lonelyplanet.com/usa/new-york-city"
	},
	{
	"name": "San Francisco",
	"url": "https://www.lonelyplanet.com/usa/san-francisco"
	},
	{
	import React, { PropTypes } from "react";
	import radium, { Style } from "radium";
	import { color } from "../../../settings.json";
	import font from "../../utils/font";

	const styles = {
	color: color.detailHeaderSmall,
	fontFamily: font("benton"),
	fontSize: "11px",
	lineHeight: (17 / 11),
	// Takes a string and creates a hyphenated slug
	const slug = string.toLowerCase()
	.replace(/[\. ,:;&()-]+/g, "-") // replace spaces and some characters with "-"
	.replace(/-\s*$/, ""); // if last character is a "-", remove it
	/// Clamps, aka truncates, multi-line text. Note that non-webkit browsers will
	/// not see the ellipsis ¯\_(ツ)_/¯
	/// @param {Value} $font-size - Font size of the text
	/// @param {Unitless Value} $line-height - Line height of the text; must be a unitless value
	/// @param {Number} $lines-to-show - Number of lines to show
	/// @example scss
	/// p {
	/// @include line-clamp($font-size: 16px, $line-height: 1.5, $lines-to-show: 3);
	/// }
	@mixin line-clamp(
	.pop-out-icon {
	display: block;
	position: relative;

	&:after {
	@include pop-out;
	bottom: 1.5rem;
	content: "";
	position: absolute;
	right: 1.5rem;
	{% extends '_layouts/default' %}

	{% set meta = {
	title: entry.title,
	url: entry.url,
	description: entry.description\|default(entry.body),
	keywords: entry.keywords,
	image: entry.image.first().url
	} %}
	$.validator.addMethod('notEqualTo', function(value, element, param) {
	return this.optional(element) \|\| value !== param;
	}, 'Value cannot be equal to ' + param + '.');
	<html>
	<head>
	<title>Sass Breakpoints</title>
	</head>
	<body>
	<div></div>
	</body>
	</html>