Maevanin
A Web Template

Just a page to keep track of all the stuff that's in this template. Read a bit more about this page.

The menu is set to the right and full height on Mobile. The header is set to overlay. Possible settings:

  • header - default, will scroll with the page
  • header fixed - Header will get fixed on scroll, default is after 0 pixels.
    Use data-fix-position="n" on the header element to set the fix position.
  • header overlay - header is transparent and will get fixed on scroll
  • mainMenu - on mobile, menu is positioned right with a dropdown box

This is a full height row, class fullHeight added to the content box. The box also uses the class verticalCenter to vertically center the content in the column. Added to the page header is the class pageLength to add a page scroll indicator.

Basics

Below are all the settings needed to set up a basic grid (rows / columns) and all the basic elements that are styled.

H1 - 32px / 60px H2 - 24px / 48px H3 - 20px / 36px H4 - 18px / 28px

All headers are in the font 'Outfit' with a variable scaling font size and color black. Regular text scales between 16 and 18 pixels and has the color code #666 and use the font 'Roboto'. All text and other sizing is based on a base font size of 10 pixels.

Links are #AC6600, with hover color: #FFAB00. Add the class small to a text element for 12px / 14px sizing. Use the class hyphenate on a textblock containing a long word to set hyphens where needed.

Buttons

the button element or any element with class button. Buttongroups are created by nesting a set of buttons within an element using class buttonGroup.

Button primary Button txtLink
Visual for the Basics section - Brooklyn Bridge New York

Template colours

All colors are available for background (bgColorname) and text (fgColorname) via a set of classes, shown below. The colour of the scroll indicator can be changed by using data-scrollsection-value="hex-code"

bgPrimaryDark
#203A59
bgPrimaryMid
#B5C2D1
bgPrimaryLight
#EDF1F6
bgSecondaryDark
#AC6600
bgSecondaryMid
#FFAB00
bgSecondaryLight
#FFE0A1
bgTertiaryDark
#A6966A
bgTertiaryMid
#D5C8A5
bgTertiaryLight
#F6F2E7
bgGreyDark
#CCCCCC
bgGreyMid
#E8E8E8
bgGreyLight
#F8F8F8

Grid setup

The template has the option to use responsive rows and blocks to layout the content as described below. Within the whole template all values are, just as the font sizing, based on a default value of 10 pixels (1rem = 10 pixels).

Visual for the Block structure section - Arches national park

Block structure

Every row consists of a container, divided into columns and within the columns content blocks. The basic structure is:

<div class="container row12">
  <div class="block colx">
    <div class="box"></div>
  </div>
</div>

Container

The container is by default the full width of the screen. Add the class fixedWidth to create a centered row on a fixed width (definable in the CSS), combine this with the class article to create a specific (blog) article width. Use the class row12 or row10 to define the ammount of columns in the grid (12 and 10 respectively).

Columns

The columns are defined by the block class. Add colx with x any number between 12 (or 10 depending on the grid) to define the width of the column. By default the columns go to 100% on tablet and mobile. Add colMedx and/or colSmallx to create the correct responsive structure.

Content

Content can be directly placed in the column but for margin and paddings to work correctly the box class is needed. By default each box has 0 margin, 0 padding and a no border. In stead of a div also an anchor can be used to get a clickable box structure.

Box modifiers

All boxes (and basically all block elements on the page) can be adjusted by using certain classes to modify the look and feel. Click this block to get a full overview of options.

Read more
Visual for the Block structure section - Manhattan

Structured content

There are a number of options to present content in a structured way. Slideshows, accordeons, etc. In a lot of cases the unerlying html structure stays the same with only the presentation of the content changing. Below are all the options available.

This slideshow... is set to extendLeft10 and ratio100

Slideshow

Slideshow with (optional) menu and navigation arrows. The height of the slideshow is determined by the content, or can be set by adding any of the classes The classes ratio1-1, ratio2-1, ratio3-1, ratio3-2, ratio1-2, and ratio100 for the aspect ratio. The ratio100 option can be used to always display the slideshow at full height. Basic structure:

<div class="slideshow">
  <div class="slideContainer">
    <div class="item">...</div>
  </div>
</div>

Class slideShow creates the slideshow, extend with addssMenu for the menu and addssNav for the navigation.

Use data-slideshow-timer="n" to set the timing of the slideshow. Default is 10000, value is in ms. Set the value to -1 to stop the slideshow from looping. Below are the various forms of the slideshow. The cards layout is used above in the grid structure explanation.

Default Pages Cards

Inhoud

In page menu

The menu on the left is created by adding the class inPageMenu to an unordered list. This unordered list can optionally be made sticky by placing it in a box with the class sticky. Stikcy can be used on any box element. To trigger the active state of an in page menu item, the corresponding content needs to have the class ipmTrigger.

<div class="box sticky inPageMenu">
  <ul>
    <li><a href="#anchorName">lorem ipsum</a></li>
    <li>...</li>
  </ul>
</div> <div id="anchorName" class="ipmTrigger">...</div>

Accordion/tabs/pills

Content structures are itemized pieces of content with an interchangeable layout, by use of different class per layout. Class csContainer creates the structure, extend with slider, tab, or pill for the different versions:

Slider Tabs Pills

Code setup

<div class="csContainer slider">
  <div class="item active">
    <p class="title">...</p>
    <div class="content">
      <div class="contentContainer">...</div>
    </div>
  </div>
</div>

Lorem

Ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet est in euismod luctus. Sed vel ornare metus, ac consequat lectus. Praesent velit enim, mattis quis sem quis, placerat porttitor est.

Ipsum

Ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet est in euismod luctus. Sed vel ornare metus, ac consequat lectus. Praesent velit enim, mattis quis sem quis, placerat porttitor est.

Quisque pharetra lacinia rutrum. Curabitur vel purus blandit, dictum lorem eget, rhoncus lacus. Cras feugiat condimentum dolor eget molestie. Ut at erat ligula. Donec pretium risus eu gravida aliquam.

Sed efficitur fringilla lacus et blandit. Suspendisse quis condimentum ex. Nullam pharetra ultrices nunc in aliquet. In rhoncus ac metus nec bibendum. Vivamus id lacus a sapien commodo tempor sit amet eget augue.

Filter list

Reset

Basic setup

One A

Create a list of elements that can be filtered with dropdowns. Class filterContainer adds the logic to filter the content. There can be only one filtercontainer on the page. Select boxes need the class filter and have to be placed in a form with class selector.

Activate filtering

One B

Option values have to correspond with the values that you put into data-tags="values". Values are separated with a space. It's possible to link to a page with active filter options by adding ?filter=filtername to the URL.

Visible tags

Two B

Show the tags in the box (manually) by adding an element with the class filterTags, place every tag in a strong tag.

<p class="filterTags">
  <strong>...</strong>
</p>

Tag options

Three C

The ammount of tags displayed can be reduced by setting the maxTags variable to a value higher than 0. By default it is set to 2. Change the variable by using data-max-tags=n. Any n smaller than 1 will display all tags.

Visual effects

Within the template there are several visual effects (animations) available. Some effects are defined within the CSS and triggered when an element gets in view, or is interacted with (hover / click) It is also possible to trigger a custom animation on an element when it gets in view.

Visual for the animation section - Animation types

Animation

There are 2 types of animation possible: sliding (fading) in the content blocks or trigger a custom (SVG) animation. Or a combination of the two as in this row.

Visual for the animation section - Basic setup animations

Basic setup animations

In both cases, add loadBlocks to the container element and the class animate to any element within this container to animate. As default this will trigger a fade in effect on the animated element. To trigger a custom animation the extra class animation needs to be added to the container.

Visual for the animation section - Available classes

Available classes

  • slideInTop - add this class to the container to slide in the content from the top.
  • slideInRight - add this class to the container to slide in the content from the right.
  • slideInBottom - add this class to the container to slide in the content from the bottom.
  • slideInLeft - add this class to the container to slide in the content from the left.
Visual for the animation section - Multiple animations

Multiple animations

Setting the animation effect on a container with multiple elements to animate will add a small delay to every element before it will trigger.

Visual for the animation section - Timing settings

Timing settings

It's possible to update the timings from the default values by using: data-animation-delay="xx" and data-animation-interval="xx". Both values are in milliseconds. Delay indicates how long before the animation triggers, interval the time between animation start of the various elements.

slideInLeft

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur odio turpis, non volutpat arcu molestie vitae.

slideInTop

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur odio turpis, non volutpat arcu molestie vitae.

slideInBottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur odio turpis, non volutpat arcu molestie vitae.

slideInRight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur odio turpis, non volutpat arcu molestie vitae.

Lorem ipsum Dolor sit amet €26.098,23 Facilisis eu enim 67% Sagittis Accumsan

Parallax

Visual Effects section - Circle bounce animation on a photo fo a flowery meadow

Reset

Photo wipe effect

Photo effects

Switch between 2 photos on hover with a wipe from right to left.

<div class="photoWipe">
  <div class="show"><img src="..."></div>
  <div class="hidden"><img src="..."></div>
</div>

L to R R to L Circle