Skip to content

Instantly share code, notes, and snippets.

@MagicJoseph
Last active August 29, 2015 14:06
Show Gist options
  • Save MagicJoseph/cae3ad4c9cd6f9076165 to your computer and use it in GitHub Desktop.
Save MagicJoseph/cae3ad4c9cd6f9076165 to your computer and use it in GitHub Desktop.
funtime-1.1.css
/*==========BASE CSS WITH BASIC RESET==========*/
/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*BASIC STYLES*/
body {
background: #ededed;
font: 14px/21px'PT Sans', sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*TYPOGRAPHY*/
h1, h2, h3, h4, h5, h6 {
color: #181818;
font-family:'PT Sans', sans-serif;
font-weight: normal;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-wcol-7: inherit;
}
h1 {
font-size: 46px;
line-height: 50px;
margin-bottom: 14px;
}
h2 {
font-size: 34px;
line-height: 40px;
margin-bottom: 10px;
}
h3 {
font-size: 28px;
line-height: 34px;
margin-bottom: 8px;
}
h4 {
font-size: 21px;
line-height: 30px;
margin-bottom: 4px;
}
h5 {
font-size: 17px;
line-height: 24px;
}
h6 {
font-size: 14px;
line-height: 21px;
}
.subheader {
color: #777;
}
p {
margin: 0 0 20px 0;
}
p img {
margin: 0;
}
em {
font-style: italic;
}
strong {
font-wcol-7: bold;
color: #333;
}
small {
font-size: 80%;
}
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
margin: 1.4em 0;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(221,221,221)),
color-stop(0.5, rgb(255,255,255))
);
background-image: -moz-linear-gradient(
center top,
rgb(221,221,221) 50%,
rgb(255,255,255) 50%
);
}
/*Blockquotes*/
blockquote, blockquote p {
font-size: 17px;
line-hcol-7: 24px;
color: #777;
font-style: italic;
}
blockquote {
margin: 0 0 20px;
padding: 9px 20px 0 19px;
border-left: 1px solid #ddd;
}
blockquote cite {
display: block;
font-size: 12px;
color: #555;
}
blockquote cite:before {
concol-10t:"\2014 \0020";
}
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
color: #555;
}
hr {
border: solid #ddd;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 30px;
hcol-7: 0;
}
/*Links*/
a, a:visited {
color: #333;
text-decoration: none;
outline: 0;
}
a:hover, a:focus {
color: #000;
}
p a, p a:visited {
line-height: inherit;
}
/*Lists*/
ul, ol {
margin-bottom: 20px;
}
ul {
list-style: none outside;
}
ol {
list-style: decimal;
}
ol, ul.square, ul.circle, ul.disc {
margin-left: 30px;
}
ul.square {
list-style: square outside;
}
ul.circle {
list-style: circle outside;
}
ul.disc {
list-style: disc outside;
}
ul ul, ul ol, ol ol, ol ul {
margin: 4px 0 5px 30px;
font-size: 90%;
}
ul ul li, ul ol li, ol ol li, ol ul li {
margin-bottom: 6px;
}
li {
line-height: 18px;
margin-bottom: 12px;
}
ul.large li {
line-height: 21px;
}
li p {
line-height: 21px;
}
/*Buttons*/
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover, .btn:focus {
color: #333;
text-decoration: none;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
}
/*Button sizes*/
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-md {
padding: 7px 14px;
font-size: 16px;
line-height: 1.33;
border-radius: 5px;
}
.btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
}
/*Buttons colors*/
.btn-green {
-moz-box-shadow:inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25);
-webkit-box-shadow:inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow:inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25);
background-color:#78a732;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 20px !important;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
text-indent:0;
border: 1px solid #6a932e;
color: #fff !important;
text-shadow: 0px 2px 3px #6a932e;
transition: all ease 0.25s;
}
.btn-green:hover {
background-color: #6a932e;
border: 1px solid #759844;
}
.btn-green:active {
position:relative;
top:1px;
}
/*
* If you want to auto margin your button please use following classes:
* .btn-block, .auto-margin
* You can use inline style (width) or the following classes
*/
.btn-250 {
width: 250px;
}
.btn-200 {
width: 200px;
}
.btn-150 {
width: 150px;
}
.btn-125 {
width: 125px;
}
.btn-100 {
width: 100px;
}
/*Forms*/
form {
margin-bottom: 20px;
}
fieldset {
margin-bottom: 20px;
}
.form-row {
margin-bottom:10px;
}
.form-row > label {
display: inline-block;
font-size:14px;
color:#58585a;
font-weight: normal !important;
}
.form-row > label > span {
color:#78a732;
}
.form-row > .input-default {
border: 1px solid #fff;
padding: 10px 5px;
outline: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font: 13px'PT Sans', sans-serif;
color: #777;
margin: 0;
width: 100%;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
position: relative;
z-index: 1;
-moz-box-shadow:inset 0px 2px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:inset 0px 2px 3px rgba(0, 0, 0, 0.25);
box-shadow:inset 0px 2px 3px rgba(0, 0, 0, 0.25);
}
.form-row > .input-default:focus {
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
}
.input-error {
border: 1px solid #e74c3c !important;
-webkit-transition: box-shadow ease 0.7s;
-moz-transition: box-shadow ease 0.7s;
-o-transition: box-shadow ease 0.7s;
transition: box-shadow ease 0.7s;
}
.error-info {
display: inline-block;
float: right;
font-style: italic;
font-size:13px;
margin: 0;
color: #c0392b;
}
select {
padding: 0;
}
textarea {
min-height: 60px;
}
label, legend {
display: block;
font-weight: bold;
font-size: 13px;
}
select {
width: 220px;
}
input[type="checkbox"] {
display: inline;
}
label span, legend span {
font-weight: normal;
font-size: 13px;
color: #444;
}
/*HELPERS*/
/*Margins*/
.remove-bottom {
margin-bottom: 0 !important;
}
.half-top {
margin-top: 10px !important;
}
.add-top {
margin-top: 20px !important;
}
.half-bottom {
margin-bottom: 10px !important;
}
.add-bottom {
margin-bottom: 20px !important;
}
.add-right {
margin-right:10px;
}
.add-left {
margin-left:10px;
}
.auto-margin {
margin:0 auto;
}
/*Floating and position*/
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.inline-block {
display: inline-block;
}
.block {
display: block;
}
.table {
display: table;
}
/*Text formating*/
.lead {
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
color:#58585a;
line-height: 28px;
margin-bottom: 10px;
}
.lead > span {
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color:#a8a8a8;
line-height: 25px;
margin-bottom: 5px;
}
.lead-sub {
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
color:#58585a;
line-height: 24px;
margin-bottom: 10px;
}
.lead-sub >span {
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
color:#a8a8a8;
line-height: 25px;
margin-bottom: 10px;
}
.title {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color:#58585a;
line-height: 20px;
margin-bottom: 10px;
}
.ad {
font-size: 42px;
font-weight: 700;
text-transform: uppercase;
color:#78a732;
line-height: 42px;
margin-bottom: 10px;
}
.ad > span {
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color:#a8a8a8;
line-height: 25px;
margin-bottom: 10px;
}
.important {
color:#cbcbcb;
font-size:21px;
font-weight:bold;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
/*Images */
.img-responsive {
max-width: 100%;
height: auto;
display: block;
}
.img-circle {
border-radius: 50%;
}
.img-rounded {
border-radius: 6px;
}
.circle {
width: 80px;
height: 80px;
background-color:#78a732;
border-radius: 50%;
-webkit-border-radius: 50%;
border: solid 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.circle img {
max-width:100%;
height:auto;
display:block;
margin: 0 auto;
}
.sm-circle {
width: 30px;
height: 30px;
background-color:#78a732;
border-radius: 50%;
-webkit-border-radius: 50%;
border: solid 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.sm-circle img {
max-width:100%;
height:auto;
display:block;
margin: 0 auto;
}
/*
*Funtime 1.1 Grid System (Inspired by Bootstrap www.getbootstrap.com)
*Copyright 2014 Swiftway.net
*Made by Giuseppe Cinquemani
*Try jsfiddle.net http://jsfiddle.net/WLa6K/
*/
.container {
position: relative;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.container:before, .container:after {
display: table;
content:" ";
}
.container:after {
clear: both;
}
.row {
margin-right: -15px;
margin-left: -15px;
margin-bottom: 20px;
}
.row:before, .row:after {
display: table;
content:" ";
}
.row:after {
clear: both;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {
float: left;
}
.col-1 {
width: 8.333333333333332%;
}
.col-2 {
width: 16.666666666666664%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333333333333%;
}
.col-5 {
width: 41.66666666666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.333333333333336%;
}
.col-8 {
width: 66.66666666666666%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333333333334%;
}
.col-11 {
width: 91.66666666666666%;
}
.col-12 {
width: 100%;
}
@media only screen and (max-width: 767px) {
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {
float: none;
}
.col-1 {
width: 100%;
}
.col-2 {
width: 100%;
}
.col-3 {
width: 100%;
}
.col-4 {
width: 100%;
}
.col-5 {
width: 100%;
}
.col-6 {
width: 100%;
}
.col-7 {
width: 100%;
}
.col-8 {
width: 100%;
}
.col-9 {
width: 100%;
}
.col-10 {
width: 100%;
}
.col-11 {
width: 100%;
}
.col-12 {
width: 100%;
}
.hide-sm {
display: none;
visibility:hidden;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {
float: none;
}
.col-1 {
width: 100%;
}
.col-2 {
width: 100%;
}
.col-3 {
width: 100%;
}
.col-4 {
width: 100%;
}
.col-5 {
width: 100%;
}
.col-6 {
width: 100%;
}
.col-7 {
width: 100%;
}
.col-8 {
width: 100%;
}
.col-9 {
width: 100%;
}
.col-10 {
width: 100%;
}
.col-11 {
width: 100%;
}
.col-12 {
width: 100%;
}
.hide-sm {
display: none;
visibility:hidden;
}
}
@media (min-width: 768px) {
.container {
max-width: 750px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {
float: left;
}
.col-1 {
width: 8.333333333333332%;
}
.col-2 {
width: 16.666666666666664%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333333333333%;
}
.col-5 {
width: 41.66666666666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.333333333333336%;
}
.col-8 {
width: 66.66666666666666%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333333333334%;
}
.col-11 {
width: 91.66666666666666%;
}
.col-12 {
width: 100%;
}
}
@media (min-width: 992px) {
.container {
max-width: 970px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {
float: left;
}
.col-1 {
width: 8.333333333333332%;
}
.col-2 {
width: 16.666666666666664%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333333333333%;
}
.col-5 {
width: 41.66666666666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.333333333333336%;
}
.col-8 {
width: 66.66666666666666%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333333333334%;
}
.col-11 {
width: 91.66666666666666%;
}
.col-12 {
width: 100%;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {
float: left;
}
.col-1 {
width: 8.333333333333332%;
}
.col-2 {
width: 16.666666666666664%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333333333333%;
}
.col-5 {
width: 41.66666666666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.333333333333336%;
}
.col-8 {
width: 66.66666666666666%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333333333334%;
}
.col-11 {
width: 91.66666666666666%;
}
.col-12 {
width: 100%;
}
}
/*SITE STYLES*/
body {
margin:0;
font-family:'Open Sans', sans-serif;
font-size:14px;
background:#ecf0f1;
}
.showcase {
text-align: center;
color:#ecf0f1;
font-weight: bold;
padding:60px 0;
}
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid</title>
<link rel="stylesheet" href="funtime-1.1.css" />
<link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
<div class="col-1 cols">
<div class="showcase" style="background:#2980b9">col-1</div>
</div>
</div>
<div class="row">
<div class="col-2 cols">
<div class="showcase" style="background:#3498db">col-2</div>
</div>
<div class="col-2 cols">
<div class="showcase" style="background:#3498db">col-2</div>
</div>
<div class="col-2 cols">
<div class="showcase" style="background:#3498db">col-2</div>
</div>
<div class="col-2 cols">
<div class="showcase" style="background:#3498db">col-2</div>
</div>
<div class="col-2 cols">
<div class="showcase" style="background:#3498db">col-2</div>
</div>
<div class="col-2 cols">
<div class="showcase" style="background:#3498db">col-2</div>
</div>
</div>
<div class="row">
<div class="col-3 cols">
<div class="showcase" style="background:#8e44ad">col-3</div>
</div>
<div class="col-3 cols">
<div class="showcase" style="background:#8e44ad">col-3</div>
</div>
<div class="col-3 cols">
<div class="showcase" style="background:#8e44ad">col-3</div>
</div>
<div class="col-3 cols">
<div class="showcase" style="background:#8e44ad">col-3</div>
</div>
</div>
<div class="row">
<div class="col-4 cols">
<div class="showcase" style="background:#9b59b6">col-4</div>
</div>
<div class="col-4 cols">
<div class="showcase" style="background:#9b59b6">col-4</div>
</div>
<div class="col-4 cols">
<div class="showcase" style="background:#9b59b6">col-4</div>
</div>
</div>
<div class="row">
<div class="col-6 cols">
<div class="showcase" style="background:#2c3e50">col-6</div>
</div>
<div class="col-6 cols">
<div class="showcase" style="background:#2c3e50">col-6</div>
</div>
</div>
<div class="row">
<div class="col-12 cols">
<div class="showcase" style="background:#34495e">col-12</div>
</div>
</div>
</div>
</body>
</html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid</title>
<link rel="stylesheet" href="funtime-1.1.css" />
<link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 cols">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cum laboriosam tenetur impedit omnis maiores.</p>
</div>
<div class="col-8 cols">
<div class="row">
<div class="col-4 cols">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus est, impedit modi fugiat odio, cumque, aperiam iure aliquid ea veniam nam officia soluta reiciendis, cupiditate neque. Aspernatur, eligendi nesciunt quae.</p>
</div>
<div class="col-4 cols">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptate ad nemo sed minima, quisquam a facere vitae assumenda ducimus non velit minus, facilis, aspernatur et, nam eius omnis.</p>
</div>
<div class="col-4 cols">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptate ad nemo sed minima, quisquam a facere vitae assumenda ducimus non velit minus, facilis, aspernatur et, nam eius omnis.</p>
</div>
</div>
</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment