Purencools Blog

You are here

CSS variables a very cool! Notice ":root'  in the example below contains global variables that could be used anywhere in a styles sheet document. 

Below is an example of  HTML5 Javascript browser storage written in pure ES6. Web storage can be used on any website. It stores information locally within the user's browser. Add information to the list and then close your browser and reopen it again and the data will automatically  populate.

I have been playing with the new CSS flex tool and it is amazing. The css use is in the example below.

 

#content {
    display:flex;
    flex-wrap: wrap;
    background: #DAF7A6;
}

#description {
    display: inline-block;
    width:100%;
    background: #FFC300;
    order:3;
}


.article {
    order:2;
    flex:4;
    background: #FF5733;
}

.aside {
    order:1;
    flex:1;
    background: #C70039
}

#three-cols {
    display:flex;
    flex-wrap: wrap;
    background: #581845;
}


#four-cols {
    display:flex;
    flex-wrap: wrap;
    background: #900C3F;
}

#five-cols {
    display:flex;
    flex-wrap: wrap;
    background: #581845;
}

I have been playing with the new CSS grid tool and it is amazing. See what happens when you resize the page

 

In Drupal 8 views an anonymous user has the ability to filter content. When exposes the filters is enabled. But there is no html5 placeholder by default for a text field. The function below will add placeholder text to every views exposed form input as long it has a label.

If site builder needs to create a custom view twig file. In Drupal 8 you have to register a suggestion with the theme array. Adding the function below to your template.theme will give the developer the ability to add a twig file called views-view-viewname--.html.twig.

To set a twig variable in Drupal 8 so that can add conditional logic to a region, block, node, custom layout display and/or field in the templating system. Below is are some examples on how to do this,

Does the variable have any content at all

     
{% set content_variable = content.field_or_content|render|trim  %}
{% if content_variable %}
//-- print result if true
{% else %}
//-- print result if false
{% endif %}

Sometimes the content only has HTML tags use  striptags can remove it

To create a custom twig template for a certain form in Drupal 8 you will need to add a theme suggestion hook in your .theme file like the suggestion below.

/**
 * Implements hook_theme_suggestions_HOOK() for contact form suggestion.
 */
function themename_theme_suggestions_form_alter(array &$suggestions, array $variables) {
    $suggestions[] = 'form__' . $variables['element']['#form_id'];
}

Moving production database and files from AWS Drupal 8 instance to development server using SSH is really easy on EC2. The scripts below takes a copy of the production servers files directory and database in Drupal 8, the assest are then placed all into sync directory. Then SSH copies all these files to the development server. The process below allow no user to access production using Drush

This function in Drupal 8 allows you to test the user's current role and give them access to some sort of data programmatically. For example, you might have a custom block that you want only a certain role to see. This function below will give you that functionality. Add the code to your .module file in your module .theme in your custom theme.

Pages