Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
May 20 2020
May 20

Drupal has witnessed a healthy growth over these years, with ample scope to expedite this growth. One way to achieve this is via a tool that makes the site creator’s life easy. A CMS platform should invariably be extremely user friendly and easy in maintaining as well as building. The wait is over! Cohesion DX8 is a site builder tool which allows a site maintainer/site configurator to create/maintain the site with low coding and more configuration.

Benefits of Cohesion 

  1. Low code 
  2. Highly configurable
  3. Easy maintainable
  4. Easily modifiable 
  5. Highly scalable
  6. Component-based driven
  7. Less developer dependent

Cohesion

Cohesion DX8 provides a contributed module and theme which needs to be installed in Drupal, quite similar to the way we install other modules and themes. However, to use this service, it is required to purchase a cohesion package that provides us with an API Key, Agency Key, Site ID, and an API Server URL which needs to be inserted in the Account Settings form.

Cohesion DX8

Here are the settings and key features of Cohesion DX8:

  1. Website Settings
  2. Style Settings
  3. Components
  4. Templates

Cohesion DX8 provides an in-site configuration form which takes care of your branding requirements. You can add your own branding elements like fonts, colours, icons, grid settings, SCSS variables, etc. directly onto the site. And there is absolutely no need to make any changes in the theme folder as well as the theme settings. Doesn’t this sound cool! Your basic frontend settings would be handy to you and you can modify it directly from the site without asking for help from a developer.

Website Settings

Cohesion DX8

Style Settings

It’s not over yet, with Cohesion DX8 you can create/modify styles of a site. Cohesion DX8 provides settings to update the base style or to create custom styles. 

Cohesion DX8

And this is how the default preview and configuration pane looks like.

[embedded content]

Now let’s understand what comes under Base styling and Custom styling

Base styling - Styling which is going to be consistent throughout the site, e.g., font-size of body. Font formatting of Headings, Style of a button, style of link, etc.

Custom styling - Styling which will be different for each instance or as a variation of base style. E.g., Big button, Small button, Read More Link, Consistent layout related styles (Padding Top & Bottom Large, Padding Top & Bottom Small), Social icons theming, etc.

Let’s look at the example of CTA link styling.

  • CTA style structure
    • Link styling
    • After pseudo-element styling
    • On hover pseudo-element styling
  • Style properties required for CTA link and those properties are added in the config form through properties button on the top right corner of the styling pane
  • Styling properties required for pseudo-element styling
  • Styling properties required for pseudo-element after hover

COHESION DX8

COHESION DX8

cohesion DX8

Component Builder

Now let’s introduce the coolest feature of the Cohesion Dx8 -  a Component Builder. Cohesion Dx8 follows a complete component-based development approach. So, what is the component-based development approach? 

Cohesion Dx8 provides a list of elements. By using these elements even simple and complex components can be created and be made configurable by creating a component form. The amazing part is that everything can be built by mere drag and drop. Doesn’t it sound super user friendly?

Let’s look at an example of a Hero Component and figure out which elements could be part of this component?  Let’s create a list of elements(atoms).

  • Hero Image
  • Hero Title
  • Hero Description
  • CTA button

Let’s consider the below-displayed hero component that we are trying to achieve.

Cohesion dx8

Based on the Hero component design, the hero component structure would look similar as described in the below image.

Cohesion DX8

A component will be created which will have the above-mentioned elements. But what about styling? This is the real beauty of Cohesion Dx8. It allows us to create a base style as well as a custom style and those can be appended to the component. Doesn’t it sound fascinating?

Here would like to take you back to the styling part of the section where we have styled CTA link. Now, here in the above component CTA link element can directly assign the style which has been created under custom style. And as per image, styling can be appended to CTA Link element.

COHESION DX8

Layout

There are multiple ways to create different layouts. Here, with Cohesion DX8, the layout can be defined by a Layout Category component and also component dropzone element can be provided to add other components. 

Does it mean? Woah! Yes, it means nesting use of the component is also possible. I won’t provide the screenshot for this example right now.

Template

There are four main templates:

  • Master Template
  • Content Template
  • Views Template
  • Menu Template

The template names clearly state the use of each template, but, I am sure you must have some questions related to master templates. 

What will it hold? The thumb rule is, this template should be least modifiable, means, it should not be updated frequently. We can ensure this by using only consistent section/components/regions added to it.

I hope this blog was helpful to understand the basic outline of Cohesion Dx8. Stay tuned! We have an upcoming blog that will talk about the advanced usage of templates. 

Dec 30 2016
Dec 30

In this blog post, we will be talking about Drupal’s Flex Model and its core properties. 

There are 4 ways to creating web page layout:

1. Table

2. Float

3. CSS framework

4. Flex

Flex model layout is a CSS3 based property, that is implemented to create web page layouts. It is incredibly easy to achieve responsive layouts via Flex.

Nowadays, a majority of the content editors or site builders face issues related to, aligning and handling the items with equal width and height in a responsive site. Flex model addresses this issue effectively. 

By implementing flexbox, we can see to it that, it works perfectly irrespective of the screen size. And above all, flex is compatible with most of the modern browsers. Including IE (IE > 10).

Benefits of Flex model

1. Responsive Layout

2. Equal height for each item

3. Alignment can be top, middle and bottom

4. Reverse order

5. Custom order

All you have to do is, remember the 7 basics of the flex property, and there you go a responsive layout!

In order to familiarize oneself with Flexbox, we need to keep only 2 things in mind, flex container and flex items.

Flex-container is the parent element and flex-items are the child elements. 

In the example stated below, container class - flex-container and item class- flex-items.

7 core properties for achieving Flex model layout

1. Display: flex 

This property is applied to parent element where the flex model is to be applied. In our     case,we will apply this to the container element, as it is a parent element of our website.

CODE

<code>

.container {

  display: -webkit-flex;

  display: flex;

  width: 200px;

  background: #ccc;

}

.item {

  width: 100px;

  background: #345f73;

  margin: 10px;

}

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

</div>

</code>

OUTPUT

2. Flex-wrap: wrap or no-wrap 

This property is to be applied on the parent container. This property determines that we want to wrap the element based on the width of the container.

CODE

a. With flex-wrap: wrap property

<code>

.container {

  display: -webkit-flex;

  display: flex;

  width: 200px;

  background: #ccc;

  flex-wrap: wrap;

}

.item {

  width: 100px;

  background: #345f73;

  margin: 10px;

  height: 100px;

}

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 2</div>

</div>

</code>

OUTPUT

b. With flex-wrap: no-wrap property

<code>

.container {

  display: -webkit-flex;

  display: flex;

  width: 200px;

  background: #ccc;

  flex-wrap: no-wrap;

}

.item {

  width: 100px;

  background: #345f73;

  margin: 10px;

  height: 100px;

}

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 2</div>

</div>

</code>

OUTPUT

By looking at above two example of flex-wrap property you would understand how this property works and this way it is useful in creating a useful responsive layout.

3. Flex-direction: row-reverse:

The direction of the flex item in the flex container can be reversed using flex-direction: row-reverse.

CODE

<code>

.container {

  display: -webkit-flex;

  display: flex;

  width: 200px;

  background: #ccc;

  flex-direction: row-reverse;

}

.item {

  width: 100px;

  background: #345f73;

  margin: 10px;

  height: 100px;

}

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 2</div>

</div>

</code>

OUTPUT

In the same way, if we want to display the flex items in a column and in reverse order, then we can display it using this:

CODE

<code>

.container {

  display: -webkit-flex;

  display: flex;

  width: 200px;

  background: #ccc;

  flex-direction: column-reverse;

}

.item {

  width: 100px;

  background: #345f73;

  margin: 10px;

  height: 100px;

}

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 2</div>

</div>

</code>

OUTPUT

Now moving forward with the ordering of items, we will have a look at how to arrange items in custom order.

To arrange the block in custom order we use the flex model’s order property.

Change in the code is, that this property will be applied on the item (child) level.

4. Order

CODE

<code>

.container {

  display: -webkit-flex;

  display: flex;

  width: 240px;

  background: #ccc;

}

.item {

  width: 100px;

  background: #345f73;

  margin: 10px;

  height: 100px;

  color: white;

}

.item-2 {

  order: -1;

  background: #000;

}

<div class="container">

<div class="item item-1">Item 1</div>

<div class="item item-2">Item 2</div>

<div class="item item-3">Item 3</div>

</div>

</code>

OUTPUT

5. justify-content:

This property is implemented to, adjust the elements horizontally and can be applied on the parent element class i.e container too.

1. flex-start - this is the default value. The items will be started from the beginning.

2. flex-end - Items will be started from the end - This will not reverse the order of the items.

3. center - Items will appear in the center of the screen

4. space-between - this value will add space between two items.

5. space-around - this value will add space before and after the items.

The example below displays the center and space around, which would give a better understanding of this property.

CODE

a. justify-content: center

<code>

.container {

  display: -webkit-flex;

  display: flex;

  width: 600px;

  height: 300px;

  background: #ccc;

  justify-content: center;

}

.item {

  width: 100px;

  background: #345f73;

  margin: 10px;

  height: 100px;

}

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 2</div>

</div>

</code>

OUTPUT

b. Justify-content: space-around:

This would add a margin on left and right side to each element equally.

CODE

<code>

.container {

  display: -webkit-flex;

  display: flex;

  width: 600px;

  height: 300px;

  background: #ccc;

  justify-content: space-around;

}

.item {

  width: 100px;

  background: #345f73;

  margin: 10px;

  height: 100px;

}

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 2</div>

</div>

</code>

OUTPUT

6. align-items:

Another interesting property of flex model is align-items. This property can be used for adjusting the items vertically and has the following 5 parameters:.

1. stretch - all items will be stretched and will be in same height.

2. flex-start - items will start from the top of the container.

3. Flex-end - items will start from the bottom of the container.

4. Center - items will appear in the center of the container.

5. Baseline -items will appear at the baseline of the container.

CODE

align-items: center

<code>

.container {

  display: -webkit-flex;

  display: flex;

  width: 600px;

  height: 300px;

  background: #ccc;

  justify-content: space-around;

  align-items: center;

}

.item {

  width: 100px;

  background: #345f73;

  margin: 10px;

  height: 100px;

}

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 2</div>

</div>

</code>

OUTPUT

7. Flex: 

This property specifies the length of the flex item related to other flex items.In the following example, the first flex item will consume 2/4th of the free space, and the other two flex items will consume 1/4th of the free space each.

This property will be applied at the flex’s item level.

CODE

<code>

.container {

  display: -webkit-flex;

  display: flex;

  width: 600px;

  height: 300px;

  background: #ccc;

  justify-content: space-around;

  align-items: center;

}

.item {

  width: 100px;

  background: #345f73;

  margin: 10px;

  height: 100px;

}

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 2</div>

</div>

</code>

OUTPUT

Dec 06 2016
Dec 06

'Animation' is a term everybody is familiar with. It gives an object the ability to move, breathe, and settle down. Animation depends upon number of frames being used, which results in a smooth effect. Let us revisit the history of animation:

Currently we are using HTML5, JavaScript and CSS3 for animation. We have implemented these animations on a Drupal 8 site. Here are some basics of animation.

WHY ANIMATION?

  • Increases the usability
  • Guides the user
  • Facilitates branding
  • Helps user visualize

WHEN TO USE ANIMATION?

  • To enhance design  
  • Interactive web application
  • Storytelling

WHERE ANIMATION CAN BE USED?

  • Navigation:

This is the most important element of the website because it is consistent across all pages of your website. Moreover it is the most frequently used element. Let us have a look at how navigation can be implemented via animation.

Here, when the user clicks on the hamburger icon, the navigation bar slides down. Sliding down is the animation use for navigation.

  • Registration / Subscription Form:

When clicking or hovering on a particular field, we can implement the transitive effect which grabs the user’s attention.  Highlighting a particular block, shaking the screen when invalid content has been entered; these are a few examples of applying animation to the forms. 

  • Related elements animation:

When you want to display the relative content while hovering on it, related animations are used.

HOW TO USE ANIMATION?

  • Interface Element Animation:

At times user repeatedly clicks on an object, unaware if the event triggered had any result. 

For instance, in an e-commerce website if despite clicking on the Add to cart button the item being added in the cart is not displayed to the user, it may result in bad user experience.

However, if by clicking on the button, we make a cart icon pop up and increase the count by 1; this shows the user that the action has been performed successfully, thus avoiding the user to trigger the same event repeatedly.

  • Waiting Animation:

If the content on your site is taking time to load, displaying a loader icon/sand clock prevents the user from clicking further. This is not something new for Drupal 8, this has almost been a standard since a long while now.

  • Decorative Animation:

Animation is prevalent when it comes to designing a website. But it is crucial as to how we are using it.          

An example of decorative animation could be; when a user clicks on the hamburger icon, the navigation panel appears and the hamburger icon turns into a cross icon.

  • Responsive Animation:

Animation needs space to perform. The play area on desktop is very large compared to the area on a handheld device. There are two basic techniques to maintain the equilibrium between animation and devices.

  1. Focused Art Direction

It is a technique that allows you to decide which element is important to animate.

If there are large numbers of animated elements on your website, it is difficult for you to move an element even 100 pixels on a handheld device.  Thus it is imperative to prevent unnecessary animations.

 

Hovering effect applied on desktop, but avoided when on a handheld device.

 

RESPONSIVE CHOREOGRAPHY

On a larger playground, i.e. on a desktop you have elements appearing in a linear manner. But the same when implemented and converted for a handheld device, appear in a stacked fashion. 

PERFORMANCE

Performance is always an issue. We can make your site animated and yet be exceptionally performant. There are a few fundamental rules and principles that need to be followed to animate your site effectively irrespective of whether it is built in Drupal 7 or Drupal 8.

  • Avoid the heaviest properties of CSS3

Translate 3D – Translate 3D is very heavy for the browser to render. While working on an X Y and Z axis,

The Z axis property for a browser is very difficult to render. It will take time to render in-turn impacting your site’s performance. An alternative for this is to use Perspective. 

Backface (visibility) – A cube has 3 visible sides on the screen and the 4th face that is not visible. This property can be made True or False. When made True, it suggests that when that object is rotated the ‘backface’ property shows the 4th side which is unnecessary. We can omit this property completely since it is heavy for performance. 

Will-change – This is a property available in the browser to indicate that something is going to change on this property in future. If you have 20 properties on a browser that are being animated, out of those 20 if you put ‘will-change’ property for 5 of them; the browser will not cache them. This impacts the performance, since it is not cacheable. For better performing website we need the elements to be cached, thus making them easy to render.

  • Pick the correct technology
  1. Use of CSS3 will always be high priority because it has all the properties needed for animation.
  2. JavaScript significantly reduces performance. For instant, on a page load if there is a large JavaScript file to be loaded for animation, it would hamper performance.
  3. Use both (CSS3 and JavaScript) blended together carefully for animation.
  • Animate the most performant properties
  1. Opacity
  2. Scale
  3. Rotation
  4. Position

These four properties are adequate for most of the animations needed on your site. 

While conducting performance impact analysis, we notice how many properties in a web page are getting animated when the page is loaded. If there are 20 elements animated on a page during the page load, the browser needs to load all those animations in the background and before the page loads.

Another way to go about it is to delay the animation. The page loads and only the most important elements on the page are animated first. While in the background the rest of animations gradually load. This principle is called OFFSET ANIMATION START TIMES.

ANIMATION IN DRUPAL

Drupal being a CMS, the content displayed on website should be animated, for effective presentation. And there are countless ways we can implement animation in Drupal. Drupal 7 has these modules developed:

  • Animate.css
  • Block Animation
  • Wow.js
  • Fullpage.js (sandbox)

For Drupal 8

  • Either contribute
  • Use relevant .css or.js files

For a demo on how to implement animation in Drupal please visit: https://www.youtube.com/watch?v=G2KF6wcjnDw

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web