WordPress & Ajax

by Phillip van Coller on May 1, 2012 in Wordpress with No comments

After struggling for days trying to load ajax pages and making those pages work with all the WP methods etc I FINALLY stumbled upon a great article on SmashingMagazine.

It explains the RIGHT WAY of doing it. Very neat actually. Go have a look:

http://wp.smashingmagazine.com/2011/10/18/how-to-use-ajax-in-wordpress/

WP Showcase – CSS Gallery WordPress Theme

by Phillip van Coller on April 25, 2012 in Themes, Wordpress with 2 Comments
wpshowcase1

So I’ve been working on this theme for months. Here are a few previews of the “Color Responsiveness” of the theme.

I’m hoping to release this in the next few weeks.

Dark Background

Custom Admin

Ajax Gallery

 

Twitter’s Bootrstrap – First Impressions

by Phillip van Coller on April 25, 2012 in Frameworks with No comments
bootstrap_i

Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.
http://twitter.github.com/bootstrap/

I can’t say I disagree. Reading through all the documentation it looks like it’s got 80% of what I’ve been coding myself for the last few years.

I’ve been looking for a proper framework for the base of my theme development. And frankly it’s too timely to develop my own base + keep it updated with the latest changes in the web dev world. I’ve looked at Gantry, Foundation and a few others and the decision is hard as I’d like to stick with it.

Luckily I found that Rachel Baker built a very nice implementation of BootStrap into a base WordPress Theme. So frankly I’m planning to give it a go with my new “Photographer Theme” I’m starting very soon. But enough off this rambling, some info on Twitter’s Bootstrap:

Grid System

It’s not just a standard grid, but very dynamic. Using LESS you can set the the following:

@gridColumns – Amount of columns
@gridColumnWidth –  Width of Columns
@gridGutterWidth – Margin between columns

Other than that, it’s fully responsive folding up nicely on smaller devices.

UI Elements

The craziest amount of UI elements I’ve ever seen together. Just check it out.

Componenets

  • Button groups
  • Button drop downs
  • Tabbed dropdowns
  • Navbar
  • Pagination

And then LESS

I must be honest when I say, I’ve never seen such a powerful/clean implementation of LESS. This was THE SELLING POINT for me and I really look forward to using Bootstrap very soon. I will most def write an update with my 1st implementation.

 

LESS – My advanced implementation

by Phillip van Coller on April 23, 2012 in CSS, Javascript with No comments
lesscss

In short LESS is a JS CSS framework extending CSS and making it dynamic.

My first thoughts were that it’s the most amazing thing ever! Soon after I started using it I realized the power but also the issues with it. I found that LESS can easily become MORE and with more comes chaos.

The “WP Showcase” theme & LESS

I’ve never heard of the concept, so I made up the term “Color Responsive“. Implemented in this theme it’s very simple to use.
From the admin you select a base color and then:

  1. Gradients are created, derived from the base color using 2 methods called Lighten and Darken: 
    background: -webkit-gradient(linear, left top, left bottom, from(lighten(@default-color, 18%)), to(@default-color)); /* for webkit browsers */

    Gradient derived from base color

  2. Depending on lightness of your base color, the contrast colors are set using a conditional statement in LESS: 
    if (lightness(@color) >= 50%) {
   color:darken(@color, 50%);
else
   color:lighten(@color, 50%);

    Base Color: #786c21

    Base Color: #c4a700

Conclusion

At the end of my project implementation using some tricky LESS techniques it felt like my CSS / LESSCSS was a total mess and that users will have a hard time making CSS adjustments.

So I had to ask myself: Will I be using LESS in my next web project?

To be honest, I don’t foresee using LESS in a Theme I want to sell where users will want to edit the CSS etc. But I will use it on

  1. a Client’s web project
  2. SAAS(software as a server)
  3. Any other online service / web project

This might just be my personal preference but I long to use standard CSS with all it’s limitations :)
But go and try it out, let me know what you think.