12 column CSS
Bare-bones, stripped down 12-column site layout css. Mobile friendly.
All boxes in the page include the col-* styles, where * is between 1 and 12.
Any time the boxes are used they must be inside of a row.
Code:
<![CDATA[
/** Set up sizing to include borders */
* {
box-sizing:border-box
}
/** Clear styles after row */
.row::after {
content:"";clear:both;display:table
}
/** Float all left in row */
[class*=col-] {
float:left;min-height:1px
}
/** 12 column layout */
.col-1 {width:8.33%}
.col-2 {width:16.66%}
.col-3 {width:25%}
.col-4 {width:33.33%}
.col-5 {width:41.66%}
.col-6 {width:50%}
.col-7 {width:58.33%}
.col-8 {width:66.66%}
.col-9 {width:75%}
.col-10 {width:83.33%}
.col-11 {width:91.66%}
.col-12 {width:100%}
/** Mobile friendly */
@media screen and (orientation:portrait), screen and (max-width: 768px) {
[class*=col-] {width:100%}
}
]]>
Example
<![CDATA[
<div class="row">
<div class="col-12">
This div goes all the way across the row
</div>
<div class="col-6">
This div only goes half way across
</div>
<div class="col-6">
This div only goes half way across
</div>
<div class="col-4">
1/3rd of the row
</div>
<div class="col-4">
1/3rd of the row
</div>
<div class="col-4">
1/3rd of the row
</div>
</div>
]]>
Download
columns.css
columns-min.css
Minify Bash Script
Stripped down CSS minification script. For when you don't need all these
fancy CSS minification libraries/plugins/engines and you just want to
minify your CSS with a single line of code.
Code
<![CDATA[
#!/bin/bash
# Script takes input and output file inputs and minifies file
# Print program usage
usage(){
echo " "
echo "usage: minify [--help] [-f=input,--input-file=input] [-o=output,--output-file=output]"
echo "options:"
printf "\t-f=input\tinput file to be minified\n"
printf "\t-o=output\toutput file name\n"
printf "\t--help\t\tshow this message\n"
printf "\t--output-file=a\tLong form of -o\n"
printf "\t--input-file=b\tLong form of -f\n"
echo " "
exit
}
# If asking for help, print help message
if [ $1 = "--help" ]
then
usage
fi
# Set up input and output params
input=""
output=""
# Get iput and output files
for i in "$@"
do
case $i in
-f=*|--input-file=*)
input="${i#*=}"
;;
-o=*|--output-file=*)
output="${i#*=}"
;;
*)
usage
esac
done
# If wrong format show help message
if [ -z input -o -z output ]
then
usage
fi
# Do the actual minification
# If you just want to minify a file this is all the code you need
cat $input | \
sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' \
| tr -d '\t' | tr -d '\n' | tr -d '\r' | tr -s ' ' ' ' > $output
]]>
Example
<![CDATA[
# minify.sh --input-file=my.css --output-file=my.min.css
]]>
Download
minify.sh
Basic modular carousel
Very basic carousel that is modular and can easily be plugged int
existing pages with a simple set of includes.
Javascript
<![CDATA[
/**
* Carousel functionality.
* enables carousels on a given page.
*/
carousel = (function(){
/** Return all carousels from DOM */
var boxes = document.querySelectorAll('.carousel');
/** Initiate all carousels */
[].forEach.call(boxes, function (box) {
/** Define elements */
var next = box.querySelector('.next');
var prev = box.querySelector('.prev');
var items = box.querySelectorAll('.content li');
/** Define counters */
var amount = items.length;
var current = items[0];
var counter = 0;
/** Activate carousel */
box.classList.add('active');
/**
* This function handles navigation through
* the carousel. -1 is backwards, 1 is forwards,
* and 0 initiates.
*/
function navigate(direction) {
/** hide the old current list item */
current.classList.remove('current');
/** Set new position and update*/
counter = counter + direction;
if (direction === -1 && counter < 0) {
counter = amount - 1;
} else if (direction === 1 && !items[counter]) {
counter = 0;
}
/** Set current element */
current = items[counter];
current.classList.add('current');
}
/** Add event handlers to buttons */
next.addEventListener('click', function(ev) {
navigate(1);
});
prev.addEventListener('click', function(ev) {
navigate(-1);
});
/** Navigate to first element */
navigate(0);
});
})();
]]>
CSS
<![CDATA[
/** Carousel container */
.carousel {
position: relative;
overflow: hidden;
box-sizing:border-box;
}
/** Clear styles after carousel */
.carousel::after {
content:"";
clear:both;
display:table;
}
/** Carousel content */
.content {
margin: 0;
padding: 0;
width:33.33%;
display:block;
float:left;
min-height:1px;
}
.content li {
margin: 0;
padding: 0;
list-style: none;
z-index: 2;
}
.active li {
position: absolute;
top: 200px;
}
.active li.current {
top: 0px;
text-align: center;
width: 33.33%;
}
/** Carousel buttons */
.carousel button {
width:33.33%;
border:none;
float:left;
display:block;
}
.carousel button.prev::after {
content:"◀";
}
.carousel button.next::after {
content:"▶";
}
]]>
Example
<![CDATA[
<html>
<head>
<!-- include the stylesheet -->
<link rel="stylesheet" type="text/css" href="carousel.css">
</head>
<body>
<!-- demo area -->
<div style="width:200px;border-style:solid;">
<!-- Start carousel include -->
<div class="carousel">
<!-- Previous button -->
<button class="prev"></button>
<!-- Carousel content, in list format -->
<ol class="content">
<!-- Custom content goes here -->
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ol>
<!-- Next button -->
<button class="next"></button>
</div>
<!-- End carousel include -->
</div>
<!-- include the script -->
<script type="text/javascript" src="carousel.js"></script>
</body>
</html>
]]>
Download
carousel.css
carousel.min.css
carousel.js
carousel.min.js