simple tooltip, multiline, pure css

.popover__title { cursor: pointer; } .popover__wrapper { position: relative; display: inline-block; } .popover__content { opacity: 0; visibility: hidden; position: absolute; left: -100px; top: 105px; right: -100px; transform: translate(0,10px); background-color: white; padding: 15px; border: 1px solid #e8e7e7; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0,0,0,0.16); width: auto; } .popover__content:before { position: absolute; Read more…

twig 5 star rating partial

Simple snippet/partial for a twig star rating with fontawesome <div> {% if bewertung %} {% for i in range(1,5) %} {% if bewertung >= max(0, i-0.25) %} <span class=”fa fa-star”></span> {% elseif (bewertung > (i-0.75)) %} <span class=”fa fa-star-half-o”></span> {% else %} <span class=”fa fa-star-o”></span> {% endif %} {% endfor Read more…

october cms themes

Resources: https://octobercms.com/docs/themes/development#theme-information https://octobercms.com/docs/cms/themes Basic Layout: Here is a sample structure of a october theme. the layout file combines the header and the footer into a working layout, which can be used for pages. layout_header.htm <!doctype html> <html class=”no-js” lang=”de”> <head> <meta charset=”utf-8″> <meta http-equiv=”x-ua-compatible” content=”ie=edge”> <title>{{ this.page.title }}</title> <meta name=”title” Read more…

Twitter Bootstrap – basic template + CDN

<!DOCTYPE html> <html lang=”de”> <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –> <title>Bootstrap 101 Template</title> <!– Bootstrap –> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”> <!– HTML5 shim and Respond.js Read more…

Semantic websites – some links

The section elements: http://www.w3.org/TR/html5/sections.html Content model: http://www.w3.org/TR/html5/dom.html#content-models The importance of section elements: http://www.smashingmagazine.com/2013/01/18/the-importance-of-sections/ A HTML outliner, to check the semantic: https://hoyois.github.io/html5outliner/

Making a websites’s mega menu accessible for tablets and below

The goal is to allow click events on the first level for desktop browsers, and to trigger a hover event for mobile browsers. How to detect a mobile browser? I chose this approach: http://stackoverflow.com/a/14301832/4074710 The mega menu: <nav> <ul> <li> <a href=”#”>Item</a> <ul> <li><a href=”#”>Subitem</a></li> <li><a href=”#”>Subitem</a></li> </ul> </li> <li> <a href=””>Item</a> <ul> <li><a Read more…

more semantic html with less and bootstrap

Classic Bootstrap: <div class=”container”> <div class=”row”> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> </div> </div> More semantic version: // import all bootstrap less files first @import “less/bootstrap”; // build Read more…

html viewport

Viewport Einstellungen für iOS und Android: <meta name=”viewport” content=” height = [pixel_value | “device-height”] , width = [pixel_value | “device-width”] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [“yes” | “no”] ” /> target-densityDpi <meta name=”viewport” content=”width=device-width, target-densityDpi=device-dpi”> Here is a list of Read more…