kaspar-allenbach

// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.18.0)
// ----

$gridBaseNumber: 12; 

kaspar-allenbach

//check for ie methods
var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

//start if ie
if (isIE11 == true) {
  //add tags to body to write scoped css
  document.body.className += " " + "internetExplorer ie11"
  //add div element to warn users that they are using an outdated browser
  window.document.body.insertAdjacentHTML( 'afterbegin', '<div class="oldIE">You are using an outdated Browser…</div>' );
}

kaspar-allenbach

Craft 3 Learning Curve

I try to create a comprehensive tag list of Old vs new craft tags. SO lets start Craft 3 Changes

• All loops have to be called with .all()
• Macros have to be imported in EVERY file they apear. Not just in the parent file 🤬
• _self macros have to be imported into the parent macro with {% import _self as macro %} SE Querstion

Accessing the settings in general.php

kaspar-allenbach

Craft CMS Language Switcher

How to?

{% set otherLocales = craft.i18n.getSiteLocaleIds() %}
<li class="languageSwitch">
  {% for locale in otherLocales %}
 {% set localeEntry = craft.entries.id(entry.id).locale(locale).first %}

kaspar-allenbach

In Craft CMS 3 there are some minor adjustements to make when setting up a localized website. The Old Guide to setup a localized Site is still valid with some differences.

File Setup

You have to create a language folder in the public directory with a .htaccess and a index.php

Let's say you want english as a second language with the url extension yourdomain.com/en.

1. create a folder en.

kaspar-allenbach

Nobody Likes FOUT

• Use: Webfontloader https://github.com/typekit/webfontloader
• Figthing the FOUT: https://www.paulirish.com/2009/fighting-the-font-face-fout/

It's best to inline all this stuff in the header. Then it will be loaded at first.

kaspar-allenbach

{# Set parameters for prev/next elements list #}
{% set params = craft.entries.section('blogEntry').order('title asc') %}

{# Get the prev/next elements #}
{% set prevEntry = entry.getPrev(params) %}
{% set nextEntry = entry.getNext(params) %}

{# And make sure to only output the links if the element exists #}
<div class="blogPagination">
  {% if prevEntry %}

kaspar-allenbach

.parentElement {
  display: grid; // yeah okay
  grid-template-columns: repeat(12, 1fr); // make 12 columns with 1 fraction each
  //alt: grid-template-columns: 3fr 1fr 1fr 1fr 3fr; // make a column 3fr wide at the beginning and end (px % vw allowed)
  grid-auto-rows: minmax(5vh, auto); // make each row min 5vh in height otherwise apply autogrow
  grid-gap: 20px; // add grid
}
.childItem {
  grid-column: 2/6; // .childItem runs from axis 2 to axis 6
  @include smDown {

kaspar-allenbach

@mixin fade($fadeValue: color) {
  transition: $fadeValue 0.3s linear;
   -webkit-transition: $fadeValue 0.3s linear;
   -moz-transition: $fadeValue 0.3s linear;
}

$hamburgerLineSize: 5px;
$hamburgBtnSize: 20px;

.mmenuToggle {

kaspar-allenbach

// Addaption of https://davidwalsh.name/write-media-queries-sass

$xl-width: '1200px';
$lg-width: '992px';
$md-width: '786px';
$sm-width: '576px';

@mixin xlUp {
  @media (min-width: #{$xl-width}) { @content; }
}