/* ______ _ _____ _ _ | ____| | / ____| (_) | | | |__ | | _____ _____ ___| | __ _ __ _ __| | | __| | |/ _ \ \/ / _ \/ _ \ | |_ | '__| |/ _` | | | | | __/> < __/ __/ |__| | | | | (_| | |_| |_|\___/_/\_\___|\___|\_____|_| |_|\__,_| ## 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*/ /* ======================================= 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: 10px 0; } .row:before { display: table; content: " "; clear: both; } .row: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; } .flex1-12 { width: 8.33333%; } .flex2-12 { width: 16.66667%; } .flex3-12 { width: 25%; } .flex4-12 { width: 33.33333%; } .flex5-12 { width: 41.66667%; } .flex6-12 { width: 50%; } .flex7-12 { width: 58.33333%; } .flex8-12 { width: 66.66667%; } .flex9-12 { width: 75%; } .flex10-12 { width: 83.33333%; } .flex11-12 { width: 91.66667%; } .flex12-12 { width: 100%; } .off1-12 { margin-left: 8.33333%; } .off2-12 { margin-left: 16.66667%; } .off3-12 { margin-left: 25%; } .off4-12 { margin-left: 33.33333%; } .off5-12 { margin-left: 41.66667%; } .off6-12 { margin-left: 50%; } .off7-12 { margin-left: 58.33333%; } .off8-12 { margin-left: 66.66667%; } .off9-12 { margin-left: 75%; } .off10-12 { margin-left: 83.33333%; } .off11-12 { margin-left: 91.66667%; } .push1-12 { left: 8.33333%; } .push2-12 { left: 16.66667%; } .push3-12 { left: 25%; } .push4-12 { left: 33.33333%; } .push5-12 { left: 41.66667%; } .push6-12 { left: 50%; } .push7-12 { left: 58.33333%; } .push8-12 { left: 66.66667%; } .push9-12 { left: 75%; } .push10-12 { left: 83.33333%; } .push11-12 { left: 91.66667%; } .pull1-12 { right: 8.33333%; } .pull2-12 { right: 16.66667%; } .pull3-12 { right: 25%; } .pull4-12 { right: 33.33333%; } .pull5-12 { right: 41.66667%; } .pull6-12 { right: 50%; } .pull7-12 { right: 58.33333%; } .pull8-12 { right: 66.66667%; } .pull9-12 { right: 75%; } .pull10-12 { right: 83.33333%; } .pull11-12 { right: 91.66667%; } /* ======================================= DESKTOP (SMALL) ======================================= */ @media only screen and (min-width: 1024px) and (max-width: 1224px) { .main-container { width: 984px; } } /* ======================================= DESKTOP (STANDARD) ======================================= */ @media only screen and (min-width: 1224px) and (max-width: 1824px) { .main-container { width: 1176px; } } .show-phone { display: none !important; } .show-tablet { display: none !important; } .hide-desktop { display: none !important; } /* ======================================= DESKTOP (WIDESCREEN) ======================================= */ @media only screen and (min-width: 1824px) { .main-container { width: 1752px; } } /* ======================================= TABLET ======================================= */ @media only screen and (min-width: 768px) and (max-width: 1024px) { .tablet-flex1-12 { width: 8.33333%; } .tablet-flex2-12 { width: 16.66667%; } .tablet-flex3-12 { width: 25%; } .tablet-flex4-12 { width: 33.33333%; } .tablet-flex5-12 { width: 41.66667%; } .tablet-flex6-12 { width: 50%; } .tablet-flex7-12 { width: 58.33333%; } .tablet-flex8-12 { width: 66.66667%; } .tablet-flex9-12 { width: 75%; } .tablet-flex10-12 { width: 83.33333%; } .tablet-flex11-12 { width: 91.66667%; } .tablet-flex12-12 { width: 100%; } .tablet-off1-12 { margin-left: 8.33333%; } .tablet-off2-12 { margin-left: 16.66667%; } .tablet-off3-12 { margin-left: 25%; } .tablet-off4-12 { margin-left: 33.33333%; } .tablet-off5-12 { margin-left: 41.66667%; } .tablet-off6-12 { margin-left: 50%; } .tablet-off7-12 { margin-left: 58.33333%; } .tablet-off8-12 { margin-left: 66.66667%; } .tablet-off9-12 { margin-left: 75%; } .tablet-off10-12 { margin-left: 83.33333%; } .tablet-off11-12 { margin-left: 91.66667%; } .tablet-push1-12 { left: 8.33333%; } .tablet-push2-12 { left: 16.66667%; } .tablet-push3-12 { left: 25%; } .tablet-push4-12 { left: 33.33333%; } .tablet-push5-12 { left: 41.66667%; } .tablet-push6-12 { left: 50%; } .tablet-push7-12 { left: 58.33333%; } .tablet-push8-12 { left: 66.66667%; } .tablet-push9-12 { left: 75%; } .tablet-push10-12 { left: 83.33333%; } .tablet-push11-12 { left: 91.66667%; } .tablet-pull1-12 { right: 8.33333%; } .tablet-pull2-12 { right: 16.66667%; } .tablet-pull3-12 { right: 25%; } .tablet-pull4-12 { right: 33.33333%; } .tablet-pull5-12 { right: 41.66667%; } .tablet-pull6-12 { right: 50%; } .tablet-pull7-12 { right: 58.33333%; } .tablet-pull8-12 { right: 66.66667%; } .tablet-pull9-12 { right: 75%; } .tablet-pull10-12 { right: 83.33333%; } .tablet-pull11-12 { right: 91.66667%; } .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: 768px) and (max-width: 1024px) and (orientation: portrait) { .main-container { width: 738px; } } /* ======================================= TABLET (LANDSCAPE) ======================================= */ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .main-container { width: 984px; } } /* ======================================= PHONE ======================================= */ @media only screen and (max-width: 767px) { .phone-flex1-12 { width: 8.33333%; } .phone-flex2-12 { width: 16.66667%; } .phone-flex3-12 { width: 25%; } .phone-flex4-12 { width: 33.33333%; } .phone-flex5-12 { width: 41.66667%; } .phone-flex6-12 { width: 50%; } .phone-flex7-12 { width: 58.33333%; } .phone-flex8-12 { width: 66.66667%; } .phone-flex9-12 { width: 75%; } .phone-flex10-12 { width: 83.33333%; } .phone-flex11-12 { width: 91.66667%; } .phone-flex12-12 { width: 100%; } [class*="off"] { margin-left: 0; } .phone-off1-12 { margin-left: 8.33333%; } .phone-off2-12 { margin-left: 16.66667%; } .phone-off3-12 { margin-left: 25%; } .phone-off4-12 { margin-left: 33.33333%; } .phone-off5-12 { margin-left: 41.66667%; } .phone-off6-12 { margin-left: 50%; } .phone-off7-12 { margin-left: 58.33333%; } .phone-off8-12 { margin-left: 66.66667%; } .phone-off9-12 { margin-left: 75%; } .phone-off10-12 { margin-left: 83.33333%; } .phone-off11-12 { margin-left: 91.66667%; } [class*="push"] { left: 0; } .phone-push1-12 { left: 8.33333%; } .phone-push2-12 { left: 16.66667%; } .phone-push3-12 { left: 25%; } .phone-push4-12 { left: 33.33333%; } .phone-push5-12 { left: 41.66667%; } .phone-push6-12 { left: 50%; } .phone-push7-12 { left: 58.33333%; } .phone-push8-12 { left: 66.66667%; } .phone-push9-12 { left: 75%; } .phone-push10-12 { left: 83.33333%; } .phone-push11-12 { left: 91.66667%; } [class*="pull"] { right: 0; } .phone-pull1-12 { right: 8.33333%; } .phone-pull2-12 { right: 16.66667%; } .phone-pull3-12 { right: 25%; } .phone-pull4-12 { right: 33.33333%; } .phone-pull5-12 { right: 41.66667%; } .phone-pull6-12 { right: 50%; } .phone-pull7-12 { right: 58.33333%; } .phone-pull8-12 { right: 66.66667%; } .phone-pull9-12 { right: 75%; } .phone-pull10-12 { right: 83.33333%; } .phone-pull11-12 { right: 91.66667%; } .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: 767px) and (orientation: portrait) { .main-container { width: 308px; } } /* ======================================= PHONE (LANDSCAPE) ======================================= */ @media only screen and (max-width: 767px) and (orientation: landscape) { .main-container { width: 461px; } } /*# sourceMappingURL=flexeegrid.css.map */