Styling guidelines
Theme
The site is styled with a new theme, called Vacation.
Templates
The site is based on two page templates – Base and Travelling Agency.
- Base template is based on the Base.master file.
The template consists of two placeholders that fill the entire screen (100% width) and are coming from the master file. The names of these placeholders are Header and Main. Header holds one 100% wide placeholder, which holds another placeholder, assigned with the .row-holder class. This is where you place the Navigation widget.
- Travelling Agency is based on the Base template.
This template is used by all pages.
The template inherits the Header and the Main placeholders.
The Header placeholder contains a Navigation widget and three JavaScript files - jQuery reference, navigation toggling script, and a script that handles routing.
Layout elements
Templates contain layout element 100% with another layout element inside it that is assigned the .row-holder class. This class is used to arrange the content in the center of the screen:
The rows on the website are grey and white. By default, they are white – they have background #fff. That is why, in the code above, you apply grey color by setting the .row-gray class to layout element 100%.
Widgets
Content on the site is displayed by following widgets:
- Content block for image header, H2 titles, Footer, the buttons for All countries, All restaurants, and All hotels, social icons, content type basic information.
- Dynamic content widgets for Countries, Hotels, Cities, Festivals, and Restaurants.
Responsive design
The responsive design rules are in the CSS file.
Detail pages
For each content type, there is a List page and a Details page where you drop the corresponding dynamic module widgets.