{Carrer web log}

Foxy - CSS Framework

Wednesday, June 29, 2011 { 6 Comments }

One of the coolest new stuff in CSS3 is the calc function. Calc() is a dream come true for the people who like to mix various units like(px, em, %) with the goal to have more flexible layout system.

With calc you can have something like width: calc(280px - 2em + 2%*1px ….)

When I first heard about calc() my first thought was I can finally implement margins on my CSS Framework Malo.

If you have some .class { width:25% } that will make 4 columns grid (25% + 25% +25% + 25%). The problem is that you can't have precision px margins (gutter). So in the past you had nested divs or .something-like-this{width:24%; margin-left:1%}

With calc() that problem is solved now we can have .class{width:calc(25%-10px); margin-left:10px} . And with that we can have the flexibility of the % and the px precision.

Unfortunately calc is only implemented on Firefox 4 or later. Some documentation indicate that works even on IE9 but my test show differently.

To show the power of CSS3 calc I decided to build one simple CSS Framework. Clearly this framework has no piratical value today because only work on Firefox 4 or later. I build it to show how cool calc() is and to indicate how calc() can be used in the future.

The logic behind this framework:

It is one to twelve column framework.
The margin(gutter) is 10px you can change it if you like.
You can put px, em, % in the default container(like 960px or 73% or 50em)

Let's take one part of the Framework:

.d5{ width:calc(100%/5 - 10px); margin-left:10px} Meaning we have 100%/5 = 20% column with 10px margin or you can build 5 columns inside 100%.


.dx5{calc(100% - 100%/5 - 10px); margin-left:10px} is the second part of the d5 meaning you have 100% - 20% = 80% with 10px margin.

Very simple rule to remember .d5 + .dx5 = 100% or .d7 + dx7 = 100%

Here is example of some grid combination (Firefox only).

Demo1

Demo2

And some cats.


Download this project on GitHub

Multiple object extend pattern in JavaScript

Tuesday, June 21, 2011 { 3 Comments }

I've was doing some research about JavaScript Inheritance patterns realizing there are many different approaches and divided opinions which pattern or method is better. There is no widely accepted bulletproof pattern that will cover every possible scenario, probably because It all depends what you trying to achieve.

I needed a pattern that can accept and extend multiple objects. Usually is very common to see one object that extends another object extend(object1, object2) but I needed pattern that accepts multiple objects like extend(object1, object2, object3). So I decided to make one.

I used Douglas Crockford - Prototypal Inheritance logic, temporally function -> Object.prototype -> new object plus looping inside every object to copy all the methods.

The first pattern accepts only objects:


I also made the second pattern in case you want to use function for storing methods.It is highly unlikely that you will use the function just for storing methods, but anyway here is the pattern.


From the preliminary tests, this pattern should work even in IE 5.5.

Sometimes it can be handy to merge objects or to divide one object in smaller units to increase modularity. Many modern JS Frameworks have one object that holds everything, dividing that object into smaller logical components(objects) can be helpful.

Two months ago I made picoCSS small JS framework for making webkit apps. I will rewrite the picoCSS to demonstrate the functionality of this pattern. Many JS framework have modules like: selector engine, css, animation, other DOM methods, ajax, events … The intention behind this pattern is to merge just the objects(modules) that we need.

Here is picoCSS original and viewed with Object Auto Documentation. Everything is stored inside the object p. The goal is to brake picoCSS several objects like selector, events, animation …

And picoCSS after:


Now we can rebuild picoCSS like this: var p = extend(selector, css, loop, events);

The working demo.

In this way we loaded just the objects and methods that we need. This particular case dividing the object has little sense because we have super small library. But in other bigger projects dividing the logic can be very useful not just for increasing modularity but also for decreasing the memory consummation. We can even make different files for every object and load only the files that we use. Naturally we should be careful not to make to many HTTP requests.

Here are some I tests I made

Your comments and suggestions about improving this pattern are welcomed.

Object Auto Documentation - JavaScript

Monday, June 13, 2011 { 0 Comments }

One particular thing that I like about backbone.js is how elegant and well organized is the documentation. Other project that caught my attention few days ago was selfDoc.js I liked the idea of self documentation.

That trigger me to build simple function that will display all methods inside object (backbone style). Important thing was to potentiate code readability and clearness.

The object methods names are listed in alphabetical order on the left and the methods and the code on the right.

The logic that extracts the methods from the object is based on Object.keys. The object methods code formatting are not changed from the original code.

Basically how all this works is you download and put docJS.js and style.css and then include the library or object you want to auto document example docJS(jQuery,"jQuery");

Here is demo using jQuery object

You additionally use the browser console for further profiling. Example: open the previous demo and inside browser console write docJS(jQuery.prototype,"optional")

I build this project for auto document some of my JS libraries but surprise me how cool this tool can be for learning and disassembling other JS libraries.

Here are ten objects from ten different JS projects:

jQuery
dojo
Ext
fuse
Modernizr2
mootools
prototype.js
swfobject
webfont Google
YUI
Zepto

I think this demos show how easy you can profile and object anywhere on the web. Also you can use this tool for learning from other JavaScript libraries. Works in Safari, Chrome and FF4.

Download Watch Fork this project on GitHub

HTML Lorem Ipsum Crash Test

Wednesday, June 01, 2011 { 0 Comments }

About two years ago I need HTML template for testing my CSS Typography Framework - Azbuka.

The idea was to have natural float of HTML elements for better CSS projecting and for more authentic HTML elements interaction.

So I build HTML Lorem Ipsum Crash Test and strangely become more popular than my it's original project Azbuka.

Lorem Ipsum Crash Test was partially used in:

• HTML5 Boilerplate
• Readable
• normalize.css
• probably others ..

I decided to make separate page on GitHub so people can use it to test their CSS.

HTML Lorem Ipsum Crash Test unites parts from:

• Placeholder Markup with Lorem Ipsum - Jon Tan
• Emastic CSS Framework
• Tripoli CSS Typo Reset
• Formy CSS Form Framework
• Baseline CSS Framework

Demo Lorem Ipsum Crash Test

Download the project on GitHub