§Typd 

10 in 1 Mega Utility Template



 

Item Type: HTML Template

Item Version: 1.0

Item Preview: typd.tonybogdanov.com

Author: Tony Bogdanov, www.tonybogdanov.com

Support: support.tonybogdanov.com

Documentation Date: 24/06/2016

Introduction Back to top

§Typd is a 10 in 1 Mega Utility Template HTML template, based on Google's Polymer.

It's great for a variety of use cases like:

  • Your new upcoming website.
  • Display an error message.
  • Protect your pages with a password.
  • Temporarily show a page during a site maintenance mode.
  • Sell your domain name.
  • much more…

This documentation aims to answer most, if not all of the questions you might have about Typd and get you started the fastest and best way possible.

If you need any further assistance or personalized help regarding this product, please refer to the frequently asked questions (F.A.Q.) and support sections of this document.

Assets disclaimer

All assets, such as images, videos and audio files used in the preview (live) version of this product are distributed under the Creative Commons license agreement unless specifically stated otherwise. As such, you can use them locally or during the setup process of your website, but you cannot use them on a live (public) version for commercial purposes, or resell (redistribute) them in any way, shape or form. All legal rights go to their respective authors.

As per the license agreement, these assets are used on the preview (live) version of this product only as "placeholders" and cannot be sold, thus be part of this package. You can obtain a copy of each of them through the source links listed below, or through a "Demo Content" feature if available.

Download live preview assets

Installation Back to top

The correct way to install the template would be to extract the html-template.zip archive (found in the main purchase package file) in a location which is accessible via the HTTP or HTTPS protocols. This could either be your hosting provider's web server, or your localhost if you have a web server installed locally.

Using a web server

If you are serious about releasing your website to the public you most probably already have purchased a web hosting plan and a Domain name to access it through.

In this case all you need to do is get access to your web server's files, via FTP for example, and upload the extracted files. Then, you can simply type in you URL address (like http://example.com) in the browser and you're all set.

Using a localhost

If you want to work locally before uploading to the web, you can do that by installing a web server on your computer (like XAMPP or WAMP), uploading the extracted files in the www or htdocs folder (depending on the server), and accessing it via http://localhost.

Linking Back to top

There are several actions that can be performed by issuing a click event (simply clicking) on any element with an href attribute, e.g. an anchor ( <a href="…"> … </a> ).

Each action has the following syntax (value for the href attribute): #action=value.

Scrolling up / down

You can use #scroll=up and #scroll=down to scroll respectfully up and down.

If the current page includes at least one <tb-section> element with a name attribute then the scrolling will loop-through and focus each section on after another.

If there are no sections on the page, the scrolling will simulate Page Up and Page Down actions.

The <tb-main> element must be used in the page for this feature to work.

Scrolling to a section

You can use #scroll=test to explicitly scroll to a section (on the current page) with test as value for the name attribute.

The <tb-main> element must be used in the page for this feature to work.

Section expand / collapse

You can use #section=expand and #section=collapse to respectfully expand and collapse the content of a section. This will only work for a section with a background and only if it's triggered by an element from within the section.

The <tb-section> element must be used in the page at least once for this feature to work.

Popup

You can use #popup=test to open a <tb-popup> element (on the current page) with test as value for the name attribute.

The <tb-popup> element must be used in the page at least once for this feature to work.

Theming

You can use #theme=light and #theme=dark to explicitly switch the current page to respectfully light and dark theme, and #theme=toggle to toggle between the two themes.

Components Back to top

When customizing your template you'll notice there are three general points of interest.

Those would be the contact.php file where you can specify your e-mail address in order to make the contact form work (you'll also need to have a server capable of running PHP with the sendmail extension enabled).

The subscribe.php file where you can specify where to send all subscribed e-mail addresses (you'll also need to have a server capable of running PHP with the sendmail extension enabled).

And the various html files where all of your template is configured. The files consist of many individual Polymer components for each of which you will find the appropriate documentation below.

Do note that for any advanced modifications you will require some knowledge of the concept of web components and Polymer.

Components – <tb-browser> Back to top

This element displays a browser entry from the browser.html page. The following HTML attributes are available:

Attribute Type Default value Description
href String none Use this to specify which URL should be opened when the element is clicked.
browser String chrome Choose the name of the browser to display. Available ones are chrome, firefox, opera, safari, edge, ie.
windows Boolean false Add this attribute to specify that the browser is supported on the Microsoft Windows operating system.
linux Boolean false Add this attribute to specify that the browser is supported on the Linux operating system.
mac Boolean false Add this attribute to specify that the browser is supported on the Mac OS X operating system.

Components – <tb-button> Back to top

As the name suggests this is an element which displays a button which can be used to create anchors, submit forms etc. The following HTML attributes are available:

Attribute Type Default value Description
href String none Use this to display an anchor button and specify the URL to be opened.
icon String none Specify an icon name to be displayed in the button. A list of all icons is available here: Pixeden.
iconRight Boolean false Add this attribute to display the icon on the right of the text.
submit Boolean false Add this attribute to make the button submit a form (must be inside a <form> element).
newTab Boolean false Add this attribute to make the page specified by the href attribute open in a new tab.
block Boolean false Add this attribute to display the button as a block element instead of inline-block.

Components – <tb-clock> Back to top

Displays a countdown clock. The following HTML attributes are available:

Attribute Type Default value Description
date String null Define the target date up to which to count down. The date can be in any dateString format supported by JavaScript.
demoMode Boolean false Add this attribute to make the clock work in demo mode. This is generally only useful for the live preview. In demo mode once the countdown reaches 0 it will restart back and continue counting down, as where in non-demo mode it will stop at 0.
labelDays String Days Choose a text for the days label.
labelHours String Hours Choose a text for the hours label.
labelMinutes String Minutes Choose a text for the minutes label.
labelSeconds String Seconds Choose a text for the seconds label.

Components – <tb-header> Back to top

Displays a page header element. The following HTML attributes are available:

Attribute Type Default value Description
logoUrl String # Choose the URL to be opened when clicking on the logo.
logoLight String assets/logo-light.png Choose an image URL for the logo to be displayed on the light theme.
logoDark String assets/logo-dark.png Choose an image URL for the logo to be displayed on the dark theme.
lightbulbLight String assets/lightbulb-light.png Choose an image URL for the lightbulb icon to be displayed on the light theme.
lightbulbDark String assets/lightbulb-dark.png Choose an image URL for the lightbulb icon to be displayed on the dark theme.
lightbulbTitle String Toggle light / dark Choose a title for the lightbulb icon.

Components – <tb-image-box> Back to top

Displays an image box. The following HTML attributes are available:

Attribute Type Default value Description
href String # Specify the URL to be opened when the element is clicked.
image String about:blank Specify the URL source of the image to display.
icon String none Specify an icon class name.
icon String none Specify an icon class name.
heading String none Specify a heading text.
iconRight Boolean false Add this attribute to display the icon and heading right–aligned.

Components – <tb-input> Back to top

Displays a form input box. The following HTML attributes are available:

Attribute Type Default value Description
type String text Specify the type of the input field. Can be text, password, email, url, search or textarea.
name String none A unique field name (per form). If omitted, the field will not be submitted.
placeholder String none A placeholder label for the input field.
label String none A label for the input field.
value String none A value for the input field.

Components – <tb-main> Back to top

This is the main element for the entire site. Every other element must reside inside this one. The following HTML attributes are available:

Attribute Type Default value Description
background String none Specify a square image to be displayed as a fixed background.

Components – <tb-popup> Back to top

Registers a popup element available on the page. See linking for info on how to open / close popups. The following HTML attributes are available:

Attribute Type Default value Description
name String none Specify a unique name using which you may target the popup.

Components – <tb-scroll-box> Back to top

Displays the content inside a stylized box with scrollbars. Very useful for large text blocks like terms of service, EULA etc. This element has no additional attributes.

Components – <tb-section> Back to top

Marks the content inside as part of a named section of the current page, allowing for scrolling up or down to it using linking. The following HTML attributes are available:

Attribute Type Default value Description
name String none Specify a unique name for the section (per page). This is required in order to enable linking.
heading String none Specify a section heading.
headingHint String none Specify a section heading hint.
background String none Specify a background type for the section. Can be one of image, video or map.
image String none Specify an image URL for the background. To use this, background must be set to image.
video String none Specify a YouTube video ID for the background. To use this, background must be set to video.
image String none Specify an image URL for the background. To use this, background must be set to image.
map Object none Specify a Google map configuration for the background. To use this, background must be set to map. The configuration must be in JSON format.
fullBleed Boolean false Add this attribute to disable the default section content layout and make it full-bleed.

Components – <tb-service> Back to top

Displays a service element. The following HTML attributes are available:

Attribute Type Default value Description
icon String none Specify an icon class name.
heading String none Specify a heading. The value may include a \n symbol to add a new line as any HTML entities will be escaped.
right Boolean false Add this attribute to display the icon, heading and contents right–aligned.

Components – <tb-subscribe> Back to top

Displays a site-wide floating newsletter subscribe box (also see subscribe.php). The following HTML attributes are available:

Attribute Type Default value Description
placeholder String Your e-mail address Specify a placeholder text for the e-mail field.
tooltip String Newsletter Specify a tooltip text.
submit String Subscribe Specify a label for the submit button.

Components – <tb-wow> Back to top

Displays a wow label on the left / right of the wrapped content. The following HTML attributes are available:

Attribute Type Default value Description
url String none Specify a URL to be opened when clicked. Must be used in conjunction with the text attribute.
text String none Specify the label to be displayed.
right Boolean false Add this attribute to display the element to the right of the wrapped content.

Customization Back to top

Customizing the overall appearance of your template is quite simple. Thanks to the CSS variables and CSS mixins features you can easily change colors, font sizes, dimensions and even add your own arbitrary CSS styles.

All you need to do is open the customization/global.html file (which is a Google Polymer style module) and follow the guide in the comments to configure / change all the default values. Once you make your changes and save the file, refresh your browser and you'll see all customizations you've made applied to the template globally.

If there is no variable or mixin available for the thing you need to change, simply head over to the support section and we'll add the option in the next release.

Variables

Most of the simple things you can change like colors, dimensions etc. use CSS variables. They have a name and a single value and look like this:

--name-of-variable: #00vae9;

The value can be anything from dimension, color, font family name etc. depending on the use of the variable.

Mixins

More complex customizations can be achieved by using CSS mixins. They have a name and a list of multiple CSS definitions as value and look like this:

--name-of-mixin: {
    color: #00cae9;
    font-size: 2em;
};

The mixin can consist of unlimited number of entries as long as they are valid CSS. Targeting child elements via selectors is unfortunately not supported.

Optimization Back to top

Optimization is NOT required in order for the template to function properly and you should only follow this guide if you feel confident enough. The techniques explained here are merely exemplary. Receiving help for a more specific implementation is not covered by the template purchase.

Once you create your website using this template you are pretty much all set. You can upload it to your web host and enjoy your new website. There are, however, things you could do in order to optimize your site's size and performance speed upon deploying.

Optimizing size

For the purpose of being sold on ThemeForest, this template comes packed with all source development files such as SCSS (Sass), CSS and JS files. Those files are not compressed, so they would be easily readable. Most of them, however, are not really needed in a production environment.

Below you will find a list of things you could consider doing (in the order they are listed) once you decide to deploy your website. Be sure to keep a separate copy of the files you are going to modify, or just backup the entire site before you continue.

Compress JS files

Use a JS compressor to minify the size of .js files. The browsers' understanding of them remains the same, but they are reduced in size and no longer human-readable.

You can use an online tool like JS Compress or install a library like YUI Compressor. You can also automate the process using Gulp.

For this particular template you should consider searching for .js files in the following directories:

  • lib and all sub-directories
  • bower_components and all sub-directories

The compressed JavaScript should not be written to the original .js files, but to a corresponding .min.js file (if such already exists), as those are the ones actually being used. For example, a source button.js file should have it's compressed version written to button.min.js in the same folder. If no corresponding .min.js file exists, the content should be written back to the original .js file.

Compress CSS files

Use a CSS compressor to minify the size of .css files. The browsers' understanding of them remains the same, but they are reduced in size and no longer human-readable.

You can use an online tool like CSS Compressor or install a library like YUI Compressor. You can also automate the process using Gulp.

For this particular template you should consider searching for .css files in the following directories:

  • lib and all sub-directories
  • bower_components and all sub-directories

The compressed CSS should not be written to the original .css files, but to a corresponding .min.css file (if such already exists), as those are the ones actually being used. For example, a source button.css file should have it's compressed version written to button.min.css in the same folder. If no corresponding .min.css file exists, the content should be written back to the original .css file.

Update Google Polymer style modules

Google Polymer–based Web Components (the core of this template) use a feature called style modules to style themselves. This essentially means they use .html files with all the CSS embedded inside instead of external CSS files.

Now that you've compressed all CSS files you need to inject them into their corresponding style modules. All components using style modules for this template are found in the lib/components directory and it's sub-directories. You shouldn't worry about files outside of this folder.

For easier identification all style module files end in -shared.css with a corresponding -shared.html file. For example, a source button-shared.css file will have a corresponding style module HTML file named button-shared.html in the same folder.

A typical style module HTML file would look like this:

<dom-module id="component-name">
    <template>
        <style>
            /* Here goes the CSS from the corresponding */
            /* component-name-shared.css file */
        </style>
    </template>
</dom-module>

Cleanup

A last step would be to just delete all files that are no longer used by the template.

  1. All .js files that have a corresponding .min.js file.
  2. All .css files that have a corresponding .min.css file.
  3. All -shared.css files that have a corresponding -shared.html file.
  4. All .scss files – originally used to aid template development by compiling to CSS files.

Optimizing performance

Since the Web Components approach uses many capsulized components each of which have multiple files being loaded by the browser, that could have a detrimental effect on the page load times and overall performance.

According to some sources, if your site is going to be served through the new HTTP/2 network protocol, you can just skip this entire step altogether.

Thankfully the team behind Google Polymer have supplied a useful tool called vulcanize, which you can use to vulcanize the main template file: lib/lib.html. The tool will recursively embed all HTML, JavaScript and CSS imports defined in that file and write them back to lib/lib.html. This way the browser will only have to make a single request when loading the components.

Once vulcanization completes, all files that are embedded can now be safely deleted to save even more space. Follow the list of actions below (in the order listed):

  1. Delete the lib/components folder and all of it's contents.
  2. Delete the lib/dependencies folder and all of it's contents.
  3. Delete all files that end in .js or .min.js, under lib and all of it's sub-directories.
  4. Delete all files that end in -shared.css, under lib and all of it's sub-directories.
  5. Delete all files that end in -shared.html, under lib and all of it's sub-directories except lib/styles/custom-shared.html.
  6. Delete the lib/styles/custom folder and all of it's contents.
  7. Delete the bower_components folder and all of it's contents except:
    • bower_components/webcomponentsjs/webcomponents-lite.min.js
    • bower_components/font-awesome
    • bower_components/pixeden-stroke-7-icon

Changelog Back to top

1.0
 - This is the initial release of the template.

F.A.Q. Back to top

I need a feature that is not implemented yet, what should I do?

You should head to the support section and leave a message. If we decide, that the feature is going to be useful for other customers as well, it will be implemented as-soon-as-possible and released in the next version. In this case all you need to do is to be patient :)

If it is too specific for the general public you will be contacted back with a custom offer for implementing it specially for you.

I found a bug / something doesn't work, should I panic?

No software exists, that is prone to errors or bugs. If you encounter such an issue, just contact the support staff and we will fix it as soon as possible. Make sure to test your site before releasing it to the public, sometimes issues might be just badly configured features and not actual bugs.

I am not satisfied with my purchase, how can I get a refund?

Always make sure, that the product covers all your expectations prior to purchasing it. Study the preview site and ask as many pre-sale questions as you want to make sure it is the right product for you.

If you are unsatisfied due to issues / bugs explicitly caused by the product, and you still demand a refund after contacting the support staff, you can refer to the Envato Market Help Center as they are the only ones who can issue a full refund.

Support Back to top

For further assistance in installing / configuring the product and the related software, or for reporting issues and bugs, please refer to one of the contact options below.