CSS Library

Last Updated: Feb. 18th 2022 at 6:49pm Tags: blog css

By creating a standard library for all my sites, I'm able to rapidly develop web sites and reduce repetitive work.

I like to create a library of styles which I can reuse across my websites.
In this article I’m going to post the library I’ve created.

By creating a standard library for all my sites, I’m able to rapidly develop web sites and reduce repetitive work. A few years ago we used to a “Base” css file, I’ve since modified this strategy.

Another advantage of having a library file, is the fact that you can share it between websites.
This will allow users to your many websites to have a cached version of the library css file.
This script is not yet backwards compatiable so it’s not ready for use on a CDN.

My library file is made up of only classes which store various styles for specific elements on a page.

Here are a few examples to try and make this clear.

/** float left **/
.left {float:left;}

/** message box **/
.msgbox {
    display:block;
    border-top:1px solid blue;
    border-bottom:1px solid blue;
    background-color:aqua;
    color:white;
}

You will notice the above classes will not effect your html, only elements that have a class specified to them.
The down side is if you are not familiar with the classes in your library, you may break some styles by adding a class which already exists in the library. Library is non-specific enough that you should easily be able to reset the styles if needed; however, it would just be easier to change the class name.

I recommend building your own library from scratch so you are familiar with the available classes, of course you are welcome to use mine for inspiration.

Modifying Library

I’m still working on this strategy.
I’d like to be able to update the library.css file with newer versions.
This means I’d have to put my modifications in yet another file.

I like to use a lot of style sheets so I can easily organize and find specific styles.
You’ll want to Compress and compact your css file if you use this strategy.

Nick Yeoman’s Library Style Sheet

/**
* Author: Nick Yeoman
* library.css
* v3.0
* Last Updated August 1, 2012
* Documentation: https://www.nickyeoman.com/blog/css/50-css-library
**/

.fullwidth{width:100%}
.hide {display:none;}
.highlight {background-color:yellow;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.left{float:left}

/*
* msg
* We want all messages to appear similar
* Only colours and/or image to show error level
*/

.msg-info,
.msg-error,
.msg-notice,
.msg-success{
  margin-top:15px;
  text-align: left;
  padding: 5px 20px 5px 45px;
  color:black;
}

.msg-error {
  background: #fff6bf url('images/error.gif') center no-repeat;
  border-top: 2px solid #cc553c;
  border-bottom: 2px solid #cc553c;
}

.msg-notice {
  background: #fff6bf url('images/notice.gif') center no-repeat;
  border-top: 2px solid #ffd324;
  border-bottom: 2px solid #ffd324;
}

/* end msg */

.right{float:right}

.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}

/** Blockquote Styles **/
blockquote .fancy {margin: 1em 3em;padding: .5em 1em;border-left: 5px solid #fce27c;  background-color: #f6ebc1;}
blockquote .fancy p {margin: 0;}

/** CSS3 Awesome buttons
Reference: https://www.zurb.com/blog_uploads/0000/0617/buttons-03.html
**/

.awesome, .awesome:visited {
  background: #222 url(..//images/alert-overlay.png) repeat-x;
  display: inline-block;
  padding: 5px 10px 6px;
  color: #fff;
  text-decoration: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer;
}

.awesome:hover { background-color: #111; color: #fff; }
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 11px; padding: ; }
.awesome, .awesome:visited,.medium.awesome, .medium.awesome:visited{ font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 14px; padding: 8px 14px 9px; }

.green.awesome, .green.awesome:visited{ background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }

/* NY added colours */
.silver.awesome, .silver.awesome:visited {background-color: #7d818c; }
.silver.awesome:hover {background-color: #676b74; }
/** End awesome buttons **/

/** SPEECH BUBBLES
https://nicolasgallagher.com/pure-css-speech-bubbles/demo/
**/

/* Bubble with a border rather than solid colour
------------------------------------------ */

.triangle-border {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  border:5px solid #0dc2b7;
  color:#333;
  background:#fff;
  font-size:12pt;

  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}

/* creates the larger triangle */
.triangle-border:before {
  content:"\00a0";
  display:block; /* reduce the damage in FF3.0 */
  position:absolute;
  bottom:-40px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  width:0;
  height:0;
  border:20px solid transparent;
  border-top-color:#0dc2b7;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"\00a0";
  display:block; /* reduce the damage in FF3.0 */
  position:absolute;
  bottom:-26px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  width:0;
  height:0;
  border:13px solid transparent;
  border-top-color:#fff;
}

p.site {
  font-size:12pt;
  font-weight:bold;
  position:relative;
  top:-20px;
  padding-left:10px;
}

p.site em {
  font-weight:normal;
  font-size:11pt;
}

p.site em a {
  text-decoration:none;
}

/* Clear fix, from html5 boilerplate */
.clearfix:before, .clearfix:after { content: ""; display: table; } /* all browsers except for IE6/7*/
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* ie 6/7 */

/* Joomla Pagination */
.pagination { background-color: #ebedee;height: 40px;line-height: 40px;width: 618px;margin-bottom: 1em;}
.pagination ul {padding: 0;}
.pagination ul li {border-right: 1px solid #d6d8d8;overflow: auto;line-height: 40px;display: block;width: 45px;float:left;margin: 0;text-align: center;}
.pagination .pagination-start,
.pagination .pagination-prev,
.pagination .pagination-next,
.pagination .pagination-end {width: 50px;}

.pagination a {color: #383838;text-decoration: none;height: 40px;line-height: 40px;border-left: 1px solid #fefefe;display:block;}
.pagination a:hover {text-decoration: underline;color: black;}
.pagination li:hover {background-color: #f2f4f5;}
.pagination span.pagenav {color: #3a93c7;}
.pagination .pagination-start span.pagenav,
.pagination .pagination-prev span.pagenav,
.pagination .pagination-next span.pagenav,
.pagination .pagination-end span.pagenav {color: #ccc;}

Reference

Comments

You need to login to comment.