All Code hosting on Github

We have moved our sharing code base on Github. Yes, you heard it right. Today we have completed all code transfers, including demo previews on Github.  This will help us going further track bugs/issues and help resolve in run time. Also the download links will always have the recent one.

Find us on Github CSS Junction

We have published following project on Github as of now:

Happy coding!

How to set Cookies to share across all subdomains using JavaScript

Browser Cookies, is a very handy feature that enables us as a web developer to do so many interactive programming. Recently since HTML5 raised up, its Web Storage is replacing this feature. But there is one area where Web Storage fails to achieve the result – subdomain access. There we have to again jump back for old school document.cookie method.

In this very quick tutorial, lets discuss how we can setup browser cookies that can be accessed from all subdomains and root domain. But proceeding further requires basic knowledge of cookies, and if you need to learn, Tutorial Point has good article on JavaScript Cookies.

Steps:

  1. Prepare the cookie name/value
  2. Get the top level domain and assign as .domain.com
  3. Set the path to root path=/
  4. Set Expires (optional)

Lets set up a example cookie. Example take as ‘Last time report generated’ to showup across subdomains.

//variables
var LastReportGenerated="Jul 11 2013",
baseDomain = '.cssjunction.com',
expireAfter = new Date();

//setting up  cookie expire date after a week
expireAfter.setDate(expireAfter.getDate() + 7);

//now setup cookie
document.cookie="Report={'ReportName':'MainReport', 'lastGenerated':" + LastReportGenerated + "}; domain=" + baseDomain + "; expires=" + expireAfter + "; path=/";

Major thing to take care here is:

Your domain must be in format of “.domain.com” – dot and root domain and your path=/ always. If you don’t setup your path=/, auto path will be saved as from where the cookies is being saved hence it wont be accessible across any subdomain.

You can try copy paste code above in the Console, and see the result in Resource Panel. If you happen to successfully run the script above, you will get a preview:

JavaScript Cookie

Now that ‘Report’ cookie should be available across all subdomains like = main.cssjunction.com, tuts.cssjunction.com etc.

Document Icon with CSS3

CSS Icons for Better Web – Part I

Recently, I have been busy working on several mobile applications – both web and native apps. Most of them was User Centric and app was allowing them to set their own themes. This made my job as a CSS Developer a little trickier as I was using several icons with CSS sprites. Trying to come up with a better solution on how can I get rid of limited opportunity given by image sprites – I made a decision that CSS Icon should play the role here.

Here is why I chose to do the same:

  • Very first, it’s very best for performance as there wont be any HTTP request and
  • CSS icons are modular – we can reuse and remake/style it based on condition.

Today, I am going to share some of very basic icons – that we can create using CSS and use it right away- the way we wanted. This is a series of posts, will be posting more on coming days – more icons with CSS.

Mean time, you can check CSS3 Document Icon, written by me for Nettus+.

Quick Preview

Preview of CSS3 Arrow Icons

Above preview, if you try to produce by using image icon – you gotta use 4 different images. But if you write by CSS, NO IMAGE is required. Even if you need to change the color and you did use image, you will need another set of images with color changed in Photoshop and reusing – causing bit more load to your page. By CSS – you can have as many colors as your want – much more efficient, efficient – that’s why I called it – CSS Icons for better web.

How to  - Steps:

  1. A simple class with border on right & top – no background.
  2. Then Rotate it to different angles (45 for right, 135 for down, 225 for left and -45 for up.)

Lets Do it.

1. Any Element with Class .arrow

<i class="arrow"> </i>

Your CSS

.arrow {
    display:inline-block;
    width:7px;
    height:7px;
    line-height:7px;
    border-top:3px solid #aaa;
    border-right:3px solid #aaa;
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

Now create three more classes with different different rotation and apply to HTML along with the main class.

.arrow-down {
    -ms-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
}
.arrow-left {
    -ms-transform:rotate(225deg);
    -moz-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    transform:rotate(225deg);
}
.arrow-up{
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

Changing the arrow color on HOVER, (See how easy – think what we used to do with images):

.arrow:hover {
    border-color:#444;
}

You can see the final preview here (See in Result Tab):

And Here is a useful demonstration, (using :after pseudo element instead of separate HTML element to keep markup clean and more semantic) (See in Result Tab):

Thumb

O Simple – Free Website PSD Template

I love freebies and when it is useful – I just download that. So here we have a very clean website template in psd format as a freebie today.

O Simple - PSD Template

My purpose

I have designed this template to write a step-by-step tutorial on how to convert a PSD into HTML5 CSS3 Website. So you can expect the same within few days.

I will be adding more views, like inner page & responsive view. So finally we will learn PSD to HTML5/CSS3 Responsive Website coding. You might want to keep your eyes around us for that.

For now, download the PSD Template and have fun.

Download

PS: Video player PSD credit to PSDHome