TTWeb Templates 2. Starter Site With Bedrock

Improve this page

Overview

When creating a new site in TTWeb, the default repository set up will be a copy of https://github.com/TravelTripperWeb-Sites/blank-template

This site includes

  • Embedded TT Jekyll 3.8 plugins
  • Embedded bedrock template
  • Embedded ZOM tepmlate
  • A few sample data instances
  • A number of sample pages
  • Configuration for blog posts with category pages
  • Configuration for rooms pages
  • Configuration for offers pages (TBD)
  • A SASS setup including bootstrap varisables, mixins and functions
  • Some basic includes overrides

Setup & Submodules

First, get a copy of the new site you created

$ git clone <giturl-of-your-new-site>

Then make sure you have all submodules downloaded

$ git submodule update --init --recursive --force

Now What?

Build out the custom site designs (replacing, removing and adding to the files in _pages as needed) using HTML/SASS, editable regions, and components listed below. Feel free to override layouts and includes (including the below componets) in your own _layouts and _includes directories.

The Bedrock Template

See the readme for the latest

model definitions

Bedrock defines the following models. Some of the pre-defined structure of each model is assumed in the sample site’s config for page_gen and for various components that may render these data types:

  • Amenities
  • Attractions
  • Dining
  • Events
  • Offers
  • Post Categories
  • Post Tags
  • Posts
  • Reviews
  • Rooms

content settings

TBD describe each current set of content settings and how they’re used? Cover how these settings may get used in the default include files.

included styles

There is a precompiled stylesheet for bedrock at _ttio_templates/bedrock/assets/css/bedrock.min.css

It includes utility classes:

  • hidden, expired, load, transparent - all hide the content
  • visually-hidden, screen-reader-text, screen-reader-shortcut - for keeping SR-content readable but not visible
  • styles for social icons
  • styling for containers for videos to make them responsive responsive-video-container
  • styling for containers for images to control their fill type:
    • image-frame--cover
    • image-frame--fill
    • image-frame--contain

included JS functions

There is a precompiled JS file for bedrock at _ttio_templates/bedrock/assets/js/bedrock.min.js

  • polyfill for image-frame &–cover, &–file &–contain
  • setup lunr for blog post indexing

general components

Detailed usage for each component is described in the comment section of the file. Or at least it should be…

Components should each be wrapped with a div with class ttweb-component and ttweb-<component-name>. Class naming within each component should follow BEM.

NOTE: these definitely need a lot of work getting classes fixed up, adding control based on include parameters and adding detailed documentation

  • carousel - Build and render an owl carousel for a set of images.
  • gallery - For a given gallery object, build HTML for an image list with image-frame--cover wrapping elements and with fancybox data-attributes. Fancybox is loaded by the sample-site custom head include - not by bedrock
  • image - given an image object render an image tag with the approriately sized image as the main URL. Include other image size URLs as data-attributes for potential usage via JS performance enhancement tools.
  • offer - TBD
  • post - renders a basic structure for a single post item
  • post-list - renders a list of posts with excerpts-only
  • room - renders a basic structure for a room display including an image carousel. Relies on the reztrip/rooms.html include to be loaded to fill in the live rate
  • room-url - renders the reztrip booking URL for a given room model instance

  • video - renders a video from a given provider based on the ID provided

  • json/post-list - renders an array of JSON representations of each post in a given postList

reztrip components

These are things that are generally included once per page to initiate functions of the ttweb reztrip plugins library.

  • booking-widget - Includes the core booking widget CSS and turns any element with the attribute ‘show-booking-widget’ into a trigger to show the booking calendar
  • cross-out-rates - shows BRG data in any element marked with class ttweb-plugins--cross-out-rates
  • dynamic-offers - for a given warpper selector and jsrender templateID, render each available offer from reztrip according to that template into that selector
  • live-rate - displays lowest rate info in any element with class ttweb-plugins--lowest-rate
  • offers - looks for any HTML elements with [data-reztrip-offer-id], hides them all and then only shows ones that are enabled in reztrip (needs work!)
  • plugin-scripts-list - includes booking-widget, cross-out-rates, live-rate, offers and rooms
  • rooms - finds any room wrappers marked with data-reztrip-room-id and turns the .ttweb-room__rate wrapper/template into the live rate (or hides the element if not found)
  • ttweb-plugins - includes the plugins.traveltripper.io scripts for the version marked in hotel_settings and configures the plugins according to other values in hotel_settings. Also runs the api.ipify.org to get client IP for reztrip calls.

I18n

Localized content is set up for some languages for any UI components provided by the bedrock template.