Javier Rodriguez

Menu

CSS 00 Includes

FRAMEWORK 2024-06-24

00-00 Framework (FRM)

Last Updated 2024-07-26

/****************************************************************************
*****************************************************************************
00 Includes (ICD) 
*****************************************************************************
****************************************************************************/

/*---------------------------------------------------------------------------
00-00 Framework (FRM) FRAMEWORK 2024-05-05
---------------------------------------------------------------------------*/
@import url("css/framework/frm-00-normalize.css");
@import url("css/framework/frm-01-general_helpers.css");
@import url("css/framework/frm-01-helpers-gss_and_flex.css");
@import url("css/framework/frm-01-helpers-absolute_positioning.css");
@import url("css/framework/frm-01-helpers-sws_grid.css");
@import url("css/framework/frm-02-plugins-swiper.css");
@import url("css/framework/frm-02-plugins-glightbox.css");

00-01 Theme Specific (THM)

Last Updated 2024-06-24

/*---------------------------------------------------------------------------
00-01 Theme Specific (THM) FRAMEWORK 2024-05-05
---------------------------------------------------------------------------*/
@import url("css/thm-includes.css");

00-02 Media Query Reference (MQR)

Last Updated 2024-07-30

/*---------------------------------------------------------------------------
00-02 Media Query Reference (MQR) FRAMEWORK 2024-07-26
---------------------------------------------------------------------------*/
/* Mobile SML DOWN (Test @ 320px Wide) */
@media (max-width: 379px) {  }

/* Mobile MED */
@media (min-width: 380px) {  }

/*  Mobile MED ONLY */
@media (min-width: 380px) and (max-width: 559px) { }

/* Mobile LRG */
@media (min-width: 560px) {  }

/*  Mobile LRG ONLY */
@media (min-width: 560px) and (max-width: 759px) { }

/* Mobile DOWN */
@media (max-width: 759px) {  }

/* Tablet */
@media (min-width: 760px) { }

/* Tablet LRG */
@media (min-width: 1000px) {  }

/* Desktop SML */
@media (min-width: 1300px) { }

/* Desktop MED */
@media (min-width: 1500px) { }

/* Desktop LRG */
@media (min-width: 1800px) { }

/* Desktop XL */
@media (min-width: 2200px) { }

Browser Emulated Device Settings

Use these emulated device settings in your browser dev tools to test for the standard framework device breakpoints. They represent the display size for each breakpoint. The height is intentionally shorter than the average device aspect ratio to ensure the best above-the-fold design/layouts for all devices targeted in each breakpoint.

NameWidth (px)Height (px)
00 Mobile SML 320320650
01 Mobile MED 380380800
02 Mobile LRG 560560860
03 Tablet 7607601000
04 Tablet LRG 10001000740
05 Desktop SML 13001300740
06 Desktop MED 15001500800
07 Desktop LRG 18001800900
08 Desktop XL 220022201100
Browser Emulated Device Names & Sizes