dmolsen

/**********************************************************
 * jQuery-less version of Chris Coyier's
 * Value Bubbles for Range Inputs
 * http://css-tricks.com/value-bubbles-for-range-inputs/ 
 **********************************************************/

function modifyOffset() {
	var el, newPoint, newPlace, offset, siblings, k;
	width    = this.offsetWidth;
	newPoint = (this.value - this.getAttribute("min")) / (this.getAttribute("max") - this.getAttribute("min"));

dmolsen

// base styles for the content container div
.content {
	width: 100%;
	margin: 0;
	padding: 0 1.25em 1.25em 1.25em;
	background-color: #fff;
	float: left;
}

// break at 31.25em, builds on the base

dmolsen

https://api.instagram.com/oauth/authorize/?client_id=[clientID]&redirect_uri=[redirectURI]&response_type=code

dmolsen

curl -F 'client_id=[clientID]' -F 'client_secret=[clientSecret]' -F 'grant_type=authorization_code' -F 'redirect_uri=[redirectURI]' -F 'code=[code]' https://api.instagram.com/oauth/access_token

dmolsen

<?php

/*
 * A ridiculously simple example of using PHP as a command line tool
 *
 * The following usage is supported by this script:
 *
 *   php cli.php -a [-c]
 *     Do something based on the -a flag. Use the optional -c flag to modify what happens when using the -a flag.
 *

dmolsen

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="styleguide/js/jquery.js"><\/script>')</script>

dmolsen

Array
(
    [patternTypes] => Array
        (
            [0] => Array
                (
                    [patternTypeLC] => atoms
                    [patternTypeUC] => Atoms
                    [patternType] => 00-atoms
                    [patternTypeDash] => atoms

dmolsen

Array
(
    [atoms] => Array
        (
            [head] => Array
                (
                    [patternSrcPath] => 00-atoms/00-meta/_00-head
                    [patternDestPath] => 00-atoms-00-meta-_00-head
                    [patternPartial] => atoms-head
                    [render] => 

dmolsen

<!-- Begin .header -->
<header class="header cf" role="banner">
	{{> atoms-logo }}
	<a href="#search-form" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a>
	<a href="#nav" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a>
	{{> molecules-primary-nav }}
	{{> molecules-search }}
</header>
<!-- End .header -->

dmolsen

Exporting Patterns from Pattern Lab for Drupal 8 Themes

I'm going to use Drupal as my guinea pig when thinking about this because Marc has shown the most interest in trying to make this happen. The holy grail does seem to be creating a way to have PL live with a remote project. Right now it's very good for the development but falls short or probably requires a lot of work if used as part of maintenance.

In order to work well for Drupal I would assume we'd have to tackle the following three problems:

1. Develop patterns in the native format (Twig)
2. Store or export patterns so they match the destination format (theme structure)
3. Sync the exported patterns with a remote system