Category: Design

28 Flat Food Icons

·

Smashing magazine released a nice food icon set in partnership with freepik (whooping big, 200 in total) few days ago. As they allow it to modify anyway you want, free for personal and commercial use Β – I decided to give them a “Flat Icon” flavour. So I picked up 28 of them last night and this is what I have come so far. Since they were little boring (all white, too flat) so I think this little make up made them look good πŸ™‚

Screen Shot 2013-07-04 at 6.58.32 AM

You can download this 28 food icons set from HereΒ http://bit.ly/FlatFoodIcons. As the original artist allowed them to be used and modified anyway (personally and commercially) so feel free to use this derivative works anyway you want to.

My plan is to color all of them, hopefully by this week and release a new version after that. Until then, enjoy πŸ™‚

Download:Β http://bit.ly/FlatFoodIcons
File Content: AI, EPS, PNG files
License: Free for commercial and personal use

Utopia – our new admin panel theme is ready to grab

·

Last week, we have released a new admin panel theme from themio. This new theme, “Utopia” comes packed with lots of beautifully crafted UI elements and it is built on top of popular twitter bootstrap framework. So you will be getting all the features of twitter bootstrap plus the extras.

Check Utopia in Themeforest: Click here

Utopia comes with two themes white and dark which will suit your need in different situations. The collapsible sidebar and widgets, data tables, conversations tables, pricing tables and numbers of galleries with image effect will make it a perfect choice for the backend of your web applications

Screenshots

Dashoboard comes with a glimpse of beautifully crafted UI elements that comes with Utopia. The collapsible and
responsive
sidebar, data tables, legends, weather controls, data tables, news feed ticker and many more

Dashboard

(more…)

Page grid-layout designing is fun with this 12 line parser :)

·

If you are familiar with css grid frameworks like 960 or 1kbgrid, then you already know that designing the layout is just repeating the container divs in a specific pattern. These grids made our page layout design into a easy job. But if you are one lazy ass like me and dont want to write that much(?) at all, then grab yourself a piece of cake and use the following snippet.

Say you are using 1kbgrid and your grid layout contains 3 rows,
1st row contains 2 spans where1st span is 8 column wide, 2nd span is 4 column wide
2nd row contains 3 spans which has a width of 3 column, 3 column and 6 column respectively
3rd row has 2 spans where 1st span has 6 column and 2nd span has 6 column
4th row has only one span of 12 column width

Now lets write a pattern like the following
8+4.3+3+6.6+6.12

If you look carefully then you will see that “.” is used as a row separator, and in each row spans are separated by a “+” sign following their width in column πŸ™‚

[sourcecode lang=”php”]
function parseTo1KbGrid($pattern){
$grid ="";
$rows = explode(".", $pattern);
foreach ($rows as $row){
$grid .= "<div class=’row’>\n";
$spans = explode("+",$row);
foreach($spans as $span){
$grid .= "<div class=’column grid_{$span}’><p></p></div>\n";
}
$grid .="</div>\n";
}
return $grid;
}
[/sourcecode]

Now if you run the following code, it will generate the complete grid for you.
[sourcecode lang=”php”]
$pattern = "8+4.3+3+6.6+6.12";
echo parseTo1KbGrid($pattern);
[/sourcecode]

The output will be like this
[sourcecode lang=”html”]
<div class=’row’>
<div class=’column grid_8′><p></p></div>
<div class=’column grid_4′><p></p></div>
</div>
<div class=’row’>
<div class=’column grid_3′><p></p></div>
<div class=’column grid_3′><p></p></div>
<div class=’column grid_6′><p></p></div>
</div>
<div class=’row’>
<div class=’column grid_6′><p></p></div>
<div class=’column grid_6′><p></p></div>
</div>
<div class=’row’>
<div class=’column grid_12′><p></p></div>
</div>
[/sourcecode]

For 960 CSS grid framework, use the following routine
[sourcecode lang=”php”]
function parseTo960Grid($pattern) {
$grid ="";
$rows = explode(".", $pattern);
foreach ($rows as $row) {
$grid .= "<div class=’container_12′>\n";
$spans = explode("+",$row);
foreach($spans as $span) {
$grid .= "<div class=’grid_{$span}’><p></p></div>\n";
}
$grid .="<div class=’clear’></div>\n";
$grid .="</div>\n";
}
return $grid;
}
[/sourcecode]
Designing grid layout for 1kbgrid and 960 is now even easier, eh?

what is your favorite IDE/editor for writing code?

·

hmm, tough question for me. i have (had actually) so many favorites depending on context. but definitely it’s interesting to write here about them

1. notepad – i am a notepad fan, for a very long time since 98 to 2006 and still i like it very much. but well, after that i’d found notepad++ and i liked it for it’s outstanding syntax highlighting features. if by any chance, i have to use windows these days, i work in notepad++

2. visual studio 6: yup, i must agree it is one of the best ide i’ve ever came in touch with. i have worked on visual basic for a long time (99 to 2006) and i was simply in love with visual studio ide. and it’s awesome intellisense + gui designer was the center of the attraction.

3. zend studio: i still use it. its one of my most favorite ide because of it’s os independent distribution. i like most of the features in it (SQL editor, subversion support, FTP etc) and ofcourse the feature to check the output of yourcode inside it. the object inspector is really a very cool feature. and i also use “find in files” feature very often to find the file i am particularly looking to edit. oh by the way – i use the old version (the non-eclipse version) and still use the 5.5.1 version for my everyday development.

4. phped: its a good editor for windows (never tried it’s linux version) but for some unknown reason i’ve failed to get used to with it.

5. netbeans: its superb πŸ™‚ i like it very much. but as i am used to with zend studio i dont use it much. but i always suggest netbeans to someone who is looking for a decent and powerful ide for php (well, yeah also for java specially for the outstanding GUI designer for swing based apps)

6. aptana studio and spket ide : both of them are very very good for editing javascript. i use spket in linux for it’s small footprint. and aptana studio in my regular home and office machines.

6. nano – yeah it is the latest editor that i use almost everyday. you know it is available in both linux and mac. so i use it frequently in my local dev platform (mac osx based) and remote machines (linux based). and it is much more easier than vi – i know vi(m) is a very good editor and there are millions of user of vi(m), so what? if i can’t find it useful then i wont use it πŸ™‚ – i find nano is very handy and easy to use. i have enabled php syntax highlighting in nano (via nanoarc) and it works really cool in shell πŸ™‚

i dont like eclipse. there is no particular reason but for some unknown reason (i remember one, extremely resource hungriness and large footprint) i never feel comfortable with it. i use only one eclipse based ide (aptana) becoz there is no other good alternative to it. and only for this reason i also don’t use the new zend studio.

so hey, what is your favorite ide?