Category Archives: CSS

Circle Div’s with CSS

The CSS:

.circleBase {
    border-radius: 50%;
}

.yellow {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.gray {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.bigBlue {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

The HTML:

<div class="circleBase yellow"></div>

<div class="circleBase gray"></div>

<div class="circleBase bigBlue"></div>

the fiddle:

5 Column Layout in Bootstrap 3

Create a new default column definition:

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

Define width in case of different media queries:

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

Create div with 5 column layout on medium screens and four on smaller ones:

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Latest Bootstrap Media Queries Breakpoints

As of now these are the best breakpoints to use:

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    
}

Best practices for using font-weights

The CSS “font-weight” property is used to define the weight of a font, such as regular or bold. This article describes how to best use font families that have extended weights that may range from Extra Light all the way to Extra Black.

Here is how a regular and bold weight would be defined:

But for all other weights a numerical range from 100 to 900 is used. One of the challenges with web fonts is that most web browsers do not properly support font weights other than normal & bold. The following chart describes the possible mappings of weights to the numeric definitions:

  • 100    Extra Light or Ultra Light
  • 200    Light or Thin
  • 300    Book or Demi
  • 400    Normal or Regular
  • 500    Medium
  • 600    Semibold, Demibold
  • 700    Bold
  • 800    Black, Extra Bold or Heavy
  • 900    Extra Black, Fat, Poster or Ultra Black