Skip to main content

Component-Based Theming in Drupal 8

About Pattern Lab : The PHP version of Pattern Lab is, at its core, a static site generator. 

To use the basic features of Pattern Lab, you must have PHP 5.3+ installed

Componentization has become a growing consideration in most of the web application development firms. The reasons are obvious, instead of reinventing the wheels again and again, why don’t we re-use them.

Why should you follow component driven front-end development approach?
  • Allows for re-use of Components
  • A component-based UI approach accelerates the development
  • You can completely decouple the front-end development
  • Testing becomes easier
  • Parallelize development
  • Flexible project workflow
How to use component driven front-end development approach In Drupal?
One of the most popular tools for component driven front-end development is Pattern Lab. What makes Pattern Lab so famous is its flexibility in pairing up with the Atomic Design methodology. Addition of twig templating system in Drupal makes it easier for us to integrate Pattern Lab with Drupal. Although many starter kits for Pattern Lab with Drupal 8 are available, I personally find Emulsify the most useful one. Emulsify is a starter kit for Pattern Lab based theming created by Fourkitchens.

 We can integrate the patternlab with emulsify & gesso themes

 How To install & configure with drupal:

 Steps to install the d8 site with composer & install pattern lab with emulsify:

 1 - composer create-project drupal/recommended-project drupal8-pattern --no-interaction
2 - Add the permission /sites/default/files -- 775

 After install the drupal from browser:

 1-Require emulsify in your project composer require fourkitchens/emulsify
2-Move into the original emulsify theme cd web/themes/contrib/emulsify/
3 -Create your new theme by cloning emulsify php emulsify.php "THEME NAME" (Run php emulsify.php -h for other available options)
4 - Move into your theme directory cd web/themes/custom/THEME_NAME/

 First make sure you are login with root user I mean with sudo privelige
yarn install

 If you get this issue : 
failed to extract the starterkit. easiest solution is to manually download it and copy ./dist

 then sudo apt install bsdtar and then again yarn install
drush8 en THEME_NAME -y && drush8 en components unified_twig_ext -y

 Atoms are fields, molecules are view modes, organisms are views themselves

Labels:

Comments

Post a Comment

Popular posts from this blog

Drupal 8 : Link actions,Link menus,Link Tasks,Routings

Drupal 8 : Link actions,Link menus,Link Tasks,Routings Link actions Local actions have also been moved out of the hook_menu() system in Drupal 8 .Use actions to define local operations such as adding new items to an administrative list (menus, contact categories, etc). Local actions are defined in a YAML format, named after the module they are defined by. Such as menu_ui.links.action.yml for this example from menu_ui module: menu_ui.link_add:   route_name: menu_ui.link_add   title: 'Add link'   appears_on:     - menu_ui.menu_edit Here, menu_ui.link_add: It is the Unique name of the link action Most likely start with module name, route_name : Name of the route it means when click the link it redirect to this route, appears_on :  An array of route names for this action to be display on. Now how to know the Route name of any internal/external admin pages like below, By through the drupal console we achieve it, drupal debug:router...
Post a Comment
Read more

Mysql Interview Questions

Current mysql version : 8 ( last was 5.7 ,  5.7 to directly 8 ) SHOW FULL PROCESSLIST is used to see all the query executing when refresh the site. 1 second == 1000 mili second, 0-500 ms responce time of any query is ok How to Read the MySQL Slow Query Log :   The MySQL slow query log is where the MySQL database server registers all queries that exceed a given threshold of execution time. This can often be a good starting place to see which queries are slowest and how often they are slow. MySQL on your server is configured to log all queries taking longer than 0.1 seconds. /var/log/mysql/mysql-slow.log Use EXPLAIN or EXPLAIN EXTENDED to explain the query how it is executed. MySQL  describe  or  ANALYZE  command shows the structure of the table. Best practice in respect of performance : 1 - always use index, 2 - index types , primary index and combined field index like fname & lname in one index not two index, 3 - one index sc...
Post a Comment
Read more

Get The field values of node in Drupal 8

use Drupal \ node \ NodeInterface ; /** * Implements hook_ENTITY_TYPE_insert() for node entities. * * This tests saving a node on node insert. * * @see \Drupal\node\Tests\NodeSaveTest::testNodeSaveOnInsert() */ function node_test_node_insert ( NodeInterface $node ) { // Set the node title to the node ID and save. if ( $node - > getTitle ( ) == 'new' ) { $node - > setTitle ( 'Node ' . $node - > id ( ) ) ; $node - > setNewRevision ( FALSE ) ; $node - > save ( ) ; } } Now There is so many functions are there to get the values, For All the functions available visit the API code, https://api.drupal.org/api/drupal/core%21modules%21node%21src%21NodeInterface.php/interface/NodeInterface/8.2.x Some of as below, Node edit form, Drupal 8 Automatically Load the whole object no need to load the entity like below, if ($event->getFormId() == 'node_alexa_audio_clips_edit_form') { $node = \Drupal::ro...
Post a Comment
Read more