How to Use Pattern Lab for Drupal 8 Theming
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=dkp9qUXZ
BY jithin.prabhakaran
3 years ago
Drupal-Technical

Patternlab is a dynamic organizational and prototyping tool for Drupal theming. By theming with pattern lab, your custom theme allows us to manage and build components in accordance with the required workflow using atomic design concepts1.

Using Pattern Lab for Drupal 8 Theming

Instead of rendering default Drupal templates, we can introduce pattern lab to include twig files using atomic concepts. It allows us to include external twig files by overriding the specific templates.

Steps for Installing Pattern Lab

  1. Install Node and NPM versions using NVM

    Initially we need to get the software packages from our Ubuntu repositories that will allow us to build source packages.

    sudo apt-get update
    sudo apt-get install build-essential libssl-dev

    Once these packages are installed, we can download NVM installation scripts from project’s github page.

    curl -sL  
    https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh-o install_nvm.sh

    Now inspect the installation script with nano

    nano install_nvm.sh

    Run the script with bash

    bash install_nvm.sh

    It will install the software into a subdirectory of your home directory at ~/.nvm. It will also add the necessary lines to your ~/.profile file to use the file. To gain access to the nvm functionality, we have to run the following command:

    source ~/.profile

    Now we have installed NVM, our next step is to install isolated Node.js versions. To find out the available version you can type

    nvm ls-remote

    In the output window, we can see the latest version as v8.9.4.We can install that by typing

    nvm  install 8.9.4

    Usually NVM will be switched to latest installed version or you can tell NVM to use the just downloaded version by typing

    nvm use 8.9.4

    The current version of Node can be checked by running the code

    node -v

    If you have multiplied Node-js version, you can see what is installed by typing

    nvm ls

    If you wish to set one of the version as default, you can type

    nvm alias default 
  2. Create Custom Theme (my_theme)

    NOTE: It is recommended to refer Emulsify (serves as a starter kit for Drupal 8 theme) for getting the exact folder structure and architecture of the Drupal 8 theme.

    Emulsify Drupal 8

    It is necessary to include the JS, CSS and the fonts of the dist folder into the libraries file in the custom theme.

  3. NPM Install

    Patternlab-npm-install.png Output: patternlab_packageinstall.png
  4. NPM- Start

    patternlab-npm-start.png Output: patternlab_emulsify.png

    When NPM start is completed, node packages will be installed to the custom theme and compiles the SASS files to CSS and JS added in the patterns, which is required for the generation of theme will be saved in the dist folder.

    Get in touch with us for your Drupal 8 Theming requirements!
  5. References

    [1].http://bradfrost.com/blog/post/atomic-web-design


RELATED ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 01st January 2008 / by webmaster
We have added a few new modules to our site recently. Drupal Technical StumbleThis Sean (not verified) access_time 18 Sep 2021 - 21:08 Hi there, I uploaded the files, enabled the modules to use SU, and now I see the link, but there is no icon... How can I fix this? Thanks, Sean webmaster access_time 18 Sep 2021 - 21:08 In reply to Icon doesn't show by Sean (not verified) What do you see when you view the source? Search for stumblethis_button and you should be able to see the code for the image and the URL. Then you should be able to troubleshoot from there. Juicy Couture Addict (not verified) access_time 18 Sep 2021 - 21:08 thanks for the post. would love to hear more of you. by the way, drupal's really popular nowadays as it has easy and fast features. you agree with me? thanks.
/themes/custom/zyxpro_light/images/placeholder.png
close

on 16th January 2008 / by webmaster
Most webmasters do not realize this, but a lot of the content on lot of websites can be accessed from multiple URLs. A simple example would be where www.example.com and example.com leads to the same page. This is a fatal mistake in Search Engine Optimization and search engines penalize you for duplicate content. The correct configuration would be where the above two urls will lead you to the same page but example.com will redirect you to www.example.com with a 301 (Moved permanently) status which will not result in search engines penalizing the page. It is very easy to configure 301 redirects using Apache .htaccess file and the process is the same for a Drupal installation also. Drupal Technical Apache htaccess SEO Anonymous (not verified) access_time 18 Sep 2021 - 21:08 Hello. I'm trying to make example.com show as www.example.com, and I'm running into difficulties. I'm on Apache 2.0 and using the following lines in my httpd.conf file: RewriteEngine on RewriteCond %{HTTP_HOST} ^xxxxxxxxxx\.com$ [NC] RewriteRule ^(.*)$ http://www.xxxxxxxxxx.com/$1 [L,R=301] When I go to http://xxxxxxxxxx.com, I get http://www.xxxxxxxxxx.com (as expected). However, when I go to http://xxxxxxxxxx.com/node/1 (it's a Drupal site), I get a 404 thrown and the URL changes to xxxxxxxxxx.com/var/www/drupal/node/1. Same thing with www.xxxxxxxxxx.com/node/1. Any suggestions? I want to run without Drupal's .htaccess file (instead incorporating these calls into my httpd.conf file). webmaster access_time 18 Sep 2021 - 21:08 In reply to Rewrite including filesystem path by Anonymous (not verified) I think the problem is with the base path which results in the redirection to /var/www/ part. The best approach I would think is to start with drupal htaccess and then strip out parts and move to httpd SNVC (not verified) access_time 18 Sep 2021 - 21:08 This is definitely a good guide. Thanks for this. wellyson access_time 18 Sep 2021 - 21:08 This is really nice and helpful.
/themes/custom/zyxpro_light/images/placeholder.png
close

on 08th February 2008 / by webmaster
Attachment Size slashdotit.tar.gz 173.55 KB Similar to the StumbleThis module that we had created earlier we have created another bookmarking Drupal Technical Slashdotit Shlomi Fish (not verified) access_time 18 Sep 2021 - 21:08 Hi! I'm interested in this module, but Drupal 6.2 complains that it's incompatible with it. Can you please update it or tell me how? Regards, Shlomi Fish shlomifish.org webmaster access_time 18 Sep 2021 - 21:08 In reply to Can you update it for Drupal-6.x? by Shlomi Fish (not verified) Sure we are working on this currently and will post an update soon. Also we will post this module on www.drupal.org as well Cheers Anoop John Team Zyxware Anonymous (not verified) access_time 18 Sep 2021 - 21:08 Hello! Nice Article very interesting, thanks