Should i build my own CSS Framework or need to create my own customized one ?

We do not need to create custom CSS grid, framework or whatever you like to call it. There are already so many professional frameworks are availabe. We dont need to waste time on those which is already available in marketing with remove all those bugs which may occur in our custom css framework.

How ever there are advantages and disadvantages to use third party css framework. Before use it, think that is it required to use it for small task or not. Suppose your site is simple and you can create your website in responsive with few links of code, then i suggest dont use css framework, because generally css framworks have large files. In this case, instead of get benefit from css framework, it may overload on your page even if it is simple. So before use it you just think yourself. I am not telling that css framework is bad. It is already good to use it, but it depends on situation and your website design layout. In market there are so many css framework like  Twitter Bootstrap Grid module, Zurb Fundation, 960.gs, The 1140px Grid, and more.

I suggest to create you own css framework and use it if possible in your small scale website design. You website will load very very fast if your css will be in small size. You can measure it when you will use both css framework and your custom css. Finally, its your own choise what you want to use.

How to create shadow using pure css property

Hello Friends,

Now html5 and css3 are more important in web design. There are some browser where it does not fully support html5 and css3 like internet explorer. However microsoft trying to support fully html5 and css3 tags like firefox and chrome.   At present i am not comparing any browser, because our aim to  create shadow in div box using pure css property. So now lets see our main goal.

Following is a simple css scripts.

div
{
box-shadow: 10px 10px 5px #888888;
}

This will add shadow in each div box.   but suppose you want to shadow in any specific div then you can do as under

<style>#mydiv { box-shadow: 10px 10px 5px #888888; }</style>

<div id=”mydiv”> this is content of div </div>
supports

Primary syntax :

box-shadow: h-shadow v-shadow blur spread color inset;

The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword.  The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

With many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit:

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

Understanding shadow property with dia gram :

shadow css property

Live example :

#testdiv{

    box-shadow: 0 0 5px 5px #888888;
    float: left;
    height: 65px;
    padding:7px;

text-align: center;

    width: 160px;
    display :block;

background-color: #EEEEEE;
}

 

 

this is test this is test this is test

Responsive CSS Framework By Gumby

Are you a web designer and planning to start or create responsive web design ? If yes, then i would like to refer you a Gumby Framework.  This css framework as following features

1) Fluid-Fixed layout self-optimizes for desktop and mobile resolutions.
2) Gumby Framework defaults to a 960 footprint. Designers and coders rejoice
3) Engineered to be there when you need it, and get out of your way when you don’t.
4) Gumby Framework includes multiple types of grids with different column variations which enables you to be flexible throughout an entire project’s lifecycle. From concept to deployment, Gumby Framework follows your lead.
icon_codebaseGumby Framework includes several types of networks with different variations of that column to be flexible throughout the entire life cycle of a project. From concept to implementation, Gumby Marco follows suit.

For more detail you can visit http://gumbyframework.com/

Version : Gumby 2

 

Lengths in CSS Property

CSS Length Measurement

As an developer, you may have query regarding which types of length i should use in css property. Am i right ? There are a few CSS properties by taking a length as value. Box model properties are most evident: width, height, margin, padding, border. But many others as well: the offset and the size of a box-shadow or the size and spacing of fonts.  Lets see one bye one with an example. This will help to understand easily.

px  (Absolute length)

.wrap {
width: 400px;
}

Pixels are always a canonical measure on the web but they are constantly manipulated, many other lengths correspond directly to the pixels, and JavaScript speaks pixels. Pixels are perhaps best considered “device pixels” that this length has nothing to do with the screen pixels literal screen you are watching. It is actually a measure angle. It is supposed to be a value that is standardized across devices and screens, but is increasingly no longer true.

cm

.wrap {
width: 20cm;
}

centimeters are more familiar and useful as a physical measurement.  We can map to pixels like this 1cm == 37.8px

in

.wrap {
width: 4in;
}

‘in’ map directly to pixels.This are not used widely

mm

.wrap {
width: 100cm;
}

And an order of magnitude smaller== 37.8px

Em  (Font-Relative Lengths)

.wrap {
width: 40em;
}

A relative unit. Although the length doesn’t change when you change font-family, it does change when you change the font-size.

% (Percentage)

.wrap {
width: 50%;
}

A length set in percentage is based on the length of same property of the parent element. This is widely used. As specially in responsive design this property helps more.

There are also more length options. About which we will discuss on next articles.  However if you need to see more then just visit

Let me know if you have any query.