Tag Archives: Resources

5 Best Articles to Learn Metro UI Design

Learn Metro UI Design

Microsoft Windows 8 is about to release. It will bring a totally new way in computing experience. Microsoft has changed the UI from classic bar button pattern to Metro Design Pattern. I think this is one of the most trending news in web designers world now.

Have you had any chances to learn Metro UI Design language? If not, here are 5 good resources  where you can learn Metro UI Design.

Metro Design Principles

Article by Arturot, an architect – he talks about core principles behind the Metro Design Language.

Link to article

Metro design guide for developers, v1.00

He is a developer, who codes yet shares the learning from Windows Phone design.

Link to article

Designing Metro UI Apps

This article is about designing apps for Windows 8. Definitely you can not avoid talking about Windows because its the origin of Metro UI.

In this article, you will find a video, really descriptive for Metro UI apps designing fundamentals.

Link to article

8 traits of great Metro style apps

One more video to see, quite lengthy – BUT it will give you straight views on why you should consider Metro pattern. Must watch.

Link to article

More Metro UI Resources

Link to article

Here you will find two slides to download and more article links to go further.

You also have more links to learn great things about Metro UI? Please comment it down.

Product Showcase PSD Template

We have an excellent PSD template freebie today. It’s super cool design helps to showcase your product in very well manner. I must say, it is a most attractive psd template released under CSS Junction.

Product Showcase PSD Website Template

Images used in the template are creative common from Behance gallery and fonts are from Google Fonts. Heading type is Tenor Sans and body copy is Buenard.

This template has been designed by Nepalese Web designer Sanjay Shrestha, a young and talented creative. You can follow him @shresthasans and here is his portfolio.

Isn’t it awesome that you can get this template right away. Yes it is. Get it:

Download PSD

Have something to say, spread words about this in the comment section below. Don’t forget  to follow us @CSSJunction and Subscribe our RSS feed for more attractive free PSD templates.

More PSD Templates:

jQuery Accordion with Carousel – Accarousel

Before a week one my friend had requested me to suggest any jQuery plug-in that is carousel with accordion effect inside. I tried to find one suitable plugin – but couldn’t make it. That made to write my own custom plugin that consist both carousel and accordion effect. Another one requirement was to flyout the most closed sibling elements to outside and hide rest of all when accordion expands.

Accordion

So here I come with a solution and made it a plugin so that it might be useful for all of us. I love to code for re-use.

Demo

Usage:

Here is the how you can you can use this plug-in to work on your side:

HTML Markup

<div id="accarousel">
   <ul>
	<li>
              <a class="stand">Initial visible contents</a>
              <div class="detail-panel">Contents for accordion when exapands</div>
        </li>
   </ul>
</div>

You can add as many <li> as you want and any kinds of contents inside ‘.stand’ and ‘.detail-panel’. Pagination will occur according to your choice to group how many items should be visible on stage. Now you need to initialize the plugin. Before that you must include he plugin source in your html page. Include our plugin file after you added the main jQuery library.

Carousel

Scripts

<script type="text/javascript" src="jquery.cjAccarousel.min.js"></script>

Now add the following script on the page, better you put this script at end of the page:

    $(document).ready(function() {
        $('#accarousel').cjAccarousel(); //#accarousel is your selector ID, see the html mark up above.
    });

Further more you have more options to customize to fit your requirement and ease of work. Till the date, you can set your own values for following options:

    $(document).ready(function() {
        $('#accarousel').cjAccarousel(
          {
              stand		: '.stand',        /* Visible stands element selector (class basically) */
              panel		: '.detail-panel', /* Expandable element selector (class basically)   */
              pagerClass	: 'pager',         /* Pager CSS Class */
              x			: '.detail-panel', /* Panel Collapse handler */
              groupOf		: 5,               /* Number of stands for visible group*/
              scrollSpeed	: 1000,            /* Carousel Speed */
              ease		: 'swing',         /* Use jQuery Easing Plug in for more easing effects */
              flyOutGap	        : 3,               /* Gap between expanded and other two flyouts */
              nextPrev	        : true             /* set false to disable Next/Prev Nav */

          }
	);
    });

You can add our basic styling CSS to get started and after all you can edit/modify it according to your need. That’s it.  If you’re happy to get a copy of my scripts, get it here:

Download

I will be working more on it, adding more features and effects. I would appreciated if you guys can give me valuable feedback on it. Also if you encounter any problem, let me know in the comments below.

7 Ways to Code Faster HTML CSS

7 Ways to Code Faster HTML and CSS

Are you a fast coder? Yes? If then how fast you can code? Being a fast typist isn’t about coding faster. Faster coding is about getting more things done with less effort. Here comes the role of productivity tools.

Listed below are some very useful productivity tools – for Frong End Developers. The tools below will help you code must faster and saves a lot of time. After all we are not a typist :), so why don’t we use these tools:

HTML

1.) ZEN CODING

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.

Best learn resource: http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/

2.) Halm

Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications.

Best learn resource: http://haml-lang.com/tutorial.html

3.) Sparkup

You can write HTML in a CSS-like syntax, and have Sparkup handle the expansion to full HTML code. It is meant to help you write long HTML blocks in your text editor by letting you type less characters than needed.

Best learn resource: http://thechangelog.com/post/1421721495/sparkup-a-parser-for-a-condensed-html-format

CSS

4.) LESS

The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Best learn resource: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-the-programmable-stylesheet-language/

5.) SASS

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.

Best learn resource: http://net.tutsplus.com/tutorials/other/mastering-sass-lesson-1/

6.) Prefixr

CSS Prefixr is a CSS pre-processor tool, that generates the cross browser css from given codes. Forget about writing multiple browser prefixes and start using Prefixr.

7.) SpriteCow

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

All of the above tools are my daily usage tools. Once you get the rid of using these tools – you will thank me for listing.