Code

Style Faster with Core CSS

by Jacob Abshire on February 14, 2014

Whether we know it or not, we all love stylesheets because they make our webpages easier on the eyes. Developers of Cascading Style Sheets (CSS), however, can grow tired of recreating the same style definitions again and again. I sure did. That’s why I developed Core CSS.

Core CSS is a base of definitions for commonly used styles. So when you are working in an HTML editor, even a WYSIWYG, you can utilize these definitions with simple, easy to remember, class names. Core CSS is a product of styling with the big picture in mind. A good CSS developer considers all necessary styles before defining the first. By doing so, he combines and groups styles that are most used, making the footprint even smaller.

Core CSS gives you the power to style without editing the stylesheet.

Like the popular HTML reset which assigns a style to multiple HTML tags, Core CSS assigns multiple style definitions to a reusable class that can be applied to any tag. It’s like building the page with class names, rather than using single classes for each dom. This can be extremely useful when manipulating elements on the page with Javascript.

Here are a few sample definitions and their classes:

.block { display:block }
.inline { display:inline }
.hide { display:none;visibility:hidden }

.relative { position:relative }
.absolute { position:absolute }

.floatleft {float:left}
.floatright { float:right }
.clearleft { clear:left }
.clearright { clear:right }
.clear { clear:both }

.padding { padding:10px; }
.paddingtop { padding-top:10px; }
.paddingright { padding-right:10px; }
.paddingbottom { padding-bottom:10px; }
.paddingleft { padding-left:10px; }
.nopadding { padding:0 !important; }

Core CSS is minified and prefixed in case of class name conflicts. It covers a range of positioning styles and how the browser interprets those styles. It employs the CSS3 box-sizing to assure padding and margin are consistent among the browsers.

Core CSS is available for free on GitHub under the Open Source Initiative MIT license.

Start using Core CSS now.

A New Discipleship Resource

Creative Content for Christian Men

Instead of comments, I accept and encourage letters to the editor. If you want to write a letter to the editor, you can do so here.