Sunday, September 29, 2013

Theme 25 Responsive Grid Column Visualization

I have written a small CSS script that enables you to visualize the 12 column responsive grid in Oracle Application Express’s Theme 25. I used it during my presentation at KScope 13. You can download the CSS file here. Install the file on your webserver or upload it into your workspace and reference the file in your page template or page. You could reference the file directly from my server too using

<link rel="stylesheet" href="http://www.themes4apex.com/blog/grid_background.css" type="text/css">

in your template, or just as URL in the template or page’s CSS URLs property.

(I uploaded an enhanced version of the CSS after the suggestion from Patrick Wolf, to only show the grid columns when the developer clicks the "Show Grid" option in the Developer Toolbar. Thanks, Patrick. I should have thought of this myself.)


grid-background

themes4apex

8 comments:

  1. Hi Christian,

    very nice! BTW, did you have a look at the "JavaScript Debug Code" in "Grid Layout" of the page template? The existing JS code currently sets the CSS class "showGrid" if a developer clicks the "Show Grid" option in the Developer Toolbar. This has the advantage that the grid will only be visible if the developer actually wants to see it. So you might want to change your CSS file to apply your styles to that showGrid CSS class.

    Regards
    Patrick

    ReplyDelete
    Replies
    1. Hi Patrick,

      You are absolutely right. I changed the CSS selector to:

      #uBodyContainer>div>div.showGrid

      Like this, the grid columns only will be displayed with the "Show Grid"option enabled and for the content container only. Otherwise the header/tab design gets messed up.

      Thanks for your suggestion.

      Regards,
      Christian

      Delete
  2. Hi Christian,

    The images for the 1900px and de 2540px are the wrong size. I have recreated them:

    @media screen and (min-width: 1900px) {
    #uBodyContainer>div>div.showGrid {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ0AAAABCAMAAADzXFzcAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURf+ls////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANt2v0AAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjA76PVpAAAAE0lEQVQYV2NgBAOGwQZAjmJkBAAEUgAN8Twv+wAAAABJRU5ErkJggg==) !important;}
    }

    @media screen and (min-width: 2540px) {
    #uBodyContainer>div>div.showGrid {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMwAAAABCAMAAAClirGqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURf+ls////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANt2v0AAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjA76PVpAAAAE0lEQVQYV2NgBAOGIQ5AfmBkBAAFmwAN8XvDGwAAAABJRU5ErkJggg==) !important;}
    }

    ReplyDelete
    Replies
    1. Hi Joost,

      Thanks a lot. You are a lucky person to have such large displays available to work with. I'll update my CSS file as soon as possible.

      Cheers,
      Christian

      Delete
  3. Hi Christian,

    I am using regions with a background color. To see the grid through the background of these regions I added the following CSS:

    #uBodyContainer>div>div.showGrid section.uRegion{
    opacity:0.90;
    }

    Cheers,
    Joost

    ReplyDelete
  4. Hi Christian,

    In Application Express 4.2.3.00.08 the "Show Grid" button is only working when there is a region with a custom span.

    (In the page template there is a "Javascript Debug Code" section. This code is only apearing in the source of the page if there is a region with a custom span. Bug?)

    So to use the grid I have added the code to a custom javascript which is included in de page template

    $(function() { //On document read
    apex.jQuery(document)
    .on("apex-devbar-grid-debug-on", showGrid)
    .on("apex-devbar-grid-debug-off", hideGrid);
    })

    Cheers,
    Joost

    ReplyDelete