/* ______ _ _____ _ _ | ____| | / ____| (_) | | | |__ | | _____ _____ ___| | __ _ __ _ __| | | __| | |/ _ \ \/ / _ \/ _ \ | |_ | '__| |/ _` | | | | | __/> < __/ __/ |__| | | | | (_| | |_| |_|\___/_/\_\___|\___|\_____|_| |_|\__,_| ## Dynamically responsive Grid Layout ## * FlexeeGrid V1.0 * Copyright 2015, Alberto Camillo * www.albertocamillo.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 27/06/2015 */ /* ======================================= NOTES & SETUP ======================================= - FlexeeGrid is a Responsive Layout based on dynamic Grid System build with SASS. - Remember to add between and of the page - Modify the values above to obtain your custom FlexGrid Responsive Layout*/ $columns:12; //Number of grid columns $rowPadding: 10px 0; // Padding for the row container $flexPadding: 0px; // Padding for grid columns $stdDesktop: 1224; //(px) Standard Desktop screen size $wideDesktop: 1824; //(px) Wide Desktop screen size screen size $minTablet: 768; //(px) Standard Tablet Portrait screen size $maxTablet: 1024; //(px) Standard Tablet Landscape screen size $minPhone: 320; //(px) Standard Phone Portrait screen size $maxPhone: 480; //(px) Standard Phone Landscape screen size $externalMargin:4; //(percentage) Margin outside the main-container (if no necessary just put 0px) /* ======================================= CONTENT ======================================= - Main Setup - Desktop (Standard) - Desktop (Widescreen) - Tablet - Tablet (Portrait) - Tablet (Landscape) - Mobile - Mobile (Portrait) - Mobile (Landscape) /* ======================================= MAIN SETUP ======================================= */ :after, :before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;clear:both;} .main-container { margin: 0 auto; padding: 0 0 30px;} .row { width: 100%; overflow:hidden; padding:$rowPadding; &:before{display: table;content:" ";clear: both;} &:after{clear: both;}} [class*="flex"] { display: block; float: left; min-height: 1px;box-sizing: border-box;} .show { display: block; } .hide { display: none; } .centered { float: none; margin: 0 auto;} @for $i from 1 through $columns{ .#{flex}#{$i}#{-$columns}{ width: ($i * 100)/$columns * 1%; } } @for $i from 1 through $columns - 1{ .#{off}#{$i}#{-$columns}{ margin-left: ($i * 100)/$columns * 1%; } } @for $i from 1 through $columns - 1{ .#{push}#{$i}#{-$columns}{ left: ($i * 100)/$columns * 1%; } } @for $i from 1 through $columns - 1{ .#{pull}#{$i}#{-$columns}{ right: ($i * 100)/$columns * 1%; } } /* ======================================= DESKTOP (SMALL) ======================================= */ @media only screen and (min-width: $maxTablet+px) and (max-width: $stdDesktop+px){ .main-container { width: ceil($maxTablet - (($externalMargin * $maxTablet)/100))+px; } } /* ======================================= DESKTOP (STANDARD) ======================================= */ @media only screen and (min-width: $stdDesktop+px) and (max-width: $wideDesktop+px) { .main-container { width: ceil($stdDesktop - (($externalMargin * $stdDesktop)/100))+px; } } .show-phone { display: none !important; } .show-tablet { display: none !important; } .hide-desktop { display: none !important; } /* ======================================= DESKTOP (WIDESCREEN) ======================================= */ @media only screen and (min-width: $wideDesktop+px) { .main-container { width:ceil($wideDesktop - (($externalMargin * $wideDesktop)/100))+px; } } /* ======================================= TABLET ======================================= */ @media only screen and (min-width: $minTablet+px) and (max-width: $maxTablet+px) { @for $i from 1 through $columns{ .#{tablet-flex}#{$i}#{-$columns}{ width: ($i * 100)/$columns * 1%; } } @for $i from 1 through $columns - 1{ .#{tablet-off}#{$i}#{-$columns}{ margin-left: ($i * 100)/$columns * 1%; } } @for $i from 1 through $columns - 1{ .#{tablet-push}#{$i}#{-$columns}{ left: ($i * 100)/$columns * 1%; } } @for $i from 1 through $columns - 1{ .#{tablet-pull}#{$i}#{-$columns}{ right: ($i * 100)/$columns * 1%; } } .show-desktop { display: none !important; } .show-tablet { display: initial !important; } .hide-desktop { display: initial !important; } .hide-tablet { display: none !important; } } /* ======================================= TABLET (PORTRAIT) ======================================= */ @media only screen and (min-width: $minTablet+px) and (max-width: $maxTablet+px) and (orientation : portrait) { .main-container { width: ceil($minTablet - (($externalMargin * $minTablet)/100))+px; } } /* ======================================= TABLET (LANDSCAPE) ======================================= */ @media only screen and (min-width: $minTablet+px) and (max-width: $maxTablet+px) and (orientation : landscape) { .main-container { width: ceil($maxTablet - (($externalMargin * $maxTablet)/100))+px; } } /* ======================================= PHONE ======================================= */ @media only screen and (max-width: ($minTablet - 1)+px) { @for $i from 1 through $columns{ .#{phone-flex}#{$i}#{-$columns}{ width: ($i * 100)/$columns * 1%; } } [class*="off"] { margin-left: 0;} @for $i from 1 through $columns - 1{ .#{phone-off}#{$i}#{-$columns}{ margin-left: ($i * 100)/$columns * 1%; } } [class*="push"] { left: 0; } @for $i from 1 through $columns - 1{ .#{phone-push}#{$i}#{-$columns}{ left: ($i * 100)/$columns * 1%; } } [class*="pull"] { right: 0; } @for $i from 1 through $columns - 1{ .#{phone-pull}#{$i}#{-$columns}{ right: ($i * 100)/$columns * 1%; } } .show-desktop { display: none !important; } .show-phone { display: initial !important; } .hide-desktop { display: initial !important; } .hide-phone { display: none !important; } } /* ======================================= PHONE (PORTRAIT) ======================================= */ @media only screen and (max-width: ($minTablet - 1)+px) and (orientation : portrait) { .main-container { width: ceil($minPhone - (($externalMargin * $minPhone)/100))+px; } } /* ======================================= PHONE (LANDSCAPE) ======================================= */ @media only screen and (max-width: ($minTablet - 1)+px) and (orientation : landscape) { .main-container { width: ceil($maxPhone - (($externalMargin * $maxPhone)/100))+px; } }