Small responsive framework with grids and couple mixins. We've took the most used mixins from Bourbon and added 960px Grids to it. Very light, powerful and fast CSS Grid framework for you to use.
- Normalize.css
- CSS3 Mixins
- Compiled CSS file (from SCSS)
Set variables if needed. Otherwise, skip to the next step.
Create a file called setup.scss in 'partials' folder and declare it right before any DroidCSS files declaration. You main SCSS (probably, it will be application.scss) file will look like this:
@import 'partials/setup';
Import DroidCSS main file:
@import 'droidcss';
Create a new file 'fonts.scss' in 'partials' folder. Place font-face mixins in fonts.scss file. Then import all needed files in the main scss file:
@import 'droidcss/mixins';
@import 'partials/fonts';
@import 'droidcss/base';
On Mac it's easy to use it with:
Just drag&drop DroidCSS folder into the application, then point your html file to DroidCSS. For example:
<link href="droidcss/droidcss.css" rel="stylesheet">
All the variables can be found in partials/setup.scss file
Set to true if you use it in your project (default to false). If don't use it or don't know what is it about, leave it as is.
$asset-pipeline: false;
Include path to font files with trailing slash (default is '/assets/fonts/').
$fonts-path: '/assets/fonts/';
Breakpoints for mobile devices, tablets and desktop. To disable of the support of responsive layouts, just remove responsive.scss from style.scss. Here is explanation of the variables:
$media-mobile-max: breakpoint for mobile devices (default is '767px')
$media-tablet-min: breakpoint for tablet minimum width (default is '768px')
$media-tablet-max: breakpoint for tablet maximum width (default is '1024px')
$media-desktop-min: breakpoint for desktop (default is '1025px')
Media queries example:
$media-mobile-max: 767px;
$media-tablet-min: 768px;
$media-tablet-max: 1024px;
$media-desktop-min: 1025px;
Default site width. For 960.gs it's 960px
$grid-width: 960px;
Select 12 or 16 columns for layout (2 types of columns are supported with 960.gs). The default value is '12' columns.
$columns-count: 12;
Spacing between the columns (default is '1.04166666666%' which is 10px in 960.gs).
$gutter-width: 1.04166666666%;
Column width (default is 6). Don't mess with it. In 12 columns layout it's 60px (which is 6), in 16 columns layout it will be 40px (which is 4). Mixin will change it automaticly, just set column with to 12 or 16.
$column-width: 6;
Usage:
@include box-sizing(border-box);
CSS output result:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Usage:
@include font-face('MuseoSans', 'museosans-regular');
@include font-face('MuseoSans', 'museosans-bold-italic', '700', 'italic');
CSS output result:
@font-face {
font-family: "MuseoSans";
font-weight: 400;
font-style: normal;
src: url("/assets/fonts/museosans-regular.eot");
src: url("/assets/fonts/museosans-regular.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/museosans-regular.woff") format("woff"), url("/assets/fonts/museosans-regular.ttf") format("truetype"), url("/assets/fonts/museosans-regular.svg#MuseoSans") format("svg");
}
@font-face {
font-family: "MuseoSans";
font-weight: "700";
font-style: "italic";
src: url("/assets/fonts/museosans-bold-italic.eot");
src: url("/assets/fonts/museosans-bold-italic.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/museosans-bold-italic.woff") format("woff"), url("/assets/fonts/museosans-bold-italic.ttf") format("truetype"), url("/assets/fonts/museosans-bold-italic.svg#MuseoSans") format("svg");
}
Usage:
@include linear-gradient(#ff0000, #cc0000);
CSS output result:
background-color: white;
background-image: -webkit-linear-gradient(white, black);
background-image: linear-gradient(white, black);
Usage:
@include transition((opacity) (.2s) (linear));
CSS output result:
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
Usage:
@include size(100px, 200px);
CSS output result:
width: 100px;
height: 200px;
Usage:
@include square(100px);
CSS output result:
width: 100px;
height: 100px;
Creates a triangle. Arguments ($size, $color, $direction)
$direction may be:
- up
- down
- left
- right
Usage:
@include triangle(10px, #ccc, down);
CSS output result:
height: 0;
width: 0;
border-color: transparent;
border-style: solid;
border-width: 5px;
border-top-color: #ccc;
Usage:
@include placeholder(#ccc, italic);
CSS output result:
:-moz-placeholder { color: #ccc; font-style:italic;} // Firefox 4-18
::-moz-placeholder { color: #ccc; font-style:italic; } // Firefox 19+
:-ms-input-placeholder { color: #ccc; font-style:italic; } // Internet Explorer 10+
::-webkit-input-placeholder { color: #ccc; font-style:italic; } // Safari and Chrome
Default classes available in partials/defaults.scss:
- .hide, .hidden - hide block
- .fleft, .fright - float blocks left or right
- .text-left, .text-center, .text-right - align text left, centered or right
- .clear - clearing blocks
- .clearfix - clearfix for blocks
Licenced under MIT: http://opensource.org/licenses/MIT.
Feel free to contact us regarding DroidCSS via twitter or email.
Cheers, DroidLabs.