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.
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes and an advanced grid system.
Bring Bootstrap’s components to life with over a dozen custom jQuery plugins.
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:
- css
- img
- js
- index.html
- thumbnail.png
- favicon.ico
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
});
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%;"
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.
- One Font, 361 Icons - In a single collection, Font Awesome is a pictographic language of web-related actions.
- Infinite Scalability - Scalable vector graphics means every icon looks awesome at any size.
<i class="icon-tablet"></i>
<i class="icon-cogs"></i>
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&byline=0&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'>
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.
Support via email
You can always contact us via form on our ThemeForest profile.
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.