GMK HUSSAIN - BLOGS

Approximate Conversion from Points to Pixels (and Ems and %) Here's a chart that converts points to pixels (and ems and %). It's an approximation, which will depend on font, browser and OS, but it's a good starting point. Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% 13.5pt 18px 1.125em 112.5% 14pt 19px 1.2em 120% 14.5pt 20px 1.25em 125% 15pt 21px 1.3em 130% 16pt 22px 1.4em 140% 17pt 23px 1.45em 145% 18pt 24px 1.5em 150% 20pt 26px 1.6em 160% 22pt 29px 1.8em 180% 24pt 32px 2em 200% 26pt 35px 2.2em 220% 27pt 36px 2.25em 225% 28pt 37px 2.3em 230% ...

Add this Class .carousel-control.right, .carousel-control.left{ filter : progid : DXImageTransform . Microsoft . gradient ( startColorstr =# 00000000 , endColorstr =# 00000000 ); }

@charset "utf-8"; @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); @font-face {     font-family: 'nexabold';     src: url('css/NEXA BOLD-webfont.eot');     src: url('css/NEXA BOLD-webfont.eot?#iefix') format('embedded-opentype'),          url('css/NEXA BOLD-webfont.woff2') format('woff2'),          url('css/NEXA BOLD-webfont.woff') format('woff'),          url('css/NEXA BOLD-webfont.ttf') format('truetype'),          url('css/NEXA BOLD-webfont.svg#nexa_boldregular') format('svg');     font-weight: normal;     font-style: normal; } /**********gmk classes***********/ /*======== CONTENT ========*/ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ font-family:" nexabold "; } body nav.navbar { font-family: " Open Sans ";} body{ font-family:" Open Sans "; overflow-x: hidden;...

Basic Bootstrap Classes .container sets fixed width to an element (which changes depending on a screen size to other fixed values, so it's still responsive) on all screen sizes except xs - on xs, the width is calculated automatically (this behaviour can be changed) a fixed width responsive website should be wrapped in .container (or just the content without menu, whatever - it's up to you) .container can't be nested! .container-fluid sets 100% width, margin-left and margin-right: auto, padding-left and padding-right: 15px a full screen website should be wrapped in .container-fluid .container-fluid can't be nested! .row creates horizontal groups of columns (which usually have width classes, see below) must be within .container to ensure correct padding and alignment only columns (block elements with width classes) may be immediate children of rows sets margin-left and margin-right: -15px .pull-right .pull-left sets float to either left or...

It is arguable that there is no goal in web design more satisfying than getting a beautiful and intuitive design to look exactly the same in every currently-used browser. Unfortunately, that goal is generally agreed to be almost impossible to attain. Some have even gone on record as stating that perfect, cross-browser compatibility is not necessary. While I agree that creating a consistent experience for every user in every browser (putting aside mobile platforms for the moment) is never going to happen for every project, I believe a near-exact cross-browser experience is attainable in many cases. As developers, our goal should not just be to get it working in every browser; our goal should be to get it working in every browser with a minimal amount of code, allowing future website maintenance to run smoothly. In this article, I’ll be describing what I believe are some of the most important CSS principles and tips that can help both new and experienced front-end develop...