1
\$\begingroup\$

When I am developing in Bootstrap, I need to make sure that what is on the screen looks good. Bootstrap have various cutoff points where the flow can change. So to help with the visual debugging, I have created this tool that just shows what the current screen is according to Bootstrap.

<cfscript>
sizes = [
        { "styleClass" : "d-block d-sm-none",           "name" : "Extra small", "look" : "warning"},
        { "styleClass" : "d-none d-sm-block d-md-none",     "name" : "Small", "look" : "info"},
        { "styleClass" : "d-none d-md-block d-lg-none",     "name" : "Medium", "look" : "success"},
        { "styleClass" : "d-none d-lg-block d-xl-none",     "name" : "Large", "look" : "primary"},
        { "styleClass" : "d-none d-xl-block",           "name" : "Extra large", "look" : "dark"}
    ];

sizes.each(function(item){
    writeoutput("<p class='#item.styleClass#'><span class='badge badge-#item.look#'>#item.name#</span></p>");
})
</cfscript>

Is there additional information that can/should be shown.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.