ThemeKit Bistro

{!-boumIBG(TRUE)//ThemeKit Bistro Jumbotron

Jumbotron

The list item uses the display property set to "grid" to create two columns for the custom marker and the list item text.

  • The list item has a ::before pseudo selector for adding the custom marker using the CSS code version of any HTML character or symbol
  • The marker is inserted in column one and the text in column two
  • Using a grid allows the custom marker to be in the "outside" position just like a default list
  • When the list item text runs to two or more lines the marker can be positioned vertically at the top or center as required
  • If a sequential list is required the marker removed and replaced by a letter or number
MenuContact
ThemeKit Bistro Article

Bistro Article

Animation

The optional rotate on scroll animation uses a tiny jQuery script with a slider control to set the speed.
The lower the value - the faster it turns.

Menu
ThemeKit Bistro Article

Grid

Layout

The two column grid layout has an adjustable split background to create a more interesting layout.
The overlap is adjusted using a slider from 0 to 50%.

Blocks
ThemeKit Bistro Article

Image

Round

PNG images should be avoided so, if the animation is used, the JPEG image should be cropped square and the box in the widget settings checked to make it round.

Next Page

Bistro Navigation Menu

Image Navigation

This type of website usually has very few pages and an image navigation on the landinge is much more likely to encourage visitors to click through to the other pages.

View Navigation

ThemeKit Bistro Heading

The headings on this page are h3 section headings. They have the option to add sidelines. The width of the sidelines is adjusted using the heading's max width setting.

ThemeKit Bistro Header

The header is shown at the top of this page. It has a two column grid layout with an optional icon/link and a choice of an h1 through h3 heading.

Bistro Hero 4

Hero 4

The ThemeKit Bistro Hero 4 on the landing page has a text section with heading text, styled list and a link and three overlay images which can animate in.
On mobile phones only the first image is shown.

View Hero 4