Docs v1.0

Welcome

Syndicate is clean, onepage and/or multipage, HTML5&CSS3, multipurpose template. Designed for agency, personal portfolio, blog, app landing page and similar.

Built with Bootstrap 3

Bootstrap is sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.

Dozens of reusable components built to provide dropdowns, navigation, alerts, popovers and much more.

Components

Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes and an advanced grid system.

CSS

Bring Bootstrap’s components to life with over a dozen custom jQuery plugins.

JavaScript

IMPORTANT! DO NOT UPDATE BOOTSTRAP FILES OR LINK TO THERE CDN

Bootstrap 3 is still in beta, we will update template when final version arrive.

Features:

Fully Responsive

Syndicate responds to the device that accesses it and delivers the appropriate output, for it uses responsive design.

HTML5 & CSS3

Valid code, latest technologies, always up-to-date. Compatible with latest desktop and mobile browsers down to IE8.

Retina Ready

Syndicate looks beautiful on retina displays. Makes it easy to serve high-resolution images to devices with retina displays.

Onepage or multipage

Yes you can have multipage site made of Syndicate sections, and navigate with links in menu.

Responsive Videos

Embed YouTube and Vimeo videos on site and watch them on any device.

Slide on touch

We have added swipe function to Bootstrap carousel.

Section headers

Have them as much as you want and place any content inside.

Rearrange sections

Move sections up and down and arrange elements by your needs.

Portfolio & blog modals

Full screen modals to show any content that you like.

Tour

Makes it possible to create non-invasive guides or tours on site, without changing the code of the site itself. See onepage version demo.

Google fonts

We have used only Google web fonts. You can use any within a minute.

Colorful or flat

Easily style icon color, size, shadow, use premade ones or make your own color combo. Demo for onepage version is colorful and multipage is more flat.

Getting started

Folders and files that you need to include on your web server in order for the template to function fully:

For multipage website you need to include all other .html files of your pages. components.html is not required, we use it just for demo purpose.

Editing files

For editing files you will need one of the text editor softwares, we suggest:

Download Sublime Download Notepad++

Customizing tour

With your text editor open guideline.steps.js in js folder and edit steps.

type: “overlay” - probably first step, full screen overlay with HTML inside.

showAt: “” - where you want to show bubble, find id of an element and paste here.

content: “” - just edit text inside HTML code or add yours, keep first gl-overlay div and button for next step.

tour.addStep({
  type: "overlay",
  showAt: "#yourID",
    content:
    "<div class='gl-overlay'>"+
      "<h1>This is large welcome note</h1>"+
      "<p>This is small text to explain this tour</p>"+
      "<button class='btn btn-cool squared start-tour'>Start tour</button>"+
      " "+
      "<button class='btn btn-fancy squared gl-skip'>Skip tour</button>"+
    "</div>",
  continueWhen: "click .start-tour",
});

type: “bubble” - small bubbles for all other steps with various options.

title: “” - bubble heading.

content: “” - here you want to describe what is this step about.

align: “” - for alignment please use “center middle” to keep bubble in viewport in responsive mode.

tour.addStep({
  type: "bubble",
  title: "Step title",
  content: "Step description",
  showAt: "#yourID",
  align: "center middle",
  showContinue: true
});

See options

Animations

Designer friendly. No JavaScript skills needed. Just plain CSS and HTML.

If you’re familiar with CSS, you already know the style attribute. In order to create an animation you would need several, at least two, of them. That’s what skrollr does. You use the HTML5 data- attributes to define multiple sets of styles and skrollr interpolates between them.

Example for services icons:
data-bottom-center="opacity: 0;" data-bottom-bottom="opacity: 1;"

Example for text inside intro slider:
data-start="opacity:1; top: 45%;" data-250="opacity: 0; top: 10%;"

See examples and details

Animations are disabled on devices with touch, it’s a just issue with scrolling on different OS’s, developer of this plugin is working hard to fix this. To edit element style when animations are turned off you will need to style them in style.css

Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.

<i class="icon-tablet"></i>

<i class="icon-cogs"></i>

See all icons

Responsive videos

Just wrap iframe of video in div with .video and .col-# class and you are set.

<div class="col-lg-6 video">
  <iframe src="http://player.vimeo.com/video/60252066?title=0&amp;byline=0&amp;portrait=0"></iframe>
</div>

Rearranging sections

Just cut section ... /section and paste it before or after other section

Google fonts

In index.html (in multipage website you need to change this in all *.html files) inside head replace our link to font with your desired one.

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700'>

See all fonts

Retina support

When users with retina device open a page, script checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

For example, if you have an image on your page that looks like this "/img/my_image.png" script will check your server to see if an alternative image exists at this path "/img/my_image@2x.png"

Simplified, all you have to do is to include same image in double size with @2x added in file name, and in same folder as original image on your server. If you don’t include double sized image then script will leave original one.

Contact form

Change recipient email in js/sendmail.php - on line 3. Change subject in same file - on line 6.

404 page

We have included 404 error page with template, we can’t set this for your server so you will have to do it your self. See how: http://www.thesitewizard.com/archive/custom404.shtml

Underconstruction page

One more bonus thing, while you work on your website you can collect emails with our MailChimp integrated form in underconstruction page. Just replace our link with yours. See: http://mailchimp.com/

How to set date in countdown: http://keith-wood.name/countdown.html

Few things

aka important

For best design and overall look of your site we suggest to keep images in size (pixels and aspect ratio) that we used in preview.

Every slider(carousel) must have it’s own ID and “prev”/“next” buttons must point to that ID. You will probably have different ID’s from us, replace or add new ID’s in custom.js in js folder.

Height of intro section is always the height of screen size of visitor. If you have sentance or object that need more place on small screens, feel free to modify with adding “min-height:” in css for carousel item.

For multipage website you will need robots and site map, one useful link: http://www.xml-sitemaps.com/

Free Support

Styling bootstrap is easy, but if you need help…

Don’t worry - we’ve got you covered! Grab a cup of coffee and let us jump in. We also do small customization for free.

No Bugs

Syndicate is tested on different devices, browsers and operating systems. If you find one, the beer is on us.

Commented

To help you when customizing Syndicate, HTML and CSS files are commented.

Support via forum

We have forum for our buyers where you can report issues, find answers and get latest updates before we publish them on ThemeForest.

Visit Forum

Support via email

You can always contact us via form on our ThemeForest profile.

Contact Us

Custom requests

If you would like to see some element or have a suggestion we know to listen.

Credits

Credits goes to Saturized - The Interactive Agency for giving us permission to use there awesome work

Changelog

v1.0 - August 19, 2013

Initial version.

About Us

Syndicate is made by Awerest.

Awerest is graphic design, web developent and music production studio.

We create digital experiences that tell stories, build brands and bring ideas to life. We live, work and play in Novi Sad, Serbia.