Skip to content

Instantly share code, notes, and snippets.

@benjaminparry

benjaminparry/SassMeister-input.scss

Created January 1, 2015 19:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save benjaminparry/8b771dc13770d0858f60 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save benjaminparry/8b771dc13770d0858f60 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
/*!
* Manhattan - A clean, lightweight and customisable CSS grid.
* Version: Development 1.0 alpha
* Url: http://www.adchsm.me/manhattan/
* Author: Adam Charles Smith
* Author url: http://www.adchsm.me/
* License: MIT
* License url: http://www.adchsm.me/manhattan/license.txt
*/
// ---------------
// Manhattan Index
// 001 - Variables
// 002 - Setup
// 003 - Containers
// 004 - Row
// 005 - Columns
// 006 - Clears
// ---------------
// 001 - Variables
$gutter: 15px;
$container-width: 1200px;
$break-point-sm: 600px;
$break-point-md: 900px;
$break-point-lg: 1200px;
$break-point-xl: 1500px;
// -----------
// 002 - Setup
html, body, [mhtn] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
// ----------------
// 003 - Containers
[mhtn*=container] {
margin-left: auto;
margin-right: auto;
max-width: $container-width;
padding-left: $gutter;
padding-right: $gutter;
// The flex container is full width with padding
&[mhtn*=flex] {
max-width: none;
}
// The edge container is full width without padding
&[mhtn*=edge] {
max-width: none;
overflow: hidden;
padding-left: 0;
padding-right: 0;
}
}
// ----------
// 004 - Rows
[mhtn*=row] {
margin-left: -$gutter;
margin-right: -$gutter;
// Clear
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// -------------
// 005 - Columns
[mhtn*=col] {
padding-left: $gutter;
padding-right: $gutter;
float: left;
}
// Change float direction for rtl languages, add dir="rtl" to your html element
html[dir=rtl] [mhtn*=col] {
float: right;
}
// Extra small screens
[mhtn*=xs-10] {
width: 10%;
}
[mhtn*=xs-20] {
width: 20%;
}
[mhtn*=xs-30] {
width: 30%;
}
[mhtn*=xs-40] {
width: 40%;
}
[mhtn*=xs-50] {
width: 50%;
}
[mhtn*=xs-60] {
width: 60%;
}
[mhtn*=xs-70] {
width: 70%;
}
[mhtn*=xs-80] {
width: 80%;
}
[mhtn*=xs-90] {
width: 90%;
}
[mhtn*=xs-100] {
width: 100%;
}
[mhtn*=xs-33] {
width: 33.33%;
}
[mhtn*=xs-66] {
width: 66.67%;
}
[mhtn*=xs-25] {
width: 25%;
}
[mhtn*=xs-75] {
width: 75%;
}
// Small screens
@media ( min-width: $break-point-sm ) {
[mhtn*=sm-10] {
width: 10%;
}
[mhtn*=sm-20] {
width: 20%;
}
[mhtn*=sm-30] {
width: 30%;
}
[mhtn*=sm-40] {
width: 40%;
}
[mhtn*=sm-50] {
width: 50%;
}
[mhtn*=sm-60] {
width: 60%;
}
[mhtn*=sm-70] {
width: 70%;
}
[mhtn*=sm-80] {
width: 80%;
}
[mhtn*=sm-90] {
width: 90%;
}
[mhtn*=sm-100] {
width: 100%;
}
[mhtn*=sm-33] {
width: 33.33%;
}
[mhtn*=sm-66] {
width: 66.67%;
}
[mhtn*=sm-25] {
width: 25%;
}
[mhtn*=sm-75] {
width: 75%;
}
}
// Medium screens
@media ( min-width: $break-point-md ) {
[mhtn*=md-10] {
width: 10%;
}
[mhtn*=md-20] {
width: 20%;
}
[mhtn*=md-30] {
width: 30%;
}
[mhtn*=md-40] {
width: 40%;
}
[mhtn*=md-50] {
width: 50%;
}
[mhtn*=md-60] {
width: 60%;
}
[mhtn*=md-70] {
width: 70%;
}
[mhtn*=md-80] {
width: 80%;
}
[mhtn*=md-90] {
width: 90%;
}
[mhtn*=md-100] {
width: 100%;
}
[mhtn*=md-33] {
width: 33.33%;
}
[mhtn*=md-66] {
width: 66.67%;
}
[mhtn*=md-25] {
width: 25%;
}
[mhtn*=md-75] {
width: 75%;
}
}
// Large screens
@media ( min-width: $break-point-lg ) {
[mhtn*=lg-10] {
width: 10%;
}
[mhtn*=lg-20] {
width: 20%;
}
[mhtn*=lg-30] {
width: 30%;
}
[mhtn*=lg-40] {
width: 40%;
}
[mhtn*=lg-50] {
width: 50%;
}
[mhtn*=lg-60] {
width: 60%;
}
[mhtn*=lg-70] {
width: 70%;
}
[mhtn*=lg-80] {
width: 80%;
}
[mhtn*=lg-90] {
width: 90%;
}
[mhtn*=lg-100] {
width: 100%;
}
[mhtn*=lg-33] {
width: 33.33%;
}
[mhtn*=lg-66] {
width: 66.67%;
}
[mhtn*=lg-25] {
width: 25%;
}
[mhtn*=lg-75] {
width: 75%;
}
}
// Extra large screens
@media ( min-width: $break-point-xl ) {
[mhtn*=xl-10] {
width: 10%;
}
[mhtn*=xl-20] {
width: 20%;
}
[mhtn*=xl-30] {
width: 30%;
}
[mhtn*=xl-40] {
width: 40%;
}
[mhtn*=xl-50] {
width: 50%;
}
[mhtn*=xl-60] {
width: 60%;
}
[mhtn*=xl-70] {
width: 70%;
}
[mhtn*=xl-80] {
width: 80%;
}
[mhtn*=xl-90] {
width: 90%;
}
[mhtn*=xl-100] {
width: 100%;
}
[mhtn*=xl-33] {
width: 33.33%;
}
[mhtn*=xl-66] {
width: 66.67%;
}
[mhtn*=xl-25] {
width: 25%;
}
[mhtn*=xl-75] {
width: 75%;
}
}
// ------------
// 006 - Clears
[mhtn*=clear] {
&:before,
&:after {
content: " ";
display: table;
}
// Extra small screens
&[mhtn*=xs] {
@media ( max-width: ( $break-point-sm - 1 ) ) {
&:after {
clear: both;
}
}
}
// Small screens
&[mhtn*=sm] {
@media ( min-width: $break-point-sm ) and ( max-width: ( $break-point-md - 1 ) ) {
&:after {
clear: both;
}
}
}
// Medium screens
&[mhtn*=md] {
@media ( min-width: $break-point-md ) and ( max-width: ( $break-point-lg - 1 ) ) {
&:after {
clear: both;
}
}
}
// Large screens
&[mhtn*=lg] {
@media ( min-width: $break-point-lg ) and ( max-width: ( $break-point-xl - 1 ) ) {
&:after {
clear: both;
}
}
}
// Extra large screens
&[mhtn*=xl] {
@media ( min-width: $break-point-xl ) {
&:after {
clear: both;
}
}
}
}
Raw
SassMeister-output.css
/*!
* Manhattan - A clean, lightweight and customisable CSS grid.
* Version: Development 1.0 alpha
* Url: http://www.adchsm.me/manhattan/
* Author: Adam Charles Smith
* Author url: http://www.adchsm.me/
* License: MIT
* License url: http://www.adchsm.me/manhattan/license.txt
*/
html, body, [mhtn] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
[mhtn*=container] {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
padding-left: 15px;
padding-right: 15px;
}
[mhtn*=container][mhtn*=flex] {
max-width: none;
}
[mhtn*=container][mhtn*=edge] {
max-width: none;
overflow: hidden;
padding-left: 0;
padding-right: 0;
}
[mhtn*=row] {
margin-left: -15px;
margin-right: -15px;
}
[mhtn*=row]:before, [mhtn*=row]:after {
content: " ";
display: table;
}
[mhtn*=row]:after {
clear: both;
}
[mhtn*=col] {
padding-left: 15px;
padding-right: 15px;
float: left;
}
html[dir=rtl] [mhtn*=col] {
float: right;
}
[mhtn*=xs-10] {
width: 10%;
}
[mhtn*=xs-20] {
width: 20%;
}
[mhtn*=xs-30] {
width: 30%;
}
[mhtn*=xs-40] {
width: 40%;
}
[mhtn*=xs-50] {
width: 50%;
}
[mhtn*=xs-60] {
width: 60%;
}
[mhtn*=xs-70] {
width: 70%;
}
[mhtn*=xs-80] {
width: 80%;
}
[mhtn*=xs-90] {
width: 90%;
}
[mhtn*=xs-100] {
width: 100%;
}
[mhtn*=xs-33] {
width: 33.33%;
}
[mhtn*=xs-66] {
width: 66.67%;
}
[mhtn*=xs-25] {
width: 25%;
}
[mhtn*=xs-75] {
width: 75%;
}
@media (min-width: 600px) {
[mhtn*=sm-10] {
width: 10%;
}
[mhtn*=sm-20] {
width: 20%;
}
[mhtn*=sm-30] {
width: 30%;
}
[mhtn*=sm-40] {
width: 40%;
}
[mhtn*=sm-50] {
width: 50%;
}
[mhtn*=sm-60] {
width: 60%;
}
[mhtn*=sm-70] {
width: 70%;
}
[mhtn*=sm-80] {
width: 80%;
}
[mhtn*=sm-90] {
width: 90%;
}
[mhtn*=sm-100] {
width: 100%;
}
[mhtn*=sm-33] {
width: 33.33%;
}
[mhtn*=sm-66] {
width: 66.67%;
}
[mhtn*=sm-25] {
width: 25%;
}
[mhtn*=sm-75] {
width: 75%;
}
}
@media (min-width: 900px) {
[mhtn*=md-10] {
width: 10%;
}
[mhtn*=md-20] {
width: 20%;
}
[mhtn*=md-30] {
width: 30%;
}
[mhtn*=md-40] {
width: 40%;
}
[mhtn*=md-50] {
width: 50%;
}
[mhtn*=md-60] {
width: 60%;
}
[mhtn*=md-70] {
width: 70%;
}
[mhtn*=md-80] {
width: 80%;
}
[mhtn*=md-90] {
width: 90%;
}
[mhtn*=md-100] {
width: 100%;
}
[mhtn*=md-33] {
width: 33.33%;
}
[mhtn*=md-66] {
width: 66.67%;
}
[mhtn*=md-25] {
width: 25%;
}
[mhtn*=md-75] {
width: 75%;
}
}
@media (min-width: 1200px) {
[mhtn*=lg-10] {
width: 10%;
}
[mhtn*=lg-20] {
width: 20%;
}
[mhtn*=lg-30] {
width: 30%;
}
[mhtn*=lg-40] {
width: 40%;
}
[mhtn*=lg-50] {
width: 50%;
}
[mhtn*=lg-60] {
width: 60%;
}
[mhtn*=lg-70] {
width: 70%;
}
[mhtn*=lg-80] {
width: 80%;
}
[mhtn*=lg-90] {
width: 90%;
}
[mhtn*=lg-100] {
width: 100%;
}
[mhtn*=lg-33] {
width: 33.33%;
}
[mhtn*=lg-66] {
width: 66.67%;
}
[mhtn*=lg-25] {
width: 25%;
}
[mhtn*=lg-75] {
width: 75%;
}
}
@media (min-width: 1500px) {
[mhtn*=xl-10] {
width: 10%;
}
[mhtn*=xl-20] {
width: 20%;
}
[mhtn*=xl-30] {
width: 30%;
}
[mhtn*=xl-40] {
width: 40%;
}
[mhtn*=xl-50] {
width: 50%;
}
[mhtn*=xl-60] {
width: 60%;
}
[mhtn*=xl-70] {
width: 70%;
}
[mhtn*=xl-80] {
width: 80%;
}
[mhtn*=xl-90] {
width: 90%;
}
[mhtn*=xl-100] {
width: 100%;
}
[mhtn*=xl-33] {
width: 33.33%;
}
[mhtn*=xl-66] {
width: 66.67%;
}
[mhtn*=xl-25] {
width: 25%;
}
[mhtn*=xl-75] {
width: 75%;
}
}
[mhtn*=clear]:before, [mhtn*=clear]:after {
content: " ";
display: table;
}
@media (max-width: 599px) {
[mhtn*=clear][mhtn*=xs]:after {
clear: both;
}
}
@media (min-width: 600px) and (max-width: 899px) {
[mhtn*=clear][mhtn*=sm]:after {
clear: both;
}
}
@media (min-width: 900px) and (max-width: 1199px) {
[mhtn*=clear][mhtn*=md]:after {
clear: both;
}
}
@media (min-width: 1200px) and (max-width: 1499px) {
[mhtn*=clear][mhtn*=lg]:after {
clear: both;
}
}
@media (min-width: 1500px) {
[mhtn*=clear][mhtn*=xl]:after {
clear: both;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment