Documentation

Installation

Download Chameleon from the Github page. Download ensues. Unzip that from your downloads directory and move the resulting “chameleon” folder into your _add-ons directory in your Statamic project. Done. Well.. have fondue, but duh that.

How To Use Chameleon

Before we do anything let’s drop in the Chameleon script file. Just head down to the bottom of your page and drop in the {{ chameleon:script }} tag right before the closing <body> tag.

Chameleon is a pretty basic tag with some major implications for your adaptive designs. At the end of the day all that the {{ chameleon }} tag outputs is the width of the browser window. Seem too simple? Well realize that this value is output by the server, so now the server can conditionally load content based on the browser width!

How? Conditionals! Something like this template code here..

{{ if {chameleon} }}

    {{ if {chameleon} <= 800 }}

        <ul class="default-menu">
            <li>Peas</li>
            <li>Carrots</li>
            <li>Dinosaur Bones</li>
        </ul>

    {{ elseif {chameleon} > 800 && <= 1200 }}

        <ul class="tablet-menu">
            <li>Peas</li>
            <li>Carrots</li>
            <li>Apples</li>
            <li>Oranges</li>
            <li>Dinosaur Bones</li>
        </ul>

    {{ else }}

        <ul class="humongous-menu">
            <li>Peas</li>
            <li>Carrots</li>
            <li>Apples</li>
            <li>Oranges</li>
            <li>Weevil</li>
            <li>Evil</li>
            <li>Dinosaur Bones</li>
        </ul>

    {{ endif }}

{{ else }}

    <ul class="default-menu">
        <li>Peas</li>
        <li>Carrots</li>
        <li>Dinosaur Bones</li>
    </ul>

{{ endif }}

Another common use is in tandem with some other Statamic tag’s limit attribute. Like this maybe..

{{ if {chameleon} }}

    {{ if {chameleon} >= 800 }}
        {{ truncate:words limit="100" }} {{ content }} {{ /truncate:words }}
    {{ else }}
        {{ truncate:words limit="50" }} {{ content }} {{ /truncate:words }}
    {{ endif }}

{{ else }}

    {{ truncate:words limit="50" }} {{ content }} {{ /truncate:words }}

{{ endif }}

In this example Chameleon is working on the {{ truncate }} tag to generate a variable length of truncated text on the homepage of a blog.

You may be wondering why it would seem that we include Chameleon inside of Chameleon. This is a safeguard against users with Javascript disabled or cookies blocked. It allows us to define a fallback should issues outside of our control arise. Chameleon inception isn’t necessary for the tag to work, but you will get unsavory results with users who have Javascript disabled or cookies blocked. So if this is a concern, just set Chameleon to check for itself before using itself.

The Fine Print

So that’s really all there is to it! As stated Chameleon runs off of cookies and Javascript, and while the cookie usage is incredibly minimal and the Javascript has no dependancies, they are requirements. Also Chameleon is not a replacement for responsive, fluid design, the kind you can only achieve with client side languages. Shifts in data output will only render upon refresh. So from one designer to another, your design cannot be dependent on this tag for usability. If things disappear and squash on resize and only correct themselves on refresh, you’re doing it wrong. This is a luxury tag for delivering the best content to the right users. It’s all about enhancing the user experience. Things like limiting a blog’s entry output on a smartphone while not allowing the whole design to fail should the phone be rotated from portrait to landscape. Yay version 1.1! Go forth and design with excellence!

*If you get some mileage out of Chameleon be sure and check out my responsive image add-on Elixir. If you’re serving images on your Statamic site it can greatly reduce page load times.

Documentation

Installation

Download Chameleon from the Github page. Download ensues. Unzip that from your downloads directory and move the resulting “chameleon” folder into your _add-ons directory in your Statamic project. Done. Well.. have fondue, but duh that.

How To Use Chameleon

Before we do anything let’s drop in the Chameleon script file. Just head down to the bottom of your page and drop in the {{ chameleon:script }} tag right before the closing <body> tag.

Chameleon is a pretty basic tag with some major implications for your adaptive designs. At the end of the day all that the {{ chameleon }} tag outputs is the width of the browser window. Seem too simple? Well realize that this value is output by the server, so now the server can conditionally load content based on the browser width!

How? Conditionals! Something like this template code here..

{{ if {chameleon} }}

    {{ if {chameleon} <= 800 }}

        <ul class="default-menu">
            <li>Peas</li>
            <li>Carrots</li>
            <li>Dinosaur Bones</li>
        </ul>

    {{ elseif {chameleon} > 800 && <= 1200 }}

        <ul class="tablet-menu">
            <li>Peas</li>
            <li>Carrots</li>
            <li>Apples</li>
            <li>Oranges</li>
            <li>Dinosaur Bones</li>
        </ul>

    {{ else }}

        <ul class="humongous-menu">
            <li>Peas</li>
            <li>Carrots</li>
            <li>Apples</li>
            <li>Oranges</li>
            <li>Weevil</li>
            <li>Evil</li>
            <li>Dinosaur Bones</li>
        </ul>

    {{ endif }}

{{ else }}

    <ul class="default-menu">
        <li>Peas</li>
        <li>Carrots</li>
        <li>Dinosaur Bones</li>
    </ul>

{{ endif }}

Another common use is in tandem with some other Statamic tag’s limit attribute. Like this maybe..

{{ if {chameleon} }}

    {{ if {chameleon} >= 800 }}
        {{ truncate:words limit="100" }} {{ content }} {{ /truncate:words }}
    {{ else }}
        {{ truncate:words limit="50" }} {{ content }} {{ /truncate:words }}
    {{ endif }}

{{ else }}

    {{ truncate:words limit="50" }} {{ content }} {{ /truncate:words }}

{{ endif }}

In this example Chameleon is working on the {{ truncate }} tag to generate a variable length of truncated text on the homepage of a blog.

You may be wondering why it would seem that we include Chameleon inside of Chameleon. This is a safeguard against users with Javascript disabled or cookies blocked. It allows us to define a fallback should issues outside of our control arise. Chameleon inception isn’t necessary for the tag to work, but you will get unsavory results with users who have Javascript disabled or cookies blocked. So if this is a concern, just set Chameleon to check for itself before using itself.

The Fine Print

So that’s really all there is to it! As stated Chameleon runs off of cookies and Javascript, and while the cookie usage is incredibly minimal and the Javascript has no dependancies, they are requirements. Also Chameleon is not a replacement for responsive, fluid design, the kind you can only achieve with client side languages. Shifts in data output will only render upon refresh. So from one designer to another, your design cannot be dependent on this tag for usability. If things disappear and squash on resize and only correct themselves on refresh, you’re doing it wrong. This is a luxury tag for delivering the best content to the right users. It’s all about enhancing the user experience. Things like limiting a blog’s entry output on a smartphone while not allowing the whole design to fail should the phone be rotated from portrait to landscape. Yay version 1.1! Go forth and design with excellence!

*If you get some mileage out of Chameleon be sure and check out my responsive image add-on Elixir. If you’re serving images on your Statamic site it can greatly reduce page load times.

Elixir 3

Sane Responsive Images

Chameleon

Responsive Markup for Statamic