'

TOP TOPICS

View all stories
View all
Pervasive
Intelligence
Core Technologies
Innovation Services
Unlocking Value
Global
Democratization
Smart Business Models

Tags:

Innovation Services
Pervasive

Tags:

Smart Business Models
Smart Business Models
Unlocking Value

Tags:

Democratization
Smart Business Models

Tags:

Unlocking Value
Core Technologies
Democratization

Tags:

Global
Core Technologies

Tags:

Innovation Services
Unlocking Value

Tags:

Pervasive
Intelligence
Core Technologies
August 14, 2022
Cierra Buckridge

The Top 8 Emerging Technology Trends for 2021

Tags:

Democratization
Unlocking Value
Pervasive

Tags:

Innovation Services
Global
Core Technologies

Tags:

Core Technologies
Innovation Services
Intelligence

Tags:

Unlocking Value
Democratization
Core Technologies

Tags:

Pervasive
Core Technologies

Tags:

Democratization

Recommended Practices

OG-tags

At the very beginning of using the project, take care of setting up OG tags. Manually add the name, description, and URL for the image to static pagesUse an image up to 300 kb in jpg format.

Example 1 | Example 2

Services for resetting the cache of social networks.networks (for the case when the content was updated, but in social networks it remained old):

Filling out articles

Each article can be associated with a maximum of three tags, but not less than one.

You can also link an article to only one author.

The articles are sorted chronologically from new to old.

Design of each page

The page structure should look like this.

After <header> we place a block with the "content" class, and inside it we add the main section and footer

For each <body> tag, you need to add a "body" class

Example

Creating a theme for a page (color management)

Follow the following rules:

  • Changing the color of individual page elements should only be done inside the inner styles component in the tag with the "COLORS" class

    Example
  • For global color changes on all elements at once, you either need to use one of the already created components, or create your own, and then place it on the desired page

    Example
  • To create your own theme, use a structure from a ready-made theme. The rules for this are as follows:

    • All colors in hsla format
    • "--color-accent" = unique
    • "--color-bg" = "--color-topics-primary"
    • "--color-primary" = "--color-topics-bg"
    • "--color-bg-transparent" = the color is the same as "--color-bg", but the last parameter is zero
    • "--color-topics-primary-light" = we save  the color as in "--color-topics-primary", Change the third parameter to +/- 25%
    • "--color-topics-primary-lighter" = we save  the color as in "--color-topics-primary-light", Change the third parameter to +/- 25%
    • "--color-primary-light" = we save  the color as in "--color-primary", Change the third parameter to +/- 25%
    • "--color-primary-lighter" = we save  the color as in "--color-primary-light", Change the third parameter to +/- 25%

    Example 1 | Example 2 | Example 3

  • In order for the background and text color in the theme styles of the new page to change after clicking on the link (even before switching to another page) on the current page, we need to fill in the inner styles component in the tag with the "JS ALL PAGES" class. There are some rules

    Example 1 | Example 2 | Example 3

    Notes:

    • color = "--color-primary"
    • backgroundColor = "--color-bg"
    • the page names (highlighted in red) correspond to the value in the "slug" field in the page settings

Using Required Classes

Here is a list of classes that you should not delete for the correct operation of the site

Example

Using components

If you need to reuse a ready-made section, then check whether this section is already a component. If not, then make it a component. And only then reuse it on other pages.

Changing navigation elements

Follow the following rules:

  • In order to swap, add or remove buttons in navigation, you need to go to the header component and do everything you need inside the nav class element. (but it is not desirable to change or move the first element with the "nav__item" class)

    Example
  • So you can edit the link on the navigation button

    Example 1 | Example 2

  • So you can edit the text on the navigation button

    Example 1 | Example 2

  • For correct operation - do not use the same links in navigation

    Example

Removing unnecessary scripts

There are some scripts on the site that need to be removed when using this template

  • To remove the "buymeacoffee" widget from the site you need to remove the corresponding component from all pages.

    Example