Kitchensink

Kitchensink

This kitchen sink shows common elements used and usable on this website.

Headings

The heading "Headings" is an example of a third level heading (h3).

This is a fourth level heading (h4)

This is a fifth level heading (h5)

This is a sixth level heading (h6)

Paragraphs

This is a paragraph. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

Words and word groups can be marked as bold, italic, strikken through.

Table

Wrap the table in <div class="table-responsive"> to make it responsive.

Tags

Tags can be displayed using the following liquid syntax:

{% tag "Online" %}

Examples are:

Links

Links can be created and formatted as follows:

{% link "http://example.com" "Klik mij" %}
{% link "http://example.com" "Klik mij" "curly-braces" %}
{% link "http://example.com" "Klik mij" "greater-than" %}

Klik mij Klik mij Klik mij

Buttons

{% button "button" "Klik mij" %}

Klik mij

Embedding objects

There are various short-tags to embed objects using liquid templating.

Vimeo

{% vimeo "15982903" %}

Video (inline)

{% inlineVideo "480" "270" "/_downloads/2010/fronteers-2010-compilatie" "webm" %}

Youtube

{% youtube "rhgwIhB58PA" %}

Codepen

{% codepen "MWmBYog" "Pool rules" %}

Google Maps

{% googlemaps "Marconilaan 8, Weert, nl" %}

JSfiddle

{% jsfiddle "lensco" "yYQdf" "Een voorbeeld van een div" %}

Een voorbeeld van een div

Slideshare

{% slideshare "2hNXWKt7JGPKpi" %}

Slides.com

{% slides "sdrasner" "functional-fronteers" %}

Speakerdeck

{% speakerdeck "g00glen00b" "fronteers-javascript-at-your-enterprise-dutch" "View Javascript at your enterprise" %}

View Javascript at your enterprise

Mailchimp signup form

{% mailchimp %}

Sign up for our newsletter

E-mail address required

First name

Last name

Embedding Fronteers elements

There are also various elements that can be embedded /included directly. The common ones are listed here:

About Us Hero

{% aboutushero "We are a proud union" %}
Test Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
{% endaboutushero %}

We are a proud union

Test Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

You can change the shield by providing another argument:

{% aboutushero "We are a proud union", "Dave" %}
Test Lorem ipsum dolor sit amet, [...]
{% endaboutushero %}

We are a proud union

Test Lorem ipsum dolor sit amet, [...]

Quote

{% quote "Anneke Sinnema" %}
This is a quote
{% endquote %}

{

This is a quote

}

Member Quote

(Remove newlines):

{%
    memberquote "Member"
    "Jobtitle"
    "/path/to/avatar"
    "Shield value"
-%}
Member Quote{% endmemberquote %}

For example (remove newlines):

{%
    memberquote "Anneke Sinnema"
    "Frontender"
    "/assets/member-avatars/anneke-sinnema.png"
    "annekesinnema"
%}
To all users of technology who are willing to take a chance, make a choice, and
try a new way of doing things so that we can nurture and enjoy a happy, healthy
planet.
{% endmemberquote %}

To all users of technology who are willing to take a chance, make a choice, and try a new way of doing things so that we can nurture and enjoy a happy, healthy planet.

By default the full name will be used to generate the shield (see below), but some members may prefer you to use a changed name, chosen name, nick name, or even email address to generate their flag. In this case, especially if the name on display is not the same as the value to generate the flag, provide it as the final argument.

The quote itself is the content inside the paired tag.

Shields

{% shield "accolade" "split-horizontal" "{{shield_color_primary}}" "{{shield_color_secondary}}" %}

Generate Shield

It is also possible to generate a shield for an arbitary string. This is the basis of having an identicon for our members.

{% generateShield "" %}

{% generateShield "An arbitrary string" %}

Banners

Banners are desgin elements that can link to another page and look like you can click them.

(remove newlines)

{%
    banner "style"
    "Heading"
    "https://example.com/"
    "/_img/path/to/image"
    "link target"
    "heading html element"
    "link visually hidden label"
%}

For example (remove newlines):

{%
    banner "greater"
    "Banner with short code! (greater style)"
    "https://github.com/"
    "/_img/adventskalender/2020/thats-all-folks/porky.jpeg-full.jpg"
    "_blank"
    "h3"
    "Go to GitHub"
%}

BANNER WITH SHORT CODE! (GREATER STYLE)

Go to GitHub

Style can be greater, curly, parentheses, or none.

Blocks

{% block "Title" %}
This is content
{% endblock %}

Shapes

You can also use include directly, for example to draw shapes (remove newlines from include):

<section class='inner-wrapper'>
    <div class='greater-than-bg'>
        {%
            include partials/utility/dynamic-headerlevel
            level: "h3"
            title: "My greater than shape"
        %}
    </div>
    <div class='curly-braces-bg'>
        {%
            include partials/utility/dynamic-headerlevel
            level: "h4"
            title: "My curly braces shape"
        %}
    </div>
    <div class='parentheses-bg'>
        {%
            include partials/utility/dynamic-headerlevel
            level: "h5"
            title: "My parentheses shape"
        %}
    </div>
</section>

My greater than shape

My curly braces shape

My parentheses shape