Announcement:

“WaterleeBoilerplate” will be open-source and will stand as a replacement for existing Magento Boilerplate.

This means that I’m going to maintain “WaterleeBoilerplate” as a free Magento Responsive theme hosted on github.
As many of you know via e-mail I’m hoping for release next week although I won’t release it until properly tested across
all devices and as you know that takes a big chunk of time.

Other good news is that “WaterleeShop” will be a payed theme based on “WaterleeBoilerplate” with features not covered in the “open-source” version.

By the way, Waterlee got it’s name from, you guessed it: Water and Bruce Lee referencing to Lee’s legendary statement:

“Don’t get set into one form, adapt it and build your own, and let it grow, be like water.“

[Big Update]

Feb 10th 2012 @ 7:00 PM

1. Cart and Checkout page [done]

2. My Account [done]

3. Bug fixes and package release WIP

Jan 30th, 2012 @ 7:00PM

1. Product page done [done]

Dec 21., 2011 @ 7:00 PM
1. Catalog page List and Grid View [done]
2. Product Page styling started…[done]
3. Layered Navigation styling [done]
4. Cross Browser compatible CSS only menu [done]
5. Header [done]
6. Footer [done]

As you might have read in my previous post, I’m building a Responsive Magento Theme.

It’s home will be at http://waterlee.zeljkoprsa.com and right now there is only a temporary page showing a countdown.

To keep you up to date and answer some questions:

1. Current development status is a little over proverbial 30%
2. I’ll update this post with pics and specs about Waterlee

Get back to you tomorrow with screenshots and plans since I spent time building the temporary page this evening. Silly me :)

Got to go and catch some sleep…

Update: Get updates on progress by reading this post.

Long time no posts here. Excuses are numerous:

1. Writing articles at inchoo.net

2. Attending FOWD in New York this year

3. Developing a Magento responsive theme – Codename: Waterlee.

So, to cut the story short I’m announcing laying to rest “Magento boilerplate” and replacing it’s best intentions with “Waterlee“.

Waterlee is a fixation I have right now to build a Responsive Magento Theme and release it into the wild. Need to put to the test what i learned at FOWD and share. It’s currently under development but the main parts are all set.

I’ll be updating this site as I progress and then write a complete follow-up of the process in one final post.

Why again? The idea, came after the FOWD , being hit in the head with the fact that by the year of 2013 we’ll have more content served on “mobile devices” than your standard desktop machine.

That’s it, oh yeah one more thing. I announced some Lemonstand App posts while back but it won’t work for me after all. The platform is great but I’m stretching myself too far as it is so I’ll focus on Magento and Waterlee for the time being. There are a lot of resources on their site to explore and learn so it’s not a bad thing after all.

Before you read: This article series aims at the Magento CE vs. Lemonstandapp comparison

A few months ago I ran into this e-commerce platform and after some serious flirting fell deeply in love with this no-frills approach to e-commerce.

As you may know I’m experiencing my third year with Magento development and have dealt with development of many stores. This will of course continue as Magento is now more powerful than ever and especially with the advent of Magento 2.0 and the x-commerce ecosystem as the result of e-bay completely buying Magento.

Then why would I even consider dealing with another platform?

Well, the answer is actually simple: if you don’t need Magento and believe me a lot of store owners do not need it, they just want it because of  the endless possibilities that eventually don’t get to perform on stage for their audience, you’ll need an elegant solution that covers e-commerce, blogging and CMS from the start in a way that Magento does not have right out of the box or needs extra customization.

At this point I’d like to clarify that these series of posts will be covering both feature comparisons and my attempt to master LemonstandApp inner workings.

What’s next?

My first post we’ll be developer oriented about some basics of pages, templates and partials.

Here it is: “Lemonstand App” CMS objects”

Next post we’ll be dealing with the comparison between Magento CE and Lemonstand App and should see the light of day by the end of this week.

Hope you’ll find this series informative and please leave your comments or just go straight ahead to see their documentation, demo store and the blog.

All definitions are based on their extensive documentation that can be found here.

CMS objects:

1. Page – contains folders corresponding website pages
2. Template – Contains templates, corresponding templates
3. Partial – Contains files, corresponding partials

Templates and Partials are actually files in their corresponding folders, while pages are
represented with folders in the pages folder since each page requires more than a single file.

Managing Templates

Template files can be created either via the CMS section in the Admin panel or via text editor and should have the .htm extension. If the files have been created from the admin panel then the file extension is set from the “Content File Extension” field.

Since you can create and edit templates via the Admin Panel and by manipulating templates directly you should decide from the start which approach you’ll use.

Editing file names via Admin panel renames the actual files while renaming the files directly LemonstandApp detects that change and creates a new object thus you’ll have to delete the “old” one manually.

This suggests that you should do your renaming/creating/deleting from the Admin panel or just remember which ones you’ve changed and then delete them to avoid cluttering. Your call…

Managing Partials

All of the above applies with one exception and that is the colon (:) symbol for
partials when saved in the database and the semicolon (;) symbol when saved as
a file.

Example: shop:product_list or shop;product_list

Managing Pages

As mentioned, pages are represented with folders to accommodate all the dependent files needed. Which are:

page_[name].htm (.php)

Contains the actual page content and the name of this file needs to have the “page_” prefix while the extension for this file depends on the Content file extension field of the file-based templates configuration form.

head_declarations.htm (.php)

Contains the page head declarations which are used for page-specific HEAD declarations

pre_action.php

Contains the PRE action code

post_action.php

Contains the POST action code

ajax_handlers.php

Contains custom page AJAX handler definitions.

Content Blocks

Content blocks are defined as needed in a page and are represented with HTM files
that have a content_ prefix.

“For example, if you have a content block with the intro code, it will be represented with the content_intro.htm (or .php) file in the page directory. You can create new content block files manually. LemonStand will automatically discover them as soon as you render them on the page. Content block file names can contain only latin characters, numbers and underscores.
If your page contains any page blocks, they are represented with HTML files with the block_ prefix. For example, if you have the head block, it will be represented with the block_head.htm (or .php) file in the page directory. You can create page block files manually. LemonStand will discover them as soon as you render them on the page. Page block file names can contain only latin characters, numbers and underscores.” [ref]

Page creation

If you create pages outside the Admin panel LemonstandApp you’ll need to use the “Create page from files” button in the admin panel to make them “recognized” by the system. Here you can specify the URL and the title for the page.

The right way to handle CMS objects is to use the CMS Export/Import feature from the
Admin panel.

One last important thing:

File-based template mode and CMS Export/Import operations

“The file-based templates feature cannot replace the CMS Export/Import operations, because files do not contain all pages information. For example, in files you cannot specify a page URL, its security settings or visibility for different custom groups. If you need to copy CMS objects to another server, the best way to do it is the CMS Export/Import feature.” [ref]

IMPORTANT! All of you developing Magento stores using modernizr.js should correct this:

Line 595 : bool = supportAtRule('@font-face
{ font-family: "font"; src: url(data:,); }');

into this:

bool = supportAtRule('@font-face
{ font-family: "font"; src: "//:"; }');

You can take a look at the solution here: https://github.com/Modernizr/Modernizr/issues/218

Basically, you’ll get an “Display secure and non-secure” items on the page if you have it as it is in IE7 of course.

IE treats this as a non-secure item and holds the user at gun point with the warning message. He or she can than choose between displaying “both secure and non-secure items” or hitting the back button.

The solution is pretty easy and all you should do is to write the URL to PIE.php or PIE.htc without the “http:” part leaving only the “//” part.

The page will load with the correct “http” or “https” protocols depending on which protocol is used.

Just added and configured Nathan Smith’s Formalize to Magento Boilerplate.

For those of you who don’t know about the Formalize, this should do it:

“Break the cycle of inconsistent form
defaults, style forms with impunity!”

A screenshot from Nathan’s site depicting from elements look:

Check it in action here and download from github there.

And for Pete’s sake start using this marvel.

Magento Boilerplate is published on Github.
Please comment, add suggestions or just download and let me know if it works for you. I’m constantly updating so check for new versions weekly.

Here is the link: https://github.com/zeljkoprsa/Magento-Boilerplate

Just in time of my release of the Magento boilerplate with CSS3PIE the guys from 327 Creative LLC released beta 3 of their life saving Progressive IE .htc script.

Here’s the rundown of improvements:

1. Performance – PIE is now up to four times as fast as beta2.
2. Lazy Initialization –  PIE loads on demand
3. PIE.js: standalone JavaScript version – for situations when you can’t use .htc
4. Works on table elements – Sit around the rounded table…
5. Works on images - Rounded images work too (worked for me in beta2)

And the rest of it is on their blog to read.

Go over to the Magento Bolierplate page and get your click on!