bellmaker/app/less/text_display.less

Responsive CSS media query library for LESS and SASS, with device-agnostic and device-specific breakpoints

// tells you which one are you using
#basic_query {
    &:before {
        content: "Device-agnostic: ";
        font-weight: bold;
    }
    &:after {
        display: block;

        @media @da_baseline {
            content: "baseline - 100% liquid for screens at 320 to 480";
        }
        @media @da_2x_small {
            content: "2x-small - 100% liquid for screens at 480 to 640";
        }
        @media @da_x_small {
            content: "x small - 100% liquid for screens at 480 to 768";
        }
        @media @da_small {
            content: "small - 768 pixels for screens at 768 to 1024";
        }
        @media @da_medium {
            content: "medium - 960 pixels for screens at 1024 to 1280";
        }
        @media @da_large {
            content: "large - 1152 pixels for screens at 1280 to 1440";
        }
        @media @da_x_large {
            content: "x-large - 1296 pixels for screens at 1440 and up";
        }
    }
}
#device_sniffer {
    &:before {
        content: "Device-specific: ";
        font-weight: bold;
    }
    &:after {
        content: "none detected";
        display: block;

        @media @ds_ipad_early_landscape {
            content: "early iPad in landscape mode";
        }
        @media @ds_ipad_early_portrait {
            content: "early iPad in portrait mode";
        }
        @media @ds_ipad_retina_landscape {
            content: "retina iPad in landscape mode";
        }
        @media @ds_ipad_early_portrait {
            content: "retina iPad in portrait mode";
        }
        @media @ds_iphone_early_landscape {
            content: "early iPhone in landscape mode";
        }
        @media @ds_iphone_early_portrait {
            content: "early iPhone in portrait mode";
        }
        @media @ds_iphone_4_landscape {
            content: "iPhone 4(s) in landscape mode";
        }
        @media @ds_iphone_4_portrait {
            content: "iPhone 4(s) in portrait mode";
        }
        @media @ds_iphone_5_landscape {
            content: "iPhone 5(s)(c) in landscape mode";
        }
        @media @ds_iphone_5_portrait {
            content: "iPhone 5(s)(c) in portrait mode";
        }
        @media @ds_iphone_6_plus_landscape {
            content: "iPhone 6 Plus in landscape mode";
        }
        @media @ds_iphone_6_plus_portrait {
            content: "iPhone 6 Plus in portrait mode";
        }
        @media @ds_720p_hd2_landscape {
            content: "720p HD:2 in landscape mode";
        }
        @media @ds_720p_hd2_portrait {
            content: "720p HD:2 in portrait mode";
        }
        @media @ds_iphone_6_landscape {
            content: "iPhone 6 in landscape mode";
        }
        @media @ds_iphone_6_portrait {
            content: "iPhone 6 in portrait mode";
        }
        @media @ds_768_wxga2_landscape {
            content: "15:9 HD:2 in landscape mode";
        }
        @media @ds_768_wxga2_portrait {
            content: "768 HD:2 in portrait mode";
        }
        @media @ds_768_wxga24_landscape {
            content: "768 HD:2.4 in landscape mode";
        }
        @media @ds_768_wxga24_portrait {
            content: "768 HD:2.4 in portrait mode";
        }
        @media @ds_800_wxga2_landscape {
            content: "800 WXGA2 in landscape mode";
        }
        @media @ds_800_wxga2_portrait {
            content: "800 WXGA2 in portrait mode";
        }
        @media @ds_1080_hd3_landscape {
            content: "Full HD:3 in landscape mode";
        }
        @media @ds_1080_hd3_portrait {
            content: "Full HD:3 in portrait mode";
        }
        @media @ds_wqhd4_landscape {
            content: "WQHD:4 in landscape mode: LG ";
        }
        @media @ds_wqhd4_portrait {
            content: "WQHD:4 in portrait mode";
        }
    }
}
#aspect_ratio {
    &:before {
        content: "Aspect Ratio: ";
        font-weight: bold;
    }
    &:after {
        content: "unable to detect";
        display: block;

        @media @ds_ratio_3_4_landscape {
            content: "3:4 screen in landscape mode";
        }
        @media @ds_ratio_3_4_portrait {
            content: "3:4 screen in portrait mode";
        }
        @media @ds_ratio_5_8_landscape {
            content: "5:8 screen in landscape mode";
        }
        @media @ds_ratio_5_8_portrait {
            content: "5:8 screen in portrait mode";
        }
        @media @ds_ratio_3_5_landscape {
            content: "3:5 screen in landscape mode";
        }
        @media @ds_ratio_3_5_portrait {
            content: "3:5 screen in portrait mode";
        }
        @media @ds_ratio_2_3_landscape {
            content: "2:3 screen in landscape mode";
        }
        @media @ds_ratio_2_3_portrait {
            content: "2:3 screen in portrait mode";
        }
        @media @ds_ratio_9_16_landscape {
            content: "9:16 screen in landscape mode";
        }
        @media @ds_ratio_9_16_portrait {
            content: "9:16 screen in portrait mode";
        }
    }
}