This project is not covered by Drupal’s security advisory policy.
Integrate/ingest a well-structured front-end (KSS) style guide.
╰( ⁰ ਊ ⁰ )━☆ﾟ.*･｡ﾟ
Map Drupal fields through your existing front-end templates.
Organize your front-end into components? Use an automated, living style guide (KSS), want it synced into Drupal? Want to use modern templates (Handlebars) for CMS data? Now you can!
Keep a clean front-end structure and make Drupal aware with convenient developer APIs; render CMS content through Handlebars templates! Map entity fields or fieldgroups directly into your loaded components without writing a line of new code.
Under active development, dev release recommended. The getting started experience is a known weakness, help is welcome.
Need a KSS Boilerplate?
Styleguide stuck with unexpected data? Quick fix...
drush vdel componentize_list -y
Documentation!
-
Quick Start Guide (in progress)
-
Component APIs
-
Admins & Front-end/Theme
-
Installation
Active Work / Wanna help?
- Component per field (using field data handers)
- Set modifier/component per entity
- Parse pattern lab styleguides
- Allow twig templates
- Better exception handling
More details:
Web best-practices have tilted toward creating reusable, self-contained, front-end components that can be represented in a living style guide. There are lots of tools for this outside Drupal. This module seeks to...
- Ingest a set of structured components, written in the KSS standard.
- Use component templates to render Drupal content, via Handlebars.
- Provide easy ways for admins to make use of front-end components: Fieldgroups with field mapping, Context alteration, etc.
- Offer convenient object-oriented APIs for devs to access, register, render and control components.
Dependencies:
- Composer Manager - let modules depend on PHP libraries via Composer!
- Field Group - let entities group fields together.
- Field formatter settings - alter field formatter settings forms and summaries.
- Chaos tool - building blocks of greatness.
- Via composer: kss-php, lightncandy.
Recommended Companions: Read the docs
BONUS: Object-oriented developer interface. Few simple examples...
Developer APIs
Render data via component...
//template.hbs
<div class="thing {{ modifier--class }}">
<span class="thing_label">{{ subject }}</span>
<a href="{{ url }}" class="thing__title"><h4>{{ subject }}</h4></a>
</div>
//my_module.module
$component = ComponentFactory::create('section.thing');
$component->setModifier('thing--modifier');
$component->render(array(
'label' => $entity->bundle,
'subject' => $entity->title,
'url' => $metadata_wrapper->field_thumbnail->value()
));
Other tools...
// Access all components to render.
$components = componentize_list();
$components['section.another-thing']->render($my_data);
// Get a shallow list.
$list = componentize_list(TRUE);
// Add field handlers to wrangle data into templates.
class ComponentFieldMyType extends ComponentField {
public function getValues($item) {
return _wrangle_data($returns['safe_value']);
}
}
Road Map: (issues)
Project information
- Project categories: Content display, Developer tools
- Created by doublejosh on , updated
This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
