Skip to content

Instantly share code, notes, and snippets.

View patternlab_keep_config.md

How do you guys keep changes to ./config/config.yml if you’re pulling down the patternlab composer project?

4 replies philw_ [1 hour ago] I’ve added this to my pattern_lab.sh script:

philw_ [1 hour ago]

View emulsify_menu_bem.md

jsheffers [4:15 PM] I copied the code emulsify uses for the menus, but I’m having trouble with the actual link class. It’s pulling the base class from the item instead of adding __link

Obviously that should be __link (edited)

{% embed '@atoms/lists/_list-item.twig' with {
  "list_item_label": item_label,
  "li_base_class": item_base_class|default(menu_class ~ '__item'),
  "li_modifiers": item_modifiers,
  "li_blockname": item_blockname,
View patternlab_pattern_variations_order.md

bjlewis2 [Oct 12th at 7:24 PM] Anybody ever successfully documented a pattern variation in PL? I have:

menu-block.twig
menu-block.yml
menu-block.md <-- works
menu-block~footer.yml <-- works
menu-block~footer.md <-- doesn't work :(
View emulsify_pl_external_js.md

philw_ [Yesterday at 3:02 PM] Has anyone run into an Emulsify issue with adding libraries that contain external JS files? components/_twig-components/functions/pl_attach-library.function.php tries to attach all the library files as async script tags, but it prepends the src value with a /, so external srcs are broken, here’s an example:

<script async="" src="/https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

31 replies danny_englander [23 hours ago] There's a chance it might be related to this? https://github.com/drupal-pattern-lab/attach-library-twig-extension/issues/1 GitHub

View emulsify_pl_drupal_behaviors.md

philw_ [Today at 5:08 PM] I’m trying to use a Drupal behaviour in Emulsify, I’ve got Emulsify correctly loading domready and drupal.js in my _01-foot.twig file, but my behaviour file is erroring with a ‘Uncaught ReferenceError: Drupal is not defined’ error, presumably because the component’s JS is being output before the script tag for drupal.js is output in the footer. Has anyone worked around this before? (edited)

16 replies jsheffers [21 hours ago] I’m doing the same thing and I don’t have any issues, and I have components using Drupal behaviors (edited)

philw_ [21 hours ago]

View paragraph_view_modes.md

fafnirical [Oct 9th at 10:42 PM] I generally think of Drupal view modes ("teaser", "full page", "search result", etc.) as purely contextual, telling the components what context the display context is for the component. Layout is partially derived from that, but I think of it as more a filter on what gets displayed

For the question of how to display something (in the contexts where it's displayed), I'd generally use a non-rendered field on the component, usually a Boolean or List field (edited)

24 replies jsheffers [1 day ago] Meaning a select list that has options “Image left” “Image right”

View sass_to_data.md

philw_ [Oct 8th at 6:38 PM] I’m using https://www.npmjs.com/package/sass-export to extract this data (along with colours) from our Sass, write it to a JSON file in the PL _data directory, and then read it from some Twig files in PL - seems a decent workflow for demonstrating values stored in Sass/SCSS npm sass-export Exports Sass files to Json format, able to manage sections with annotations in comments.

18 replies danny_englander [3 days ago]

View emulsify_component_breakpoints.md

bjlewis2 [Oct 8th at 6:22 PM] My first thought was “We could easily add something like that to Emulsify”, but actually we use a lot of component-specific breakpoints as opposed to “global” breakpoints. So a featured event card might adjust at points that don’t line up with the “global” breaks so that it looks good at all sizes, and isn’t restricted to “it looks too stretched out here, but the next breakpoint isn’t for another 235px…” So, I’m not sure it’d actually get much use

9 replies jsheffers [1 day ago] Hey Brian, just curious. How are you handling component specific breakpoints?

bjlewis2 [1 day ago]

View emulsify_attach_lib.md

danny_englander [Oct 8th at 3:39 PM] Hey all, I have a question about JS in Emulsify. I see that in accordion-item.js for example, there is some commented text, UNCOMMENT IF DRUPAL and then below, REMOVE IF DRUPAL. I understand the notion of when attaching JS in drupal, since D6 or 7, you've had to use something like

Drupal.behaviors.accordion = {
//   attach: function (context, settings) {

. I am just trying to understand this in an Emulsify context. For example this script is located in /web/themes/custom/emulsify/components/_patterns/02-molecules/accordion-item/accordion-item.js So in this context, it's not Drupal, it's Pattern Lab so it makes sense with regard to the parts commented out. But what about when actually mapping this component over to Drupal at one point, what would one do with this script? Or does it get taken care of with aggregation on production but still only load when needed if an accordion is present? I do see in accrodion-item,twig on the Pattern Lab side `{{ attach

View patternlab_responsive_images.md

trzalica [Oct 5th at 12:37 AM] Hi all! I wrote an article about how I use Responsive images in PL/Drupal... Maybe it will be helpful to some of you who are using/planing to use Pattern Lab in your projects. mosaicwebsites.com/blog/responsive-images-emulsify-pl-theme-easy-way

64 replies danny_englander [6 days ago] @trzalica Excellent. So if I understand this correctly, your first block of code (which has things like "responsive_image_base_class": your_component_variable_name_image_base_class,) that defines everything would appear in a Pattern Lab Twig file, say card.twig for example. Then your second block of code i.e. {{ content.field_machine_name_of_responsive_image_field[0] }} would be part of an embed on the Drupal side in a drupal twig template?