Flagstone - Creative Multi-use HTML Template

Flagstone is an elegant, stylish HTML template, designed to give any startup business a strong web presence.

Flagstone is built upon a custom HTML and CSS base that employs BEM methodology, BEM stands for Block, Element, Modifier, and results in well structured semantically named, flat, code and components, resulting in fast loading well organised pages.

Flagstone employs a modular design philosophy, making it easy and fast to create eye catching visually stimulating layouts. All code is separated into distinct blocks making copy and paste of components easy and predictable.

FLAGSTONE MAIN FEATURES

• 6 Turn-key homepages
• Multiple sub pages
• Working ajax contact form
• 5 Portfolio index pages
• Portfolio item page
• 5 Blog index pages
• 3 Blog detail pages
• 18 Component blocks
• Full animation framework
• Template override system for easy customisation
• SCSS Config page for easily creating colour schemes & typographic rules
• Spacing classes, adjust spacing easily directly in your HTML
• Utility classes, make many customisations without touching CSS
• Boxed or full width layouts, you can also use both on the same page
• Timed modals
• Lightbox for single images & Galleries
• Ink fill hero unit
• 3 Types of hero unit
• Animated layer slider
• 1000s of icons to use
• Multi column mega menus
• Infinite navigation drop-downs
• All SCSS files included
• Plus lots more…

FLAGSTONE HOME-PAGES

Flagstone features 6 individual home-page concepts, each with their own sense of sophisticated style.

• Design studio
• Interior designer(s)
• Photographer/Photography studio
• Architect
• Coffee shop
• Artist
• More coming soon…

ADDITIONAL PAGES

Flagstone comes with 21 additional page types to use on your site.

Utility pages

• About us
• Alternate about us
• Services
• Alternate services
• Coming soon
• 404 error
• Contact us (Includes working ajax contact form)
• Full width
• Left sidebar
• Right sidebar

Portfolio pages

• 3 Columns
• 3 Columns – Full width
• 4 Columns
• 4 Columns – Full width
• Masonry
• Project detail page

Blog pages

• Blog index – Left sidebar
• Blog index – Right sidebar
• Blog index – Full width (no sidebar)
• Blog index – Masonry
• Blog index – Card style
• Blog page – Left sidebar
• Blog page – Right sidebar
• Blog page – Distraction free (no sidebar)

Components

Flagstone is built upon our own in-house CSS framework called Ensemble. Ensemble comes with 18 different components to use on your site.

• Accordion
• Alerts
• Animation engine
• Draws
• Forms
• Buttons
• Hero units (Full screen, 50/50 split, & offscreen hero unit)
• Icon boxes (2 styles)
• Maps
• Modals & Lightboxes
• Notices
• Image overlays (5 Different styles)
• Parallax sections
• Pricing columns
• Image slider
• Tabs
• Team profiles
• Testimonials

Documentation

Documentation is supplied via a thorough 49 section digital manual, covering all aspects of using Flagstone, with step by step walkthroughs, and full code samples.

Please note: Due to licensing restrictions images used on the demo site are not included in the download package, heavily blurred copies of the originals are used as placeholders until you place your own awesome imagery.

Changelog

Version 1.1 Released 1/12/2016

 NEW: Full width page NEW: Left sidebar page NEW: Right sidebar page NEW: Sidebar navigation NEW: Offscreen hero unit rewritten (No longer needs Javascript to operate) NEW: Fitvids responsive video plugin added UPDATE: Docs on changing header background colour UPDATE: Improved handling of Architect slider captions UPDATE: Docs on logo sizing UPDATE: Docs on changing copyright notice in footer UPDATE: Docs on modifying Ink splash effect colour BUG FIX: Footer Email links are now set up for Email addresses 

Files affected

 full-width.html left-sidebar.html right-sidebar.html architect.html coffee-shop.html style.css _nav.scss _hero-units.scss scripts.js main.js 

Version 1.0.2 Released 18/10/2016

 BUG FIX: Fixed bug that prevented Isotope from loading items correctly in Safari on page load. 

Files affected

 js/scripts.js js/min/scripts-min.js 

Version 1.0.1 Released 28/09/2016

 NEW: Working contact form. NEW: Contact form documentation section. NEW: Icon documentation section. NEW: BEM documentation section. BUG FIX: Fixed bug that prevented isotope filtering from working correctly. UPDATE: Updated map documentation. UPDATE: Updated editing documentation section.