Showing posts with label snippets. Show all posts
Showing posts with label snippets. Show all posts

Monday 17 February 2014

Twitter Bootstrap CSS snippets

When creating a website using Twitter Bootstrap you often find yourself using the same CSS code snippets. Below are some of mine.

/*Standard bootstrap colour palette*/
.gray-darker
{
  background:#222222;
  color:white;
}
.gray-dark
{
  background:#333333;
  color:white;
}
.gray
{
  background:#555555;
  color:white;
}
.gray-light
{
  background:#999999;
  color:white;
}
.gray-lighter
{
  background:#EEEEEE;
  color:#222222;
}
.brand-primary
{
  background:#428BCA;
  color:white;
}
.brand-success
{
  background:#5CB85C;
  color:white;
}
.brand-info
{
  background:#5BC0DE;
  color:white;
}
.brand-warning
{
  background:#F0AD4E;
  color:white;
}
.brand-danger
{
  background:#D9534F;
  color:white;
}

/* Remove colours of navigation bar */
.navbar-default, .navbar-inverse
{
        background-image:none;
background-color:white;
border-color:white;
box-shadow:none;
}

/* Set default colour for inactive navigation items in inverse bar */
.navbar-inverse .navbar-nav > li > a
{
  background:#222222;
  color:white;
}

/* Set hover colour for inactive navigation items in inverse bar */
.navbar-inverse .navbar-nav > li > a:hover
{
  background:#333333;
  color:white;
}

/* Set default colour for active navigation items in inverse bar */
.navbar-inverse .navbar-nav > li.active > a
{
  background:#555555;
  color:white;
}

/* Set hover colour for active navigation items in inverse bar */
.navbar-inverse .navbar-nav > li.active > a:hover
{
  background:#999999;
  color:white;
}

/* Set default colour for inactive navigation items in default bar */
.navbar-default .navbar-nav > li > a
{
  background:#222222;
  color:white;
}

/* Set hover colour for inactive navigation items in default bar */
.navbar-default .navbar-nav > li > a:hover
{
  background:#333333;
  color:white;
}

/* Set default colour for active navigation items in default bar */
.navbar-default .navbar-nav > li.active > a
{
  background:#555555;
  color:white;
}

/* Set hover colour for active navigation items in default bar */
.navbar-default .navbar-nav > li.active > a:hover
{
  background:#999999;
  color:white;
}

/* Align figure text to centre */
figure
{
  text-align:center;
}

/* Align figure images to centre */
figure img
{
  margin:0 auto;
}

/* Change size and colour of glyph icons */
span.glyphicon
{
  font-size:6em;
  color:#222222;
}

/* Make the carousel images centre and take up the whole carousel */
.carousel > .carousel-inner > .item > img
{
  margin:0 auto;
  width:100%;
}

/* Lift the arrows a little higher to vertical middle and dim */
.carousel-control > .icon-prev, .carousel-control > .icon-next, .carousel-control > .glyphicon-chevron-left, .carousel-control > .glyphicon-chevron-right
{
  top:40%;
  opacity:0.5;
}

/* Remove the awful background gradient */
.carousel-control.right, .carousel-control.left
{
  background-image:none;
}

/* Take the right arrow closer to the edge */
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right
{
  right:20%;
}

/* Take the left arrow closer to the edge */
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left
{
  left:20%;
}