Skip to content

poetic/drupal-clutch

Repository files navigation

#Clutch

clutch_logo

A super module that will speed up website conversion from Webflow design. This repo contains Houston, Clutch, Component, Custom Page.

Houston

An opinionated install profile focused on developer happiness.

Component

Custom entity with bundles support. Use this module to create a singleton entity for each bundle type.

Custom Page (Page)

Custom Page allows you to create pages as a replacement for Page Manger.

- Pathauto Support
- Token Support
- Metatag Support

Clutch

This module will handle the creation of the Drupal site based on the Webflow design.

Data Attribute Instruction

This workflow relies heavily on data attributes from templates. Developers should help Designers add these attributes directly into Webflow.

How to add data attribute

For example, this template is coming from Webflow:

<div class="w-section sectionmission">
<div class="w-container">
  <div class="missiondiv">
    <h3 class="h3 white">OUR MISSION</h3>
    <h2 class="h2 white italics">To provide emergency shelter, counseling and life changing services to at risk and homeless youth.</h2>
  </div>
</div>
</div>

After adding data attributes, it should become:

<div class="w-section sectionmission" data-component="section_mission">
<div class="w-container">
  <div class="missiondiv">
    <h3 class="h3 white" data-field="title" data-type="string" data-form-type="string_textfield" data-format-type="string">OUR&nbsp;MISSION</h3>
    <h2 class="h2 white italics"  data-field="description" data-type="string" data-form-type="string_textfield" data-format-type="string">To provide emergency shelter, counseling and life changing services to at risk and homeless youth.</h2>
  </div>
</div>
</div>

data-component

data-component defines component type. Clutch CLI will read html files from a Webflow zip and break them into small components inside of theme.

data-field

data-field defines field name. Each field name will be prefixed with data-component to prevent conflict. Make sure the field name does not exceed 32 characters(including data-component)

data-type

data-type defines field type

data-form-type

data-form-type defines the edit format of the field.

data-format-type

data-format-type defines the render format of the field.

Besides these main data-attributes, we also have:

  • data-node to define content type.
  • data-paragraph to define paragraph type.
  • data-paragraph-field to define paragraph field(prevent conflict with data-field).
  • data-form to define form type.
  • data-menu to define menu.

These are the most common Field Types/Form Display/Render Display. You can add more if need.

Field Type Form Display Display
text_with_summary (Text - formatted, long, with summary) text_textarea_with_summary text_default/text_trimmed
boolean boolean_checkbox boolean
datetime (Date) datetime_default datetime_default
decimal (Number - decimal) number number_decimal
email email_default basic_string
integer (Number - integer) number number_integer
link link_default link
list_integer (List - integer) options_select list_default
list_string (List - text) options_select list_default
string_long (Text - plain, long) string_textarea basic_string
string (Text - plain) string_textfield string
image image_image image/responsive_image/background_image
entity_reference entity_reference_autocomplete entity_reference_entity_id
entity_reference_revisions entity_reference_paragraphs entity_reference_revisions_entity_view

Usage

We recommend you use Nebula and Composer template for Drupal Projects to install your Drupal 8 site.

Assuming you already installed Nebula and had a site called drupal.local:

Download the zip file from Webflow and put it inside drupal/web. At this point, the zip file should contain html files with data attributes.

Go to nebula root level and follow these steps

  • run vagrant ssh
  • run cd /var/www/drupal/web
  • run drupal list to see all the available commands. If this is your first time using drupal console, you need to run drupal init. clutch:create and clutch:sync should be available.
  • run drupal clutch:create to start conversion process. This command will ask you the zip file name and the theme you want to give for your new site. Again, Clutch will unzip the file, create a new theme with all possible components from those data attributes.
  • run drupal clutch:sync to start syncing process. This command will enable the theme, go through components folder to create component types and content types(if provided). It also create component contents using the default value from the template. Once this is finished. It will create pages using components.yml and associate components with pages.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published