Flexbox :: New Era for responsiveness

Now a days 'Mobile first' is the main moto every conversions. Most of the time people visit a website form their phone or tablet. Thats why various css framework like Fundation, Kube or Bootstrap are very popular. It is a old news now. But do you ever think is it really essential to add a framework for responsiveness. We already have media query. Yes sometime essential. I dont try to say those css framework dont have power. I am trying to say we can easily achieve our main goal without them. Ya FlexBox can do it very easy.

I make some difficult layout with Flexbox. And it helps you to believe that you can run without any css framework. Sometimes FlexBox's few features are very interesting at the same time more power than css frame work and you can not find them to your css framework.

Pseudo Element

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector. [Source: Mozilla Developer Network]

But I have use ::before ::after pseudo class lot of area. Its helps me a lot for styling any element. It reduce my time.
You can see some example clicking the link belew at fiddle:
1. Using small border at header type content
2. Using animation in a button

[to be continued]

Power of CSS3

Tooltip by CSS3

Hello folk I tell you something few days ago I was doing some bootstrapping and the specific section was tooltip. I used angular ui for tooltip convention. Suddenly I thought that tooltip just like 'you hover something and a hidden div show'. So why not I use normal CSS3. You can see the output. Click the link

I am not a pioneer because after that I googling and saw people already use this type of code. But it is nice and easy technique using tooltip by CSS

Time for explore beauty of SASS

Mixin beauty of SASS

Hi forks!! Few months ago I explored some new things about SASS. It awesome and I love it to share with you. Just Come with me, journey begins.

If you are very new what is mixin, here couple of example for you.

mixin borderRadisu($radius){
border-radius:($radius);
-wibkit-border-radius:($radius);
-moz-border-radius:($radius);
-ms-border-radius:($radius);
}

.button{
@include borderRadisu(3px);
color:#EEEEEE;
}

Output will be:

.box{
border-radius:3px;
-wibkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
color:#EEEEEE;
}

So idea is very simple. Now you can use all prefix css as a mixin and use it all over your css file. You can save tone of time.

another idea is use one css class with different values again again...

@mixin heading($font-size,$color,$font-family,$margin) {
  font-size: $font-size;
  color: $color;
  font-family: $font-family;
  margin:$margin;
}

.heading{
  @include heading(10px,#343434,arial,0 auto);
}

or

Output will be:

.heading {
  font-size: 10px;
  color: #343434;
  font-family: arial;
  margin: 0 auto; }

or

h1{
  @include heading(10px,#343434,arial,0 auto);
}

Output will be:

h1{
font-size: 10px;
color: #343434;
font-family: arial;
margin: 0 auto;
}

Another example for you,

@mixin linx ($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
    &:hover {
      color: $hover;   
    }
    &:active {
      color: $active;
    }
  }
}

@include linx(white, blue, green, red);

Output will be:

a:link { color: white; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: red; }

Some useful link for mixin:

• Bourbon, It helps you how you can write mixin very effectively.
• Hongkiat, you see 11 readymate common mixins here. You just copy those and use your mixin file
• Cssowl, It is another open source mixin library.
• A list of mixin library, If you have enough time then go to this link here you can see some usefull mixin library that developer use lot.

What do you think... it is cool, right? Mixin is game changing idea. Now you can make coffee for your partner because mixin save your time.
Life is beautiful and ya, happy coding

Why not SVG !!!

What is new thing in web industry? Your answer is lot of things, I know. But do we ever think all over web industry we use vector graphics as a image. We make them vector, give lot of afford then we converte those as a image file. Why ? We don't resize it because if we do it loose quality. Or if we need html5 canvas animation image file could not help me rather than svg path. We use font icon as icon but if we need it as a background then .... could we do that! So it is time to know SVG.

SVG(Scalable Vector Graphics), is a XML-style markup driven vector graphic rendering engine for the browser. SVG is supported in every browser, except IE < v9 and Android < v3.

Resolution Independence

Every developer loose their passion when application run in different different viewport. Because at present we business not only content, I mean text also have lot of images in there. So application run in different viewport there is a change images loose quality. If you replace images as svg file it will solve.

Set as background

Few years ago we all are use font as icon image. Ya sometime it is very useful. But font, we can not use them as background image and sometime it is very painful. We converted those as image file then set them as background. But I question yourself it is really essential ! You can easily svg as background.

Super-Accessible DOM Node-Based API

So you write HTML? JavaScript? CSS? Good. Then you already know a lot of what you need to know to get writing SVG. SVG actually uses an XML-compatible format to define its rendering shapes. Beyond this, you can actually style shapes in CSS, and make them interactive with JavaScript. Multiple JS libraries exist to assist you in this world, like D3.js and Raphael. Here's an example of an SVG element group (the Envato leaf). You can also You can also see this example on JSFiddle.

If you are animation lover this link is for you.

Tell me, Why Aren’t You Using SVG?

How can I structure a Sass project

Hello everybody... I already told that I want to write few things about SASS because SASS surprise me a lot. I want to share my regular experience just. Hopefully it will be helpfully for beginner of SASS.

I am working a large application and when it built we did not think that we never use SASS or something. But after two year pass our team leader think that we need to mange our css more effective way. How can we do it? My answer was lets jump into SASS. So it the beginning of mine about SASS.

Sometime if CSS file being large, usually we break-down whole CSS file into each different files. Then we import it into main CSS file. But problem is in main CSS file, ok called it 'style.css' when we import our css file into it... each import we sent a request into server. and all developer want to reduce server hit. But SASS give me a solution also I can break-down my scss file.

Let me tell you, how we can separate our large css file into different SCSS file and what is the folder structure...

Make separate SCSS file by their nature. Note: Before the file name add [ _ ] sign. Something like _button.scss or _input.scss. This underscore sign [ _ ] told sass converter that it is supporting file, you don't need to covert is as css. After that you need to just import in your main SCSS file. just like @import '_fileName' oh you don't to need write file extension also.

A useful tip:

Now a day when we developed a larger application sometime we depended some third party scripts. and those third party script has css files. So we can separate those and make new SCSS file then we import it in our main style.scss file. It is good practice.



Here is a example how we can break them.

I always think that SASS is not very problematic but before SASS is hard. So I make two article for that.

Happy SASS

I'm a SASS Lover: Syntactically Awesome Style Sheets

When I first listen about Sass I am not too serious about it. Day after day I catch on, SASS makes my regular CSS world change.  I am happy enough myself, I knew it very beginning of my path.

At very beginning when I worked with Sass the problem I faced how to install Sass on my machine. So 'developing a sass file' or 'how to sass works' or 'how the sass syntax are work'  it not my problem. I browsed lot of web materials and listen their instruction very exquisitely but I failed. But I think it is good for me. Because now I know how to manage Windows Command Line and how it works. It is very essential to know about Windows Command Line because after that I discover lot of new things such as GIT (Source Control tool like Subversion, CVS, Perforce), YEOMAN (A workflow which robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications), GRUNT (Awesome tool java-script task runner), BOWER (by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for) and I love each of them.

They change me, they change my work flow most impotent thing is, they helping me become a smart man and I always wanted to be.

So Today I told my experience about installing Sass to my machine. if regular sass installing process is work for you then this post is not for you.

Go to Ruby site download Ruby and install it.

In right side, you can see a dialog box checked last two section. Most important thing is 'add Rubby executable to your PATH. it means you checked then win command line save ruby path so if you execute the command the fire.

After install Ruby go to cmd mode type 'ruby -v'
press enter show your Ruby version. Ruby install
successfully. Type gem install sass if sass install -
you are a lucky basted few are not. If it shows
ERROR: Could not find a valid gem 'sass' (>= 0),
here is why:Unable to download data from
https://rubygems.org/ - SSL_
connect returned=1 errno=0 state=SSLv3 read
server certificate B: certificate verify failed
(https://api.rubygems.org/latest_specs.4.8.gz)

Go to this link git gives a nice solution. just read it 

I have interest to write couple of post about SASS file structure , SASS variable , SASS Mixin. Those things are really surprise me. Again I told you SASS dont give me too much challenge rather than faced when I install SASS and I guess its the first beauty of SASS.

Until then best of luck.