After the successful implementation of Enplated Framework into your site, you first need to set up the config file correctly.
In the pageVariables object we can declare variables. First we declare the variable name (it must be unique) and then we assign a value in quotes.
Then in the pageColors object we can set the color options for the layout. All colors can be written in quotes in the classic CSS format. If the value is set to default, the color for the default dark layout will be used.
In the fonts object, the font names for the elements can be defined in quotes. If default is used, the font will be set to Arial.
In the copyrightInfoId variable it is necessary to define the id of the element to which the Enplated Framework Copyright text will be assigned (see explained below).
When setting the developerVersion variable to true, 2 options will be automatically enabled. Firstly, the browser console will list the operations currently running in the Enplated Framework kernel and it will not be necessary to have the copyrightInfoId variable defined. This option is mainly for testing and debugging purposes and is not intended for use on public sites.
If Google Fonts is used, the import can be done in the googleFontsImport variable. Only the URL of the import must be stored in the variable, no other information. Google Materials Icons are already imported in Enplated Framework core and should not be imported in duplicate.
The variables defined in the first step can be used in any place in the website to list the text. The basic pattern for variable usage is: <span class="variableName"></span>.
A possible use might look like this: <h2>My page is called: <span class="websiteName"></span></h2>.
Enplated Framework offers 2 header styles. For simple pages there is the headerSimple, for other pages headerClassic.
HeaderSimple is designed to insert only the site logo and page title. On a mobile layout, these two elements will appear under each other, on a full layout they will appear side by side (one in the left corner, the other in the right corner).
If you are using a logo with more details, it is recommended to export the logo as an .svg file including the fonts instead of using .png or .jpg files.
A sample headerSimple might look like this:
<header class="headerSimple">
<img class="siteLogo" src="logo.svg">
<h1 class="headerName">SiteName</h1>
</header>
HeaderClassic also offers the possibility to add a menu with links. The basic layout is very similar to HeaderSimple, but the page title is moved to the left to the logo and a menu is placed on the right side.
On a mobile layout, the menu will automatically adapt to the hamburger menu.
A sample headerClassic might look like this:
<header class="headerClassic">
<img class="siteLogo" src="logo.svg">
<h1 class="headerName">SiteName</h1>
<div class="headerMenu">
<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
<a href="page3.html">Page 3</a>
<a href="page4.html">Page 4</a>
</div>
</header>
The column function is available to align objects to the center of the page in a column below. Possible example use:
<div class="column">
<h2>animals:</h2>
<h>Zebra</h3>
<h>Elephant</h3>
<h>Tiger</h3>
</div>
For the alignment of objects to the center of the page in a row, the row function is available. However, if multiple elements are implemented, mobile layout issues may arise, so caution is in order.
Possible example usage:
<div class="row">
<h2>Best students in this class:</h2>
<h>1. Christine</h3>
<h>2. James</h3>
<h>3. Catherine</h3>
</div>
To divide elements into equally sized columns, the space function can be used. A possible example of use for link generation, for example in the footer of a website:
<div class="space">
<div class="column">
<h2>Social networks:</h2>
<a href="https://instagram.com">Instagram</a>
<a href="https://facebook.com">Facebook</a>
<a href="https://youtube.com">YouTube</a>
</div>
<div class="column">
<h2>Useful links:</h2>
<a href="https://example.com/gdpr">GDPR</a>
<a href="https://example.com/contact">Contact us</a>
<a href="https://example.com/visit">Visit us</a>
</div>
</div>
To separate the content with a space, we can use the empty function. This is available in several options:
<div class="empty10"></div>
<div class="empty25"></div>
<div class="empty50"></div>
<div class="empty75"></div>
<div class="empty100"></div>
<div class="empty150"></div>
<div class="empty200"></div>
<div class="empty250"></div>
The number after the empty name indicates the number of pixels the space will occupy. Only the values listed above are available, other values will be invalid and will not work.
It is not recommended to place any content in this div block.
Enplated Framework currently offers 2 integrated logic blocks. The redirect block (redirect) is useful if you want to automatically redirect the user to another page. The basic design is as follows:
<div class="redirect" to="https://google.com" time="5000" animation="1" message="Redirect in progress"></div>
The redirect parameter is for setting the URL where you want to redirect the user.
The time parameter specifies, in milliseconds, how long it takes for the redirect to occur.
The animation parameter sets what animation will be displayed to the user. If set to -1, no animation or message will be displayed, if set to 0, only the message will be displayed (see below), the other numbers indicate the animations according to this page.
The message parameter sets the message that will be displayed to the user when redirecting. However, if the animation parameter is set to -1, this message will not be displayed.
Enplated Framework offers a logical block for the counter. This dynamically starts changing a number from a given value to a given value, creating a visual impression on the user. The basic design is as follows:
<div class="counter" from="50" to="200" change="5" time="1000" prefix="+ " suffix="$"></div>
The from parameter specifies the number to count from.
The to parameter specifies the number to which the count will be performed.
The change parameter is used to set how much the number will be changed from the previous number and therefore how much the number will be changed in each step. It must be positive only.
The time parameter specifies in milliseconds how long the change from the first number to the last will take.
The prefix parameter sets the selected characters (for example, a currency symbol or other symbol) before the given number.
The suffix parameter sets the selected characters (for example, a currency symbol or another symbol) after the given number.
The block is also adapted for negative numbers or subtraction of numbers (for example from 100 to -50).
When setting this block, you must also take into account the balance between the change and time parameters. This may require some experimentation and time.
On GitHub you can find a demo-sandbox page where the Enplated Framework settings can be better understood.