Maevanin
A Web Template

Read a bit more about this page. Check out some css and javascript tricks and designs that are not directly part of the template on the design 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
  • mainMenu fullRight - on mobile, menu is positioned right with box over the full height
  • mainMenu fullLeft - on mobile, menu is positioned left with a box over the full height, logo will be positioned right

This is a full height row, class fullHeight added to the content box. The box also uses the class light to toggle text and links to the light on dark variant. Added to the page header is the class pageLength to add a page scroll indicator.

Basics

H1 - 4.8em

H2 - 3.2em

H3 - 2.7em

H4 - 2.1em

  • Headers use Roboto Slab with a line height of 1.5em. Regular text is roboto at 1.6em. All text is based on a base font size of 10 pixels. Making the regular text 16 pixels. Default text color is #203A59.
     
  • Links are #AC6600 Hover color: #FFAB00
     
  • Use the class hyphenate on a textblock containing a long word to set hyphens where needed.
     
  • Add the class small to a text element for 1.2em text

Button: the button element or any element with class button. Buttongroups are created by nesting a set of buttons within an element using class buttonGroup. Add class small, or large for sizing of the buttongroup.

Button primary

Button secondary

Group regular default


Group large primary



Group small secondary

  • Check button coding
  • Fully implement toggle switches
  • Form?
  • Make the page beautiful
  • Dive deeper into flexbox
  • Expand toggleItem functionality

Primary colours

All colors are available for background (bgColornameXX) and text (fgColornameXX) via a set of classes:


bgYellowLight
#FFE0A1
bgYellowMed
#FFAB00
bgYellowDark
#AC6600
bgBeigeLight
#F6F2E7
bgBeigeMed
#D5C8A5
bgBeigeDark
#A6966A
bgBlueLight
#EDF1F6
bgBlueMed
#B5C2D1
bgBlueDark
#203A59

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 a 1em (10px) margin, 1em (10px) padding and a 1px transparent border. In stead of a div also an anchor can be used to get a clickable box structure.

Box modifiers

  • border - add to get a border around your content
  • rounded - add in combination with border to get rounded corners with a radius of 10px. Use rounded2 for a 20 pixel radius.
  • marginx - x is 0, 1, 2 or 3, add to adjust the margin of the box to 0, 10, 20 or 30 px all around.
  • marginxv - x is 0, 1, 2 or 3, add to adjust the top and bottom margin of the box to 0, 10, 20 or 30 px.
  • marginxh - x is 0, 1, 2 or 3, add to adjust the left and right margin of the box to 0, 10, 20 or 30 px) all around.
  • paddingx - x is 0, 1, 2 or 3, add to adjust the padding of the box to 0, 10, 20 or 30 px all around.
  • paddingxv - x is 0, 1, 2 or 3, add to adjust the top and bottom padding of the box to 0, 10, 20 or 30 px.
  • paddingxh - x is 0, 1, 2 or 3, add to adjust the left and right padding of the box to 0, 10, 20 or 30 px.

Content groups

Slide title

Slideshow

Slideshow with menu and navigation arrows. The height of the slideshow is determined by the first item. Basic structure:

<div class="slideshow">
<div class="item">...</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.

Pages Default

Content structures

Content structures are itemized pieces of content with an interchangeable layout, by use of different class per layout.

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

Class csContainer creates the structure, extend with slider, tab, or pill for the different versions.

Toggle the example structure:

Slider Tabs Pills

Content structure

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non venenatis orci. Integer consectetur varius lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus.

In vitae fringilla tellus. Morbi ipsum magna, tincidunt ut pretium at, congue scelerisque turpis. Curabitur ullamcorper nunc a mollis pellentesque.

Nulla suscipit, urna sed vehicula finibus, magna leo lobortis nisl, in venenatis dui augue et nisl. Suspendisse eu aliquet ex, a pharetra tellus. Ut vehicula mi urna, in pretium tortor ullamcorper id. Quisque a lectus eget quam mattis volutpat vel sed elit. Phasellus dictum porttitor mauris, maximus accumsan massa finibus vitae.

Vestibulum

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.

Ante

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

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. 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.

Show the tags in the box (manually) by adding an element with the class filterTags, place every tag in a strong tag. 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.


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

Title

One A Alpha

Fusce arcu dolor, efficitur sed dictum ac, facilisis eu enim. Cras eleifend malesuada mauris et hendrerit. Ut vulputate lectus quis eros finibus, ac facilisis ligula lacinia. Cras vitae orci ut ipsum sagittis accumsan et vel mauris.

Title

One Beta

Aenean rhoncus nunc urna, sed pharetra sem varius eget. Ut vulputate lectus quis eros finibus, ac facilisis ligula lacinia.

Curabitur elementum sed sem non mattis. Donec et ultrices velit. Mauris bibendum tortor a nisl commodo, eget imperdiet magna mollis. Mauris feugiat quam sem, vel placerat diam sagittis at. Aenean scelerisque nunc vel iaculis posuere. Cras ipsum enim, congue et lectus nec, pharetra laoreet mauris.

+

Title

Three B Beta

Fusce arcu dolor, efficitur sed dictum ac, facilisis eu enim. Cras eleifend malesuada mauris et hendrerit. Ut vulputate lectus quis eros finibus, ac facilisis ligula lacinia. Cras vitae orci ut ipsum sagittis accumsan et vel mauris.

Title

Four Gamma

Aenean rhoncus nunc urna, sed pharetra sem varius eget. Ut vulputate lectus quis eros finibus, ac facilisis ligula lacinia.

Title

Two B Beta

Fusce arcu dolor, efficitur sed dictum ac, facilisis eu enim. Cras eleifend malesuada mauris et hendrerit. Ut vulputate lectus quis eros finibus, ac facilisis ligula lacinia. Cras vitae orci ut ipsum sagittis accumsan et vel mauris.

Title

Three C

Aenean rhoncus nunc urna, sed pharetra sem varius eget. Ut vulputate lectus quis eros finibus, ac facilisis ligula lacinia.

In page menu

Absolute parallax box - 0.2 speed setting

Absolute parallax box - 0.4 speed setting

Parallax settings and in page menu

Parallax is set on the container of a row by adding the class parallax. Additionally the background images needs to be set on this containter either directly in the html or via the css. The default scoll speed of the parallax is set to 0.2. This can be adjusted by adding the data object data-parallax-speed, where the value can be any number between 0.0 and 1: zero is a fixed background, 1 is a scrolling background.

The menu on theleft is created by adding the class inPageMenu to an unordered list. This unordered list can ptionally 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">
<ul>
<li><a href="#anchorName">lorem ipsum</a></li>
<li>...</li>
</ul>
</div>
<div id="anchorName" class="ipmTrigger">...</div>

Integer eu feugiat odio.

Morbi at ligula fringilla, feugiat felis sit amet, cursus erat. Quisque sit amet tristique nisi, et ultrices enim. Fusce elit urna, varius in dignissim eget, ornare vitae felis. In maximus, tellus eu tincidunt lacinia, neque risus consequat magna, venenatis dapibus turpis justo nec nibh. Sed vel interdum nisl. Nullam quam enim, pretium id arcu in, fringilla luctus nisi. Aenean faucibus tempor massa ac placerat. Nam tincidunt metus ac nulla suscipit posuere. Nunc at ligula vitae tortor vestibulum hendrerit vitae eu libero. Maecenas vel odio efficitur, porta dolor vel, hendrerit eros. Donec in magna pellentesque, finibus erat eu, ullamcorper felis. Suspendisse tempus velit tortor, vitae suscipit velit fermentum id. Curabitur auctor erat auctor laoreet suscipit.

Mauris in nisl ac est lobortis ultrices.

Fusce vestibulum, nibh pretium sodales pulvinar, elit mauris scelerisque dolor, vel molestie ante turpis vitae quam. Aenean volutpat eget lorem nec commodo. Sed et cursus justo, sit amet mattis nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed condimentum nec nulla non consectetur. Integer ac elit molestie libero faucibus mattis. Sed viverra suscipit pulvinar. Ut condimentum metus vel odio efficitur, lacinia gravida lectus porta. Aenean vitae eros convallis, convallis orci sit amet, ultrices quam.

Animations

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.

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.

  • 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.
Lorem ipsum Dolor sit amet €26.098,23 Facilisis eu enim 67% Sagittis Accumsan

slideInLeft

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur odio turpis, non volutpat arcu molestie vitae. Sed condimentum turpis in felis interdum posuere. Integer fringilla quis erat in volutpat. Curabitur id tellus quis purus sagittis lobortis. Maecenas eu auctor ex, venenatis dictum felis.

slideInTop

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur odio turpis, non volutpat arcu molestie vitae. Sed condimentum turpis in felis interdum posuere. Integer fringilla quis erat in volutpat. Curabitur id tellus quis purus sagittis lobortis. Maecenas eu auctor ex, venenatis dictum felis.

slideInBottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur odio turpis, non volutpat arcu molestie vitae. Sed condimentum turpis in felis interdum posuere. Integer fringilla quis erat in volutpat. Curabitur id tellus quis purus sagittis lobortis. Maecenas eu auctor ex, venenatis dictum felis.

slideInRight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur odio turpis, non volutpat arcu molestie vitae. Sed condimentum turpis in felis interdum posuere. Integer fringilla quis erat in volutpat. Curabitur id tellus quis purus sagittis lobortis. Maecenas eu auctor ex, venenatis dictum felis.

SlideInRight

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

Ut vulputate lectus quis eros finibus, ac facilisis ligula lacinia. Cras vitae orci ut ipsum sagittis accumsan et vel mauris.

Fusce arcu dolor, efficitur sed dictum ac, facilisis eu enim. Cras eleifend malesuada mauris et hendrerit. Ut vulputate lectus quis eros finibus, ac facilisis ligula lacinia. Ipsum sagittis accumsan et vel mauris.

Blog article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan ullamcorper lectus, quis dapibus velit tempus vel. Morbi sagittis aliquam pharetra. Donec ipsum magna, efficitur eu enim at, sollicitudin condimentum lorem. In non eros felis. Vestibulum sed elit sit amet risus lacinia rutrum ac maximus arcu. Sed vitae eros vulputate, ornare elit id, posuere risus. Ut ornare quis risus nec finibus. Nam consequat blandit odio, nec molestie ex accumsan id.

Aenean nec mi eu sapien semper porttitor sed nec lectus. Nunc semper leo ultrices mauris pharetra consectetur. Etiam imperdiet egestas porta. Integer sit amet tempor odio, vitae rutrum nulla. Quisque cursus risus vel tellus commodo, vitae pellentesque turpis convallis. Donec consequat quam ac fermentum commodo. Fusce fringilla augue vitae nisi condimentum, nec faucibus elit pharetra. Suspendisse vehicula magna quam, placerat aliquet nunc ullamcorper volutpat. Curabitur bibendum mauris urna, consectetur accumsan orci dignissim in. Etiam quam mi, facilisis quis porttitor nec, interdum convallis felis. Curabitur auctor, tellus sagittis volutpat dictum, lacus massa fermentum est, quis venenatis justo turpis et justo.

Curabitur at interdum metus. Nulla sit amet mauris sed magna sodales dictum. Donec dictum urna sed libero rhoncus, nec sodales nibh pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eget lacus luctus, bibendum velit sit amet, tristique diam. Nulla facilisi. Nulla eget aliquet nibh. Nunc ac orci id ipsum rhoncus luctus ultricies nec turpis. Fusce quis volutpat orci. Etiam at augue est. Suspendisse ac posuere purus. Mauris dictum, quam ac blandit consectetur, tortor augue placerat elit, efficitur aliquam tortor magna quis nibh. Mauris sodales elit vel sapien posuere interdum. Curabitur risus magna, gravida ut condimentum facilisis, mollis eget nunc. Aliquam sollicitudin venenatis ex, eget scelerisque est tristique aliquet. Phasellus quis ipsum mauris.

Nulla quis ultrices enim. Nullam laoreet congue leo, et congue nunc vehicula sed. Maecenas ut sapien tempor, commodo magna sit amet, consectetur massa. Vestibulum cursus leo dictum eros tempor pharetra at euismod nunc. Curabitur consequat, nisl ut tempor feugiat, neque velit elementum nisl, ut ornare lorem lacus sit amet odio. Morbi porttitor, neque vitae luctus euismod, sem leo bibendum lacus, id pharetra purus nisi quis justo. Nulla facilisi. Suspendisse lorem neque, imperdiet sed posuere non, rhoncus id metus. Phasellus nisi velit, vulputate non lacus at, malesuada consequat est. Etiam id facilisis massa. Vestibulum bibendum sapien dolor, eu ultricies elit varius non.

Morbi non nisl nec ex varius elementum non a libero. Maecenas placerat tellus eu libero scelerisque, et tempor sapien commodo. Maecenas efficitur condimentum lectus, et vulputate metus euismod eget. Sed non sapien eu metus pretium pretium. Aliquam eleifend, dolor sit amet interdum elementum, neque neque efficitur nibh, et efficitur elit eros maximus nulla. Ut iaculis sapien at placerat malesuada. Proin ultricies, lacus auctor tincidunt sagittis, sapien neque malesuada tortor, quis efficitur neque elit sit amet nisl. Fusce vestibulum feugiat ex at vestibulum. Aliquam tristique molestie pulvinar. Etiam tincidunt aliquam lacus non posuere. Phasellus porttitor, dui at sodales placerat, dolor purus lobortis sem, non rhoncus enim ante sed velit. Nulla facilisi. Aliquam et nunc felis. Integer malesuada vel ex eget sodales. Mauris non nisi libero. Sed auctor vitae tortor in mattis.

About Maevanin

This template and all the scripting included in it is created by Gijs Rosengarten. I created this as a pet project to combine all scripts, layout tricks and learnings into one consistent setup. If nothing else to use it for my own future projects

The current version is V3.0, june 2021. This page used jQuery 3.5.1 but from version 3 this is fully vanilla JS. All images on this page are from Chromecast backgrounds

About Gijs

I do web design / development for a living and drawing for fun. Check out the main GWTP site for some other projects or check my portfolio site