It Fits :: Free HTML5 CSS3 Responsive Template

We have something very special today for all of you great visitors. Its an HTML5 CSS3 Responsive Template, with 5 pages excluding 404 page. This template has something not just merely HTML5 new tags, it’s coded using WAI-ARIA roles for enhanced quality. Uses very less images, taking benefits from CSS3 features. Even icons are fonts – hmm super fast page loading.

UPDATE: New Version 2.0 of this template is available.  Check Version 2.0 –  IT FITS.

HTML5 CSS3 Template

Page you will have:

  • Home page
  • Portfolio page
  • Regular page
  • Blog page
  • Contact page
  • 404 page – (default from HTML5 Boilerplate template.)

I have used LESS css for this projects – for better and faster CSS coding, but you will notice there is pure CSS file is in use. Reason – what I used to do is I do code in LESS and compile it using any software like WINLESS and then I use the compiled pure css files. When you download the template source code, you will find three .LESS files but all complied in one css file that is main.css.

Too much talk? Head over now:

Demo

Browser compatibility:

All modern browser works fine. Responsiveness is missing from IE7 and IE8. IE9+, Chrome, Firefox, Opera, Safari works fine. You can see how it looks on the smaller device by re-sizing your browser. Or head over to The Responsinator, then give the demo URL and see.

In terms of visual appearance, IE7 and IE8 has graceful degradation – no support for CSS3 so as, but template presentation is fine.

IE6??? I don’t talk about it.

That’s it guys – not much talk. This theme has been released under Creative Common  CC 3.0 Attribution (by) license, so feel free to use anywhere.

Download now

Let me know your views and feedback. Please follow us @CSSJunction, if you want to follow the author of template – @shekhardesigner

More HTML5/CSS3 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.

Detect Landscape/Portrait Mode using JavaScript

Detecting device mode (landscape or portrait) using CSS3 is now very much easy and it is state of art. But it wont work on certain situations like I had. I failed to make @media queries detect device oriantaion on Iphone. So I came to write a JavaScript fix to get work done.

Check my oriantation test using CSS3 @media queries here. The demo page should show text ‘Portrait’ on portrait mode and ‘Landscape’ on respective mode. But it does not. You might want to try with you own device. Some of my friends said it is working. Check out the discussions on Forrst.

I Googled for the solutions, but I must say I couldn’t find any reliable one :(. If you prefer to use CSS3 media queries, check out the post on Stuff & Nonsense. And here it goes my JavaScript function that will detect the landscape/portrait mode.

First, lets create a function called ‘checkOrientation‘ so that we can evoke it by just a name instead of repeating whole lines.

Inside this function we will check the device oriantion degree which we are going to take from window.oriantation method. If we get the degree 0 its the mode portrait else its landscape.  Since we will be using window. orientation method, this function will only work in handheld devices. So here it goes our function:

function checkOrientation(){
      var currMode = "";

      switch(window.orientation){

           case 0:
           currMode = "portrait";
           break;

           case -90:
           currMode = "landscape";
           break;

           case 90:
           currMode = "landscape";
           break;

           case 180:
           currMode = "landscape";
           break;
     }
     document.getElementsByTagName("body")[0].setAttribute("class", currMode);
}

I have used switch statement to set the currMode variable, which we are going to use as class on required html elements. I set that class on body.

Now its time to call the function, you can call it directly or on window.load method. I think window.load method is better and safe. So lets call it:

window.load = function() {
     checkOrientation();
}

When our page is ready, check the class of body element. We are done. But wait what if we change the oriantaion now? Yes, we need to update the class on oriantation change.

For this, we have window.onorientationchange method, which is also available on devices only. We will recall our function inside this method:

window.onorientationchange = function(){
      checkOrientation();
}

Thats it. Now we are completely done. Check-out the Landscape/Portrait Mode detection demo.

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.

10 Excellent CSS Frameworks for Responsive Web Design

Responsive Web Design

The year is 2012, shame on me – everyone knows that. The year is for Responsive Web Design – yeah now I said good thing.  There are plethora of books which can be so useful for getting started, yet when it comes to develop a project – CSS Frameworks strikes in mind. CSS frameworks are great for rapid development.

So here I have listed some of the best Responsive CSS Frameworks you can choose to get started on your next responsive projects.

1. Golden Grid System

Golden Grid Responsive CSS Framework

2. 1140 grid

1140 CSS Grid Responsive CSS Framework

3. Columnal

Columnal Responsive CSS Framework

4. Less Framework

LESS Responsive CSS Framework

5. Zurb Foundation

Zurb Foundation Responsive CSS Framework

6. inuit.css

INUITCSS Responsive CSS Framework

7. 320 and Up

320 and up Responsive CSS Framework

8. flurid

FLURID Responsive CSS Framework

9. The Semantic Grid System

The Semantic Grid Responsive CSS Framework

10. FluidGrids

Fluid Grid Responsive CSS Framework

Hope you enjoyed the list 🙂

Portfolio PSD Template V 2.0

Our last Portfolio PSD Template, which was a standalone one page PSD Template got a lots of love from you – its the most popular download till the date on CSS Junction. Considering you deep interest in that portfolio template, here I have updated its design, added more pages that makes it a complete portfolio package template.

V 1.0 (Original) Template

Portfolio PSD Template V 1.0

V 2.0 Template

Portfolio PSD Home page

Major updates

  • Navigation
  • Typography
  • Content section
  • Additional pages added

Technical details

  • You’re right – its on 960 grid.
  • Heading fonts from Google Web Font – its Oswald.
  • Body copy texts – Antic from Google
  • All images (except work samples) are royalty free stocks from photoXpress.com.

Other pages

1. List page
List page template
2. Full page
Full Portfolio Page
3. Contact page
Contact page template
All together – 4 pages, which makes it a complete template pack.
As you know- I don’t like to talk much when its a freebie post – straight to point. Download the PSD.

Loved it? I wont mind a tweet or share on facebook.