PlanckId (planck-id)
, (*1)
What is it?
Minifies (almost) all HTML ids + classes, & CSS + JS selectors., (*2)
Example
Turns this:, (*3)
<a href="https://packagist.org/login/github" class="pull-right btn btn-primary btn-github">
<span class="icon-github" id="special_github"></span>Use Github
</a>
<style>.pull-right, .btn, .btn-primary, .btn-github, .icon-github {} #special_github{}</style>
<style>.btn{}</style>
<script>var githubButtons = document.getElementsByClassName('btn-github'); var specialGithub = document.getElementById('special_github');</script>
<script>githubIconButtons = $('.icon-github');</script>
Into this:, (*4)
<a href="https://packagist.org/login/github" class="c e a d">
<span class="b" id="f"></span>Use Github
</a>
<style>.c, .e, .a, .d, .b {} #f{}</style>
<style>.e{}</style>
<script>var githubButtons = document.getElementsByClassName('d'); var specialGithub = document.getElementById('f');</script>
<script>githubIconButtons = $('.b');</script>
Graphs
Put the .json files from planck-id/graphs into NoFlo, (*5)
Installation
It can be installed from Packagist using Composer. Make sure your composer.json contains:, (*6)
{
"require": {
"aretecode/planck-id"
}
}
then, run:, (*7)
$ wget http://getcomposer.org/composer.phar
$ php composer.phar install
Use
Basic Usage
Command Line
Converting a file named markup.html:
planck markup.html, (*8)
Converting a file named markup.html:
planck markup.html --debug, (*9)
Converting a file and saving its output:
planck markup.html > output.html, (*10)
Converting a file using an existing map replacing a style file:
planck style.css map.json style Replace, (*11)
planck style.css map.json style ExtractAndReplace, (*12)
Extracting the the contents of a file and adding it to a map:
planck markup.html map.json markup Extract, (*13)
Converting from STDIN
echo -e '<section class="post-simple media-adjacent"></section><style>.post-simple{}</style>' | planck, (*14)
Converting from STDIN and saving the output:
echo -e '<section class="post-simple media-adjacent"></section><style>.post-simple{}</style>' | planck > output.html, (*15)
Terminology
-
Planck: (Planck length, in principle, the shortest measurable length.) an instance of the shortest available valid class/id/selector.
-
Original: the class/id/selector before it was turned into a Planck. (I'm open to changing this, feel free to suggest a new term.)
How does it do this?
Using Flow Based Progamming it creates a map<original, planck> according to the requirements, then passes the content into the series of components to achieve the desired outcome., (*16)
Running tests
- Run in the browser by navigating to
planck-id/tests/Run.php
- Run via the command line by changing your directory to
planck-id/bin and then running behat
- Run via the command line by going to
planck-id and running phpunit
(these tests use a snippet from thegrids website), (*17)
Wallogit.com
aretecode