pattern-lab / patternlab-php Goto Github PK
View Code? Open in Web Editor NEWThe PHP version of Pattern Lab
Home Page: http://patternlab.io
License: MIT License
The PHP version of Pattern Lab
Home Page: http://patternlab.io
License: MIT License
Code view is currently available on the view all page, but isn't functional on pattern detail pages.
Code view will include the markup, and will present all CSS affecting the module.
This would be a December project if it's of any interest...
TL;DR
Could use KSS to comment and relate CSS to patterns. A single pattern could be modified so it shows different styles. Combined it might provide an interesting styleguide solution where descriptions for a pattern come from CSS. Could be extended to provide CSS driven states in pattern examples.
MORE
After looking at KSS I think I'm starting to get what you meant by associating a pattern with CSS. KSS is an agnostic method for creating machine-readable comments in CSS. This allows for the creation of "living styleguides". GitHub uses it for their styleguide. Here's an example:
/*
A button suitable for giving stars to someone.
:hover - Subtle hover highlight.
.stars-given - A highlight indicating you've already given a star.
.stars-given:hover - Subtle hover highlight on top of stars-given styling.
.disabled - Dims the button to indicate it cannot be used.
Styleguide 2.1.3.
*/
a.button.star{
...
}
a.button.star.stars-given{
...
}
a.button.star.disabled{
...
}
The thing that has me really interested is that it seems like we could extend KSS to include a pattern as the reference mark-up for a particular style. Right now, KSS is just about describing CSS. In order to get a styleguide going it seems like someone has to hardcode the mark-up/CSS link in real code. It seems like what we could do is tack on a pattern reference at the end to make that connection:
/*
A button suitable for giving stars to someone.
:hover - Subtle hover highlight.
.stars-given - A highlight indicating you've already given a star.
.stars-given:hover - Subtle hover highlight on top of stars-given styling.
.disabled - Dims the button to indicate it cannot be used.
Styleguide 2.1.3.
Reference atoms-button.
*/
a.button.star{
...
}
a.button.star.stars-given{
...
}
a.button.star.disabled{
...
}
So we could parse the CSS/KSS before generating anything. When a particular pattern is shown we could see if it's been referenced for a group of styles via KSS. We can also check if it has more than one style of implementation (e.g. plain, stars-given, and disabled). We'd iterate over the pattern multiple times and apply each different style of implementation. We'd also show the comments and other info from the KSS. The patterns would be shown in a similar way to GitHub (the right column, not nav) but organized/nested based on pattern and not based on the stylesheet.
In order to allow a single pattern to be modifiable we'd have to include a little mustache when we create the pattern. For example we could create a pattern called atoms-button-star
:
<a href="#" class="button star {{ modifyStyle }} ">Button (a.button)</a>
As we iterate through the associated styles for a pattern we can swap out {{ modifyStyle }}
with the chosen style. The cool thing is that it opens up the possibility of modifying styles from other templates. We might be able to do this in a pattern that includes our star button:
Have you starred this repo? {{ atoms-button-star:stars-given }}
Which would generate:
Have you starred this repo?
<a href="#" class="button star stars-given ">Button (a.button)</a>
Rather than hardcoding patterns that have states we might be able to simply modify them with CSS. It might also be interesting to see if we could do something with the Page-specific JSON. For example:
{
"modifyStyle": {
"atoms-button-star": "stars-given"
}
}
There are problems that I'll have to tackle:
:
mod on a pattern name will only work for that pattern. It won't affect nested patterns If you have an organism that includes a molecule that includes the star button you couldn't affect the star buttons state. Maybe the JSON is the way around that.a
and button
tag. That obviously wouldn't be embeddable in an Organism, Molecule, or Template. This is the tension we're already experiencing with Atoms though.No rush on this. Just wanted to throw it out there while I was thinking of it. Figured it fell into doing things the way designers would think of it, being agnostic, and helping create a fuller deliverable.
The dev
branch now has a working annotations solution based upon the original work from your mobile first demo. From a styling perspective I think the following needs to happen:
styleguide
and view-all
templates. The elements that need to be styled on these views are: div.annotations
which holds all of the annotations for a pattern, div.annotation
which holds an individual annotation within div.annotations
, div.annotation h3
and div.annotation p
which should be self-explanatory.#comment-container
stuff in styleguide.css
.All of the annotation-related JS is now in public/styleguide/js/annotations-viewer.js
and public/styleguide/js/annotations-pattern.js
. The data is in source/_data/annotations.js
. It's moved when the site is generated.
Note that CSS cannot be injected via JS. That breaks on the Apache-less version of PL because of security policies. I ripped out the styleguide.css
injection in styleguide.js
. For now I've hard coded the annotation pointer style in the head
of the pattern header. It shouldn't matter that patterns are dirty since we 1) will be offering a code view and 2) we need to keep them dirty for all the JS stuff to work in Apache-less mode. We'll have to swing back and fix the colors pattern which is now broken without styleguide.css
.
Should Pages have mustache-based mark-up? It seems like they really should just be Templates (the base mark-up) with custom data (to make the Pages more "real"). If that's the case then the only files that should be in 04-pages/
should be the .json
files. This would make PL a little DRYer and make it easier to update Templates and Pages at the same time.
For example, the changes made when updating 03-templates/homepage.mustache
should be seen when viewing templates > homepage
or pages > homepage
on the PL site.
Pages shouldn't require their own mustache templates. Instead they should be defined simply by the custom data in JSON. Also, a Template should be able to have multiple Pages so that custom regions can be defined/previewed without creating a lot of duplicate mark-up. Custom Page JSON files should build upon one another to reduce duplicate content. For example, the file layout should look like this:
templates/
homepage.mustache
pages/
homepage.json
homepage-emergency.json
homepage-emergency.json
will use the templates/homepage.mustache
as the base template. When rendering homepage-emergency
the homepage.json
file should be loaded and then homepage-emergency.json
appended to/overwriting that data.
I fixed this PHP warning
PHP Warning: Creating default object from empty value in /patternlab-php-master/builder/lib/builder.lib.php on line 330
The problem was line 310 of builder.lib.php file. The 'i' missed.
Only change this
$this->d->patternSpecifc = new stdClass();
for this
$this->d->patternSpecific = new stdClass();
:)
It would be great to know if pattern contains other atoms, molecules, or organisms.
Lineage could be a property of the Code View. For example, header.mustache may contain {{atom-logo}}, {{molecule-primary-nav}}, {{molecule-search-form}}. We could include that alongside the HTML and CSS of the pattern.
Right now, mustache code is being wiped out in the documentation when Jekyll compiles the site.
More information: http://stackoverflow.com/questions/3426182/how-to-escape-liquid-template-tags
Apparently, there's a Jekyll plugin that allows you to skip "raw" code: https://gist.github.com/phaer/1020852
I have no idea how to implement this, so any help would be appreciated.
Hello, I tried to test patternlab-php on my computer (Debian Linux) and I get the following error:
when I run ./generateSite.command I get the following output:
PHP Fatal error: Class 'Mustache_Engine' not found in /patternlab-php-master/builder/lib/builder.lib.php on line 75
builder.lib.php
protected function loadMustachePatternLoaderInstance() { $this->mpl = new Mustache_Engine(array( "loader" => new Mustache_Loader_PatternLoader(__DIR__.$this->sp,array("patternPaths" => $this->patternPaths)), "partials_loader" => new Mustache_Loader_PatternLoader(__DIR__.$this->sp,array("patternPaths" => $this->patternPaths)) )); }
This error is caused by not being able to instantiate the class Mustache_Engine. The 'autoload' function (Autoloader.php) find not the correct path to Engine.php file where Mustache_Engine class is defined.
Autoloader.php
public function autoload($class) { if ($class[0] === '\\') { $class = substr($class, 1); } if (strpos($class, 'Mustache') !== 0) { return; } $file = sprintf('%s/%s.php', $this->baseDir, str_replace('_', '/', $class)); if (is_file($file)) { require $file; } }
After reviewing the code, this error can be fixed by changing the folder's name containing the library 'mustache' to 'Mustache', as it is distributed, and changing the line 29 of builder.php file as sample.
require __DIR__."/lib/Mustache/Autoloader.php";
After these changes the application generates the pattern without errors in Debian Linux.
Loving the pattern lab you've created!
How are the scss files meant to be compiling?
I'm used to using a config.rb file in the root of my projects.
I'm running pattern lab locally on my macbook, using the following command to watch the project for changes:
php builder/builder.php -w
Please let me know if I'm missing something - I've read through the docs and couldn't see anything about compiling.
Add a version number to the build tool so that we can better handle cache issues as we develop and push out releases.
The Top level "All" page ?p=all
shows default content for all modules, even after changes to source files are made and the site is regenerated.
I edited /00-atoms/00-global/00-colors.mustache
, rebuilt the site, and changes show up fine at /?p=atoms-colors
, and /?p=viewall-atoms-global
but /?p=all
still shows the default content for Atoms > Global > Colors.
This happened with after making small test changes to other modules as well.
The command line can be hard/intimidating for a lot of people, so it would be great to have a GUI for the command line controls. The controls would include:
I'm going to try and create a .NET version of pattern lab. Any guidance on what PHP functionality I'd be replacing would be appreciated to complement my own digging into the source. Plus any thoughts on the best way we could extract the static, language independent parts from PHP/.NET?
Cheers
Nice tool guys! I'm having fun playing with it.
In 00-text-fields.mustache:
<div class="field-container">
<label for="password">Web Address</label>
<input id="password" type="url" placeholder="http://yoursite.com">
</div>
<div class="field-container">
<label for="password">Email Address</label>
<input id="password" type="email" placeholder="[email protected]">
</div>
Unfortunately, I'm having trouble installing Pattern-lab. I understand that the code is intended to be uploaded to a web-server. I also understand that what's viewed by users is what's included in the public folder. But then I'm confused.
WHAT DO I DO!?!?!
_ I'm using Mac OS X Mavericks.
_ I host my own site, http://www.allenjcochran.com/, on GoDaddy
_ GoDaddy, and my hosting plan, have all the required install requirements
_ I've downloaded all the Github files
_ Then I uploaded all the Github files to allenjcochran.com/patternlab01
Its at that point I don't know where to go.
_ How do I set up the page?
_ Do I add to the page like a CMS (Wordpress for example)?
_ How do I regenerate the site after I make new patterns?
Generally confused,
Allen Cochran
When either running "php builder/builder.php -g" from the terminal or double clicking on "/scripts/generateSite.command", I get:
PHP Fatal error: Cannot redeclare class Generator in /Users/fgertz/Sites/pattern-lab/patternlab-php-master/builder/lib/generator.lib.php on line 74
PHP Stack trace:
PHP 1. {main}() /Users/fgertz/Sites/pattern-lab/patternlab-php-master/builder/builder.php:0
sw_vers
ProductName: Mac OS X
ProductVersion: 10.6.8
BuildVersion: 10K549
php -v
PHP 5.5.3 (cli) (built: Aug 30 2013 09:29:37)
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2013 Zend Technologies with Xdebug v2.2.3, Copyright (c) 2002-2013, by Derick Rethans
Does the Generator class need to be renamed? Do I need to upgrade my version of PHP?
After looking at the Pattern Lab demo on my iPhone I was thinking how we could clean up the view some. Or at least investigate things more. Things to address/investigate:
I didn't dig too much into it on my iPhone. I'll try testing more on other devices during the week.
If I'm watching the project for changes I tend to want the page to be automatically reloaded when the change happens. Is this a given? Should we combine them? Not sure about the technical hurdles of starting two separate processes (Watcher & reload server)
It would be nice to have a link to the generated page without the menu and all the patternlab stuff. Just what is in the iframe
.
Anytime I click on the body of the style guide or pattern lab site, I get an error when attempting to post.
Anytime I click on a pattern header, I get an error when attempting to navigate there.
Performing the same on http://demo.pattern-lab.info/ does set the url with a query string, but it does not execute.
I will look at this later too if I have time.
Putting the case out that for better portability, that the listeners and patterns folders should be moved into the styleguide folder as they aren't likely to be used in a final production environment the same way as css/fonts/images/js would be.
Additionally feel that there could be a copy of index.html under styleguide folder for future portability
Thoughts?
This is not a top priority nor is it a "request", but rather an enhancement-to-be-considered.
Instead of making a new "naming scheme" for CSS components and modules.
I have a suggestion to make regarding the naming scheme of the Atoms, Molecules and Organisms.
While these terms relate better to Labs etc. hence the name Patternlab.
I would rather use a "standardized" naming scheme for this type of product.
Atoms => Components
Molecules => Modules
Organisms => Patterns
This is not to bash on the work you have done, but it can be confusing the first time you open and edit the files.
Take it into consideration, maybe the naming scheme can just be a flag you can turn off/on as you see fit.
Best Regards
Lucas Dechow
The Web design process requires us to be able to step back through earlier versions of Pattern Lab to view progress, resolve debates, etc, etc.
A snapshot function would be tremendously valuable. The idea would be to have the latest and greatest version always accessible at the root level:
/
But, if needing to step back through time, we could append to the url:
/v1/
/v2/
/v3/
/etc
That way teams can view progress much easier.
Perhaps there can be a spot for that in the UI (under Settings perhaps)?
hi there,
if you want to link different templates and use:
{{ link.templates-templatename }}
it will be rendered to something like this:
/patterns/03-templates-10-subfolder-02-templatename/03-templates-10-subfolder-02-templatename.html
and this results in a 404.
so i put myself in sherlock mode and found this little buddy in builder.lip.php on line 304:
$this->d->link->$patternName = "/patterns/".$path."/".$path.".html";
a brief edit later
$this->d->link->$patternName = "../../patterns/".$path."/".$path.".html";
everything worked.
maybe there is a reason for the first linking pattern? would be nice to know
This issues builds off of #45.
If we move the core PL view files out of source/
that might give us the flexibility to add multi-site support to one install of PL. This way a group could handle multiple clients with just one version of PL rather than having to have multiple copies of PL to update when a new feature comes out. The directory structure might look like this:
- builder
- config
- core (where the core view files are)
- listeners
- public
-- wvnano
-- english
-- admissions
- source
-- wvnano
-- english
-- admissions
We could have a flag in config.ini
that enables it and then allows the user to set which folder to build from. For example, maybe they're working on english
and want to build out of source/english/
into public/english/
. Then on viewing it'd be patternlab.localhost/english/
.
On top of this we might be able to allow for a custom starter kit if someone has a common base of images, css, and patterns to start a project. Rather than blowing out core/
and worrying about us overwriting it maybe we could add an additional custom/
folder. Again, the feature is enabled in config.ini
. Then when they add a folder to source/
and try to generate for the first time it can copy the starter kit from custom/
, build the site, and they're ready to go.
Thoughts?
Try to see if I can refactor and create one object that handles the needs of the various nav and path objects. Keep forgetting what's in where and what's clean where.
For tracking progress on v0.8.0. Should be released at some point >.< The issues I'd like to cover:
link.[pattern-name]
within data to link to other patternscmd+a
when code view is up (#162)_patterns/atoms
and into `core/builder.php
in favor of core/console
For launch:
master
master
with v0.8.0Does the PHP version of Pattern Lab support Mustache non-empty list sections? I can't seem to get this to work.
Hash:
{
"repo": [
{ "name": "resque" },
{ "name": "hub" },
{ "name": "rip" }
]
}
Template:
{{#repo}}
<b>{{name}}</b>
{{/repo}}
Output should be:
<b>resque</b>
<b>hub</b>
<b>rip</b>
But is blank.
My guess is the square bracket array syntax breaks the parser or something like that.
Here are my errors:
PHP Warning: htmlspecialchars() expects parameter 1 to be string, object given in /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/lib/Mustache/Engine.php(583) : eval()'d code on line 16
PHP Stack trace:
PHP 1. {main}() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/builder.php:0
PHP 2. Watchr->watch() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/builder.php:55
PHP 3. Watchr->updateSite() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/lib/watcher.lib.php:71
PHP 4. Buildr->generateMainPages() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/lib/watcher.lib.php:219
PHP 5. Buildr->generateViewAllPages() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/lib/builder.lib.php:133
PHP 6. Buildr->gatherPartialsByMatch() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/lib/builder.lib.php:216
PHP 7. Buildr->renderPattern() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/lib/builder.lib.php:582
PHP 8. Mustache_Engine->render() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/lib/builder.lib.php:108
PHP 9. Mustache_Template->render() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/lib/Mustache/Engine.php:170
PHP 10. __Mustache_74680c57562a62b72f39ddf610cf4777->renderInternal() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/lib/Mustache/Template.php:67
PHP 11. htmlspecialchars() /Users/fgertz/Sites/pattern-lab/patternlab-php/builder/lib/Mustache/Engine.php(583) : eval()'d code:16
This is going to be a pain but probably worthwhile in the end.
The tab block pattern is an "organism" level UI element. It combines a "molecular" level tab element ( #48 ) with a series of content blocks.
Following criteria apply :
See http://www.cascade-framework.com/components-tabblocks.html for demos of this pattern.
See also ( #50 )
When you you change patterns name and rebuild the public/
folder, the old files and folders still present.
Is it possible to clean public/
folder before build ?
Now I do that with Grunt.
...
// Clean folder
clean: {
// Clean patternlab public/ folder
pl: [
'patternlab-php/public/assets',
'patternlab-php/public/css',
'patternlab-php/public/fonts',
'patternlab-php/public/images',
'patternlab-php/public/js'
],
// Clean main build
dist: {
options: {
force: true
},
src:['<%= dest %>/**/*']
}
},
recess: {
pl: {
options: {
compile: true,
compress: true,
},
files: {
'patternlab-php/source/css/style.css': ['patternlab-php/source/less/style.less']
}
}
},
// Compile pattern-lab files
shell: { // Task
// Run patternlab build
pl: { // Target
options: { // Options
stdout: true
},
command: 'php patternlab-php/builder/builder.php -g'
}
},
...
I keep forgetting to reload my browser window after I turn on the websocket servers. Should see if there's a way to keep polling the websocket ports so that the page "auto-connects."
Possibly report current window dimensions in terms of px, ems, and furlongs. All the cool kids size their CSS in furlongs now.
We're now wrapping each pattern in the same HTML as PL's list view so that we can use the same code for annotations, code view, and more.
Right now the pattern name isn't being displayed. For the sake of consistency, it would be great to show the pattern name, similar to the list view. If it's not possible, we can simply remove the label.
Just wanted to jot down things I should keep in mind as we prep for the next release:
Cascade Framework is a framework with a highly modular OOCSS inspired architecture optimised for both performance and flexibility.
Consider the following features :
More info :
Cascade Framework docs : http://www.cascade-framework.com/index.html
Cascade Framework Light : http://jslegers.github.io/cascadeframeworklight/
Cascade Framework FAQ : http://www.cascade-framework.com/faq.html
Demo Application built with Cascade Framework : http://www.johnslegers.com/lead-dashboard/
As it stands right now, to update to the latest version of Pattern Lab, you have to go fishing through quite a few directories. Is it possible to streamline this process in any way?
For example, running the generateSite.command when it is stored at the following location:
~/Documents/Folder With Spaces In The Name/patternlab/scripts/generateSite.command
will fail with the error:
Could not open input file: /Users/mattsims/Documents/Folder
Easily fixed by editing the scripts and wrapping the $DIR variable in the php command in quotes, eg:
DIR="$( cd "$( dirname "$0" )" && pwd )"
php "$DIR/../builder/builder.php" -g
The navigation pattern is an "atomic" level UI element. In its atomic form, it's an (ordened or unordened) list with a horizontal list elements intended for positioning at the top of related content.
In its "atomic" form, there's no styling beyond positioning and orientation. For adjusting positioning and orientation, there are three modifiers :
At the "molecular" level, a semi-semantic class defines the type of navigation. At this level you may add colors and typography.
Consider these examples :
At the "organism" level, you have refinements of the "molecular" level or combinations of different "molecular" types.
Consider these examples :
See also #47 and #49 for more advanced "organism" level behavior.
See http://www.cascade-framework.com/components-navigation.html for demos of this pattern.
See also ( #50 )
Find a way to provide custom headers and footers for Templates. Probably based on the depth (or lack thereof) of the mustache templates.
The original patternlab by @bradfrost had a commenting system for the patterns.
Is it possible to have it again ? It would be nice ... and helpfull
Idea stolen from Mixture but it's brilliant. No typing a long URL on phone. Can use a simple service like mini-QR code.
http://miniqr.com/api/create.php?api=http&content=http://www.wvu.edu&rtype=json&callback=foo
getHostByName(getHostName());
On the demo when you view HTML code while viewing a "page" the html extends beyond the field of vision. There is no way to scroll to see the code.
Might consider adding in a max-height of 50% to the #sg-code-container, and control the pre.language-markup max-height and applying a overflow-y scroll.
Allow for links to start annotation or code view automatically. For example:
http://patternlab.localhost/?a=true or
http://patternlab.localhost/?w=30em&p=templates-homepage&a=true
Panels are a "molecule" level UI element that can contain the following "atomic" elements :
Further, following conditions apply :
See http://www.cascade-framework.com/components.html for demos of this pattern.
See also ( #50 )
Just clean-up or organize the JS so it's found in one place rather than all over the templates.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.