View modifyPanels.js
<script>
function modifyPanels() {
var panelsNew;
panelsNew = Panels.panels.splice(1,1);
panelsNew[0].default = true;
Panels.panels = panelsNew;
}
Dispatcher.addListener("setupPanels", modifyPanels);
</script>
View pattern-lab-bower-components.md

Earlier today @_beneverard tweeted about a common problem with managing style guides. He said:

For those who have created extensive pattern libraries, how do you go about using that CSS in a project? Manually copy it across?

I started thinking about how we could encourage this in Pattern Lab. A lot of my recent work on PL has revolved around creating packages for Composer and it seemed like this was a similar problem. After playing around I'm curious if folks would think the following process was an onerous workflow. Let's say we're going to track our styles and grunt/gulp uses public/styles/ as a target directory:

  1. Delete all files under public/styles
  2. Commit the deletion
  3. Add public/styles to .gitignore
  4. Create a new repo just for your production styles
View pattern-lab-export.md

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
View header.mustache
<!-- 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 -->
View PL v0.7.0 patternPaths
Array
(
[atoms] => Array
(
[head] => Array
(
[patternSrcPath] => 00-atoms/00-meta/_00-head
[patternDestPath] => 00-atoms-00-meta-_00-head
[patternPartial] => atoms-head
[render] =>
View PL v0.7.0 navItems
Array
(
[patternTypes] => Array
(
[0] => Array
(
[patternTypeLC] => atoms
[patternTypeUC] => Atoms
[patternType] => 00-atoms
[patternTypeDash] => atoms
View gist:7489066
<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>
View cli.php
<?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.
*
View cURL command to generate Instagram access token
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
View instagram code generator
https://api.instagram.com/oauth/authorize/?client_id=[clientID]&redirect_uri=[redirectURI]&response_type=code