Flamingo: A Free Responsive Theme for Get Simple CMS

When I was recovering from knee surgery I made this theme which has been downloaded over 5,000 times.

Rob Johnson

By Rob Johnson

Sat Apr 07 2012

#projects#css

A while ago I stumbled across the GetSimple CMS. At the time I was working on developing my own CMS, which now exists only as a contacts application, because I found that Chris Cagle had done a bunch of work that would save me A LOT of time.

So I've been using it for about a year so far and I thought it was about time that I give back.

Flamingo Responsive Theme

Download Flamingo

Two Themes in One

Change the css file in inc.start.php from style1.css to style2.css. Style2.css changes the layout to allow for longer nav items. Both styles are as responsive as each other.

Responsive

The theme is a responsive design with a 320px and up philosophy. That basically means that if you took out all of the @media calls in the CSS document. It would only render the mobile version. So browsers which do not support @media calls such as, IE 7 and below, will render the mobile version and not dynamically respond to the screen size.

HTML5 Boilerplate

That said, if a user comes to your site in IE6, or another seriously depreciated browser, they will receive an update message notifying that they should update. This is an inherent part of the HTML5 Boilerplate that is cooked into this theme. That means modernizer.js is also part of the theme allowing HTML5 objects to be rendered properly in old browsers.

Multiple Theme Pages

This theme comes with some extras that really help it stand out. First of all it comes with the following pages:

Code for image thumbnails

<ul class="thumbs">
  <li>
    <a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/desert.jpg" /></li>
  <li>
    <a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/sunflower.jpg" /></a>
  </li>
  <li>
    <a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/jungle.jpg" /></a>
  </li>
  <li>
    <a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/sun.jpg" /></a>
  </li>
  <li>
    <a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/pelicans.jpg" /></a>
  </li>
  <li>
    <a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/landscape.jpg" /></a>
  </li>
</ul>

Style2 - add your tagline

For style2 you need to add a component and label it "tagline". Just enter in the text you wish to appear as your tagline, hit save and it will appear next to the site name you have given for your site (top left - mine is Portfolio & Blog).

Last but not least, charts

<dl class="chart">
  <dd>
    <p class="yellow" style="width:92%">
      <span class="label">Illustrator<span class="value">92%</span></span>
    </p>
  </dd>

  <dd>
    <p class="pink" style="width:84%">
      <span class="label">Photoshop<span class="value">83%></span>
    </p>
  </dd>

  <dd>
    <p class="yellow" style="width:80%">
      <span class="label">InDesign<span class="value">80%</span></span>
    </p>
  </dd>
</dl>
# commerce 14 # seo 5 # tools 6 # amazon 1 # sql 4 # shopify 9 # javascript 13 # projects 4 # css 2 # git 2 # php 3 # analytics 4 # api 6 # monitoring 2 # python 2 # aws 2