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:
data-fix-position="n" on the header element to set the fix position.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.
Button: 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.
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>
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).
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 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.
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.
Lightboxes (modal box) can be opened on a link for a specific item: an image, piece of html or any URL. Click the below button for further information and an example. Image lightboxes are used in the gallery.
Tooltips are used by adding the class tooltip to any element. The following settings are possible:
data-tooltip-direction: where will the tooltip on hover be displayed. Values: top, right, bottom, left. Default is top.data-tooltip-width: width of the tooltip box in pixels. Default is 500data-tooltip-content: the content to be displayedContent 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:
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>
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.
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.
Four Gamma
Aenean rhoncus nunc urna, sed pharetra sem varius eget. Ut vulputate lectus quis eros finibus, ac facilisis ligula lacinia.
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.
Three C
Aenean rhoncus nunc urna, sed pharetra sem varius eget. Ut vulputate lectus quis eros finibus, ac facilisis ligula lacinia.
A gallery always fits to the width of the available space. The default setup is:
<div class="gallery">
<img alt='...' src='...'>
<img alt='...' src='...'>
...
</div>Add the class gallery to setup the structure, extend with the class square, grid or row to get different layouts. Extend with the class popup or lightbox to get different behaviour in opening the links. The base size can be adjusted by using data-img-size="n", where n is a positive pixel value, the default is 200.
data-popup-info on the image tag is used to add information to the lightbox.Absolute parallax box - 0.2 speed setting
Absolute parallax box - 0.4 speed setting
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>
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.
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.
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.
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
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