Fragment - Responsive One Page Template
Say hello to Fragment, a powerful & beautiful one-page Site Template
Fragment is a beautiful, modern & AJAX powered one-page Site Template featuring smooth animations and built with the principles of mobile-first in mind. A perfect fit for any kind of business, with valid HTML5 & CSS3 and the Bootstrap framework at it’s core, this template combines both rock-solid functionality with a striking, retina-ready design which looks razor sharp on any device. It’s 100% fully responsive, displaying content effectively on any viewport. The innovative fold-in navigation delivers an unparalleled user experience consistent across devices and viewports.
The entire template is image independent, all page elements have been created solely by using CSS and an icon font containing over 300 ready to use icons, making sure the page is rendered crystal-clear on any device. And did we mention you can animate any element on the page? This is just a fraction of the awesomeness contained in this template, check out the demo now to see what Fragment has to offer!
Features
- Beautiful & modern design, looks gorgeous on any device
- Valid and easy to use HTML5 & CSS3, powered by jQuery
- Cross-browser compatible
- Animate any element on the page using one of 50+ animations
- Striking full-screen main slider
- Unique and user friendly navigation
- Responsive FlexSlider included for sliding any type of content
- 8 predefined color themes, easily add your own
- Built upon Bootstrap, ready to go!
- Fully Responsive & optimized for smartphones and tablets
- Retina-ready, looks stunning on any device!
- Icon font included containing 300+ icons, use them in lists, button and more!
- Portfolio with Isotope powered filtering($25 value!)
- AJAX powered portfolio pages with full-screen slider
- Google Maps implementation
- AJAX powered blog
- Fully functional PHP+AJAX contact form
- PSD files included
Documentation
- Documentation help file included.
- All layered and commented PSD’s included.
- Documented HTML pages, elements & widgets.
Support
Customer satisfaction is our top priority. If you come across a bug, or have a comment or suggestion, don’t hesitate to contact us using the contact form on our profile page.
Credits
- All content filler images used have been downloaded from Psddd, Wallbase & Unsplash.
- The IcoMoon Typeface is created by IcoMoon.
- animate.css file created by Dan Eden http://daneden.me/animate/
- Dummy content ‘The Art of Unix Programming’ by Eric Steven Raymond http://www.faqs.org/docs/artu/index.html
NOTE: the images used in this demo are for demonstration purposes ONLY and are NOT included with the final product.
Changelog
11-07-2013
Version 1.1
MODIFIED:
-- main.js
Some minor fixes for Safari 5.1.7
Added functionality for toggles
-- main.css
Added CSS for toggles
Added CSS for pricing tables
-- css/colors/
Added CSS for toggles in every color CSS file
Added CSS for pricing tables in every color CSS file
-- index.html
NEW: Pricing tables
NEW: FAQs
09-07-2013
Version 1.0
-- Initial Release
I absolutely adore this template… I have sent some Qs to support on ThemeForest regarding a couple of Licensing questions I have before I buy (making sure I choose the right option for my needs/wants) but I also wanted to check something with you… I tried this on a borrowed iPad and it didnt look so hot. Not sure if it was a problem with the iPad I had. Is anyone able to double check that this indeed works well on an iPad/Tablet?
ReplyDeleteOn the PC, Mac and iPhone it looks awesome and has almost all the elements I am looking for.. except one. My site needs to be multilingual… is this possible?
Thanks also on behalf of everyone here for being so supportive and quick with responses… it give us confidence
Hi,
ReplyDeletethanks so much for the kind words, glad you like it!
I have never had any problems with the template on the iPad. If you could give me some details on the issues you found, I could look into fixing them.
Keep in mind this is a HTML/CSS template and not an installable WordPress theme. It can definitely be multilingual, but how you implement this is completely up to you since there are many different ways to do this.
You’re welcome! Knowing that people appreciate my work give me confidence!
Kind regards,
66Themes
Sorry for the tardy reply… its ok.. I tried it on a different iPad and it was great… so its a no-brainer for me! HTML all the way for me!
ReplyDeleteAnd incidentally I have looked at SO many templates and your by far ticks so many more boxes for me.
Thank You!
Nikki
Great, enjoy your purchase!
ReplyDeleteAnd of course, if you require any assistance, just let me know.
Cheers!
Hello – I’d like to buy this Fragment theme but am waiting for the new wordpress version to launch. When will this be launching?
ReplyDeleteExcited to buy it!
Hi,
ReplyDeleteGreat timing, it just got approved for sale, check it out here.
Thank you for your interest!
Kind regards,
66Themes
Great! Do you think updates will be available for this theme anytime soon to fix some of the lagging parallax bugs? I see that in the header on the homepage my parallax is getting “stuck.”
ReplyDeleteHi there,
ReplyDeleteOf course when bugs are found, I will issue updates as soon as possible! But first of all, are you sure you have you set up the theme correctly? That might be the issue. Do you have an URL to your site? You can also send it via e-mail if you wish to keep it private!
Kind regards,
66Themes
Hello. I already buy this fantastic theme! It really has powerful functions and is so easy to modify.
ReplyDeleteI just want to ask – Is any possible to add caption in each slide? I change home slider to ‘cbp-bislideshow’ since I want the fade out transition instead of slice.
I also test the flexslider (in about section tab3) on my iPhone 5…It can’t change slides when I touch the control buttons.
Thank you!
Hi there,
ReplyDeletethank you for your purchase, glad you like it!
1. No, the sliders don’t support captions. You could always look into adding this functionality yourself if you know your way around HTML/CSS. Shouldn’t be too much work!
2. The buttons are quite small, are you sure you’re not missing them? Also, you can swipe the slider to change between slides, which works a lot better!
Let me know if you have any more questions!
Kind regards,
66Themes
Thank you for reply. I will find another way to solve.
ReplyDeleteAbsolutely LOVE this template! Is it possible to have a menu horizontal on the top and in the open state?
ReplyDeleteHi there,
ReplyDeleteThank you, glad you like it!
Only the right slide-in menu is available, but you can always look for someone to do customization work for you. Check out Microlancer for example.
Kind regards,
66Themes
Hi guys, great work!
ReplyDeleteCouple of quick questions?
1. Google maps? I created the API key but where do I add this and how do I create the map?
2. Is it possible to have the portfolio load the image rather than content?
3. The top bar, I have reduced to create a square in the top left corner but this seems to stop it sliding open and covers the “X” close function, any ideas on a fix?
Thanks and once again awesome work!
Hello there, are you considering updating to bootstrap v3?
ReplyDeleteHi,
ReplyDeleteNo, not at the moment. Maybe in the future if enough interest is shown!
Thanks!
Kind regards,
66Themes
sorry – meant to post on the WP theme…
ReplyDeleteNo problem, I’ve answered you’re questions for the theme!
ReplyDeleteHello, Absolutely in love with your theme – thank you for the great work! Quick question though – I’m trying to create a modal for the portfolio items but it doesn’t seem to respond. are you able to provide me with the relevant code to get it to work.
ReplyDeleteI basically want to use the same layout as portfolio.html but in the form of a modal.
Hi there,
ReplyDeletethanks, glad you like it! How exactly are you trying to create the modal? Are you trying to use the existing modal used for portfolio pages or something new?
Thanks!
Kind regards,
66Themes
Im trying to add the portfolio page inside the .index.html as a modal. im then trying to give each portfolio item a different ID so that each id is linked to a different modal. It doesnt seem to work at all. I’ve also tried using bootstrap code but it doesnt recognise it. As a last resort Ive had to fall back on FancyBox which seems to be doing the job now - If you have any suggestions to get the modal code working would be greatly appreciated
ReplyDeleteSorry but I’m still not sure what you are trying to achieve here. As you can see in the files included in the download, the portfolio pages exists as separate HTML files which are loaded into the modal by clicking an item in the portfolio grid. Is there a reason you’re trying to do this differently?
ReplyDeleteCorrect me if I’m wrong, but what I think you’re trying to do is have all the portfolio pages already loaded into the index.html file, but I strongly advise against doing this as it will have very negative effects on the loading time of your page. As I explained above, the pages are loaded upon request and the data is inserted into the empty modal which already exists in the index.html file.
Kind regards, 66Themes
Thank you for your reply. Let me play around with it a little more
ReplyDeleteAlright, let me know how it works out.
ReplyDeleteBootstrap 3 please
ReplyDeleteHi there,
ReplyDeleteAh more interest for Bootstrap 3!
Thanks for the suggestion, I’ll look into it when I have some time.
Kind regards,
66Themes
First of all congratulations, you have the best parallax template in all Envato. Trust me, I checked. Your work is amazing.
ReplyDeleteJust two questions before I commit to buy:
1) How hard is to substitute the slider for a video background (youtube/vimeo).
2) Also I want to add a small drag/delay for the background images. For a more realistic parallax effect. Like in this other temp:
http://www.avathemes.com/HTML5/FlatrComingSoon/video/index.html
Thanks.
Hi there,
ReplyDeletehaha awesome, thank you! Always nice to hear my work is appreciated.
Depends. It’s not that hard, but it will require some knowledge of HTML/CSS/JS. It’s basically just the implementation of the following jQuery plugin: BigVideo.js
Again, it depends on your experience with basic web development. It’s just the implementation of the following jQuery plugin: jquery.parallax.js
Let me know if you have any more questions!
Kind regards,
66Themes
I want the second option of gtpixel to. A little delay to achieve better parallax. Maybe can be a future update? Keep it up guys!
ReplyDeleteHi there,
ReplyDeletehaha I hear you! I’ll keep it in mind for a future update, but no promises. Like I said to gtpixel, it’s just the implementation of a plugin and shouldn’t be too much work to add it to your template. Might be fun to try and tackle it yourself!
Cheers!
I’ll try it! I do not promise anything too! haha
ReplyDeleteOne thing, and this you MUST do it I see that if the internet connection is not quite good, the slider takes a while to appear, even if you only have 1 picture. This is not really a problem, the problem is that some functions doesn’t appear too. So people enter, don’t see the nice picture, scroll down and don’t see the nice text animations, go to gallery and they don’t see all the items, just 1. So, what about adding a big slider just when you enter, and when everything loads, the page appear. I mean, think about a white background (all the screen) and a bar from left to right that covers all the screen from other color step by step, with a % counter on the middle, when the screen is completely green or blue, or the color you have defined, it disappears, and now people can see the website in his perfect conditions and everything uploaded. I wait your news ASAP, this is annoying me a lot, and I know that this is a piece of cake for you!
Cheers!
Hello?
ReplyDeleteHello , good works but blog page and portfolio page ( if click image or link you redirect on article-example.html or portfolio-example.html in Safari not works ( clean page see without info) MAC OS but on Mozilla works, how to fix it ?. Thanks
ReplyDeleteHi there,
ReplyDeleteAre you running the site on a (local) server? If not, make sure you setup a server. AJAX pages cannot be loaded when running the files straight from the file system.
Kind regards,
66Themes
I love this template and bought it a couple months ago. Just can’t really use it because I need something where the home screen caption changes like on many other sites here, and it would be great to have the separating sections be parallax (even if not moving). Any updates upcoming. Don’t mean to sound rude or anything. I’d really love to use this though. Thanks
ReplyDeleteAny clue why the vimeo video on the second divider doesn’t work on Firefox?
ReplyDeleteThanks.
Hi there,
ReplyDeletenot sure, seems to be working fine for me. Is it not auto-playing or not playing at all? Have you tried updating your browser or disabling some plugins?
Kind regards,
66Themes