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.