We have shared our experiences with Site Studio and covered all the features and how this low-code tool helps marketers. In this blog post, we will be covering the top 10 things you must keep in mind while working on a Site Studio project.
Let's Begin!
1. First, go through all the task/ticket OR sprint wise task/ticket and write down your findings in the ticket comment like,
- Is there BE work that needs to be ready before starting to work on the component/template
- If form fields are not mentioned for component building then What form fields are required? to build a component
- If any design is missing for that component/template.
- Missing Acceptance criteria/Implementation details
2. Create sub-theme using Site studio Minimal theme and used only required files to create sub-theme like,
- .info.yml
- .libraries.yml (if any custom style or custom js required which we are not able to handle from site studio)
3. Website setting → It's a good idea to set these up at the start of your project as per the style guide. So that once it’s done we can take other tasks/stories/tickets to work on and there will be no re-work and no re-testing.
- Base unit settings
- Colour palette
- Default font settings
- Font libraries
- Icon libraries
- Responsive grid settings
- SCSS variables
4. Set Base styles /admin/cohesion/styles/cohesion_base_styles and custom styles /admin/cohesion/styles/cohesion_custom_styles depending on the style guide provided.
5. While setting H1-H6 styles - Build it from base style /admin/cohesion/styles/cohesion_base_styles and also from custom styles (under Heading category) /admin/cohesion/styles/cohesion_custom_styles so that it will be directly available in the Custom style options list of components/templates.
6. CTA can be both types like Button or Links so it’s better to create both custom styles (under Button and Links category) /admin/cohesion/styles/cohesion_custom_styles so that it will be directly available in the Custom style options list of components/templates.
7. Set default master template after analysing design structure that can be boxed or fluid.
8. On layout canvas, for a component, if we are providing content editor/Site manager access to upload/update image so in that case in your component inside Component form builder for image uploader form field keep default image added to get rid of popup notification - Failed to load preview image and Server error please try again.
9. If anything is updated in SS Component like field settings, default content, etc. and if that component is already in use somewhere for example Site header component is used in Master template fluid/Master template boxed so in that case, that updated things will not be in your master template. So in that case you need to Rebuild the settings by accessing /admin/cohesion/developer/rebuild
Or terminal command drush dx8:rebuild
Or We need to update it manually where it is used or we can remove that component and again drag/drop the same component then you will get updated content, settings, styling etc.
We need to do it locally and re-export the master templates when this happens.
10. Block → If you want to use any drupal block or custom block (except menu & breadcrumb) in site studio component/template/views template then first you need to place that particular block in the Site Studio hidden region
and now you can add or drag/drop a particular block in site studio component/template/views template using Drupal core elements block from sidebar panel.
Once the element is in layout canvas → Double click on it to edit.
Select your theme(sub-theme if created) and a particular block from the hidden region and save.
11. In the content template if you want to show content-type field data which is having WYSIWYG editor then use Drupal core elements field directly
and by double-clicking on the field element, you can select a particular field directly for e.g: body field
Or use Inline element from Content elements section
and by double-clicking on the inline element you can add a token of body field for e.g: [node:body] and select HTML element Text only.
Because if you use a field element with a paragraph element then it will create/add multiple break tags on the front-end even if there is a single line break added while creating content.
