Put the knife down and take a green herb, dude. (c) Ruffin Bailey 2001-2021

Tell you what, being an independent shop has its drawbacks. One is that it's hard to be good at design and zeroes and ones. There are certainly people great at both, but it's much fewer than those who are really good at just one or the other. That's nearly a truism.

That means it's taken me days to get my website looking presentable over and above my cheaping out and using a template for the site.

One of the biggest issues for me was trying to get a grid of application features to look good in both desktop and mobile modes. I've got a pretty common set of three features and an image for each. On the desktop, the bootstrap grid arrangement is simple enough:

Desc 1	Desc 2	Desc 3
Image 1	Image 2	Image 3

But when I go to mobile, I want the order to change fairly drastically.

What I want	What Bootstrap Does by Default when small viewpoint
Image 1	Desc 1
Desc 1	Desc 2
Image 2	Desc 3
Desc 2	Image 1

...

Probably makes more sense with numbers...

1	2	3
4	5	6

Changes into...

What I want	What Bootstrap Does by Default
4	1
1	2
5	3
2	4

...

That's kind of an extreme change.

First attempted solution

I wasted a lot of time trying bootstrap push and pull. Look at this answer, for instance.

So basically in a 3 column layout of any web page the "Main Body" appears at the "Center" and in "Mobile" view the "Main Body" appears at the "Top" of the page. This is mostly desired by everyone with 3 column layout.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

Look at the first col-sm-12 class. That means the next two divs end up on new rows, right? So I can count on pulling my images back a row or two, and pushing my descriptions to fit, right?

Wrong. After fiddling around a while, pushes seem to simply push off to the right of the viewable row. And this question pretty much confirms it.

Second solution

Since that question suggests that we can't push and pull, I figured I'd take one of these more complicated options. They boil down to...

Hide at different view "grid tiers"
Use JavaScript event handlers to catch resizing

The first makes more sense I think, though you end up having to duplicate code.

I ended up with code like what's below. What's important to note is that the first row is hidden-sm-down, so it's not visible in small or smaller tiers. Then I've got extra lines -- the description text -- repeated in the next row in divs that are hidden-md-up.

It does get the effect I want, even if it's not DRY.

<div class="row hidden-sm-down">
    <div class="feature-desc col-md-4 ">
        Tools to help you learn Markdown. <!--- <<< This'll be repeated -->
    </div>
    <div class="feature-desc col-md-4">
        Keyboard shortcuts once you're a pro. <!-- and this. -->
    </div>
    <div class="feature-desc col-md-4">
        Easy Actions make editing effortless. <!-- and this too. -->
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <img class="col-image" src="./resources/toolbar350x55.png" alt="toolbar showing a few of MarkUpDown's commands" />
        <div class="hidden-md-up"> <!-- \/\/\/ =====REPEATED!!!===== -->
            <ul><li>Tools to help you learn Markdown.</li></ul>
        </div>
    </div>
    <div class="col-md-4">
        <img class="col-image" src="./resources/keystrokes.gif" alt="Just a few of MarkUpDown's keystroke commands" />
        <div class="hidden-md-up"> <!-- \/\/\/ =====REPEATED!!!===== -->
            <ul><li>Keyboard shortcuts once you're a pro.</li></ul>
        </div>
    </div>
    <div class="col-md-4">
        <img class="col-image" src="./resources/clipboardUrlInsert.gif" alt="Animation of smart clipboard insertion with urls" />
        <div class="hidden-md-up"> <!-- \/\/\/ =====REPEATED!!!===== -->
            <ul><li>Easy Actions make editing effortless.</li></ul>
        </div>
    </div>
</div>

<div style="height:15px" class="row hidden-sm-down">
    &nbsp;
</div>

I don't like it, though I don't even know that it isn't what a bootstrap master would do to get the same effect. I do know that any idealistic setup seems to go completely out of the window once your use case gets complicated enough, whether with conventional code or with CSS.

Chartige

Here's a chart of the different "down" and "up" classes to hide your stuff, though it's from the version 4 alpha...

Extra small devices Portrait phones (<544px) Small devices Landscape phones (≥544px - <768px) Medium devices Tablets (≥768px - <992px) Large devices Desktops (≥992px - <1200px) Extra large devices Desktops (≥1200px)

.hidden-xs-down Hidden Visible Visible Visible Visible

.hidden-sm-down Hidden Hidden Visible Visible Visible

.hidden-md-down Hidden Hidden Hidden Visible Visible

.hidden-lg-down Hidden Hidden Hidden Hidden Visible

.hidden-xl-down Hidden Hidden Hidden Hidden Hidden

.hidden-xs-up Hidden Hidden Hidden Hidden Hidden

.hidden-sm-up Visible Hidden Hidden Hidden Hidden

.hidden-md-up Visible Visible Hidden Hidden Hidden

.hidden-lg-up Visible Visible Visible Hidden Hidden

.hidden-xl-up Visible Visible Visible Visible Hidden

Labels: coding, css, indie

<picture> <source media="(max-width: 500px)" srcset="./resources/mudSmall.png"> <source media="(max-width: 1000px)" srcset="./resources/mudMedium.png"> <source media="(min-width: 1001px)" srcset="./resources/mudLarge.png"> <img src="./resources/mudLarge.png" alt="Responsive screenshot of MarkUpDown"> </picture>

if ( $(".site-logo img").width(t / 2), $("br").not(".site-content-inner br").remove(), // <<< EDIT MADE HERE! -RUF $(".thumbnail-wrap, .thumbnail-frame").attr("style", ""), $(".photo-frame")[0] ) { // ...

<div class="survey" id="survey" style="min-height: 1008px;"> <div class="surveybox"> <noscript>&lt;style&gt;html{display:none;}&lt;/style&gt;&lt;meta http-equiv="refresh" content="0; url=https://survey.apple.com/efm/survey?s=3D3148E443305DE208D35D82693FAEBF74&amp;jsrequired=1"&gt;</noscript> <form name="PdcSurvey" action="https://survey.apple.com/efm/survey" onreset="return survey.OnReset();" onsubmit="return PdcProcessPage();" method="post" novalidate="">  <div class="survey-content" style="min-height: 960;"><div id="Q24_WRAPPER" class="question essay"> <a class="anchor" name="A24" id="A24"></a><label class="question-text" for="Q24">What could we have done better to improve your AppleCare support experience?</label> <div class="response-set"> ...

<!DOCTYPE html>
<html>
<head>
<style>
.circle{
width:12px;
height:12px;
border-radius:6px;
font-size:12px;
color:black;
line-height:12px;
text-align:right
}

.circle2{
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
text-align:center;
background:#000
}

</style>
</head>
<body>
<div
class="circle"
style="background:rgb(200,200,200);">
     Hello</div>

<div class="circle" style="background:green;">
Hello (without spacing out)</div>
<div class="circle2">Hello </div>
<div style="width: 100px;
height: 100px;
text-align: center;
color: #fff;
line-height: 100px;
font-size: 20px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
background-image: none;
background-attachment: scroll;

background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;

background-size: auto;
background-origin: padding-box;
background-clip: border-box;

background-color: rgb(0, 0, 0); ">Spam</div>
</body>
</html>

1 <html>
2
3 <head>
4 <title>Simplest (give or take) Colorbox</title>
5
6 <link media="screen" rel="stylesheet" href="./includes/colorbox.css" />
7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
8 
9 <script src="./includes/jquery.colorbox.js"></script>
10 <script>
11 // This is for colorbox support
12 function disFeedback(str) {
13 elmOut = document.getElementById("feedback");
14 var d = new Date();
15 <?php
16 if ($bDebug) {
17 echo "elmOut.innerHTML " .
18 "= elmOut.innerHTML + \"<br><br>\\n\" + " .
19 "d.getTime() + \"<br>\n\" + str;\n";
20 } else {
21 echo "elmOut.innerHTML = str;\n";
22 }
23 ?>
24 $.colorbox({width:"50%", inline:true, href:"#feedback"});
25 // alert('here');
26 }
27 </script>
28 </head>
29
30
31 <body>
32 This is some text.<br>
33 
34 <div style='display:none'>
35 <div id='feedback' style='padding:10px; background:#fff;'></div>
36 </div>
37
38 <a href="#" onClick="disFeedback('<b>test feedback</b>');return false;">test</a>
39 </body>
40
41 </html>
42

And here I was naive enough, coming back to web dev after a brief academic hiatus, to believe that the browsers had converged enough to think the design horrors of 2000 were over. No such.

If there's one thing I'd like to see implemented, it's this text-shadow CSS property that the w3c proposed quite some time ago. Here's a page at w3c with "Readable White Text" using the property. Below, I'll include the code that should do the same thing.

This should have a shadow. Without Safari, though, you're likely not seeing it -- or you're from THE FUTURE.

*sigh* Just for fun, here's what you should be seeing, taken from Safari on Windows:

A little bigger now for effect...

That's really a pretty nice effect.

Mozilla had a bug filed for its lack of support in 1999. With any luck, it appears it may have, within this weekend, finally gotten a patch. I tried the nightly build (2008042004) on my Mac, however, and no dice.

Here's the best workaround I can find for IE.

This should have a shadow. But only on IE, regardless of whether you're from THE FUTURE or not. Unless it's STEVE BALLMER'S FUTURE, where every browser is IE.

Not only does it stink visually, it inexplicably seems to require a style value for height. Here's a picture for the IE challenged.

And the code. Note the difference between using "text-shadow" and the "Direction" and "Strength" jive for the IE "filter".


<center>
<div style="background-color:blue;padding:10px;width:70%;text-align:left">
<h3 style="color:white; text-shadow: black 0.1em 0.1em 0.2em;">
This should have a shadow. Without Safari, though, you're likely not seeing it
-- or you're from THE FUTURE.
</h3>
</div>
</center>


<center>
<div style="background-color:blue;padding:10px;width:70%;text-align:left">
<h3 style="color:white;height:100px;filter:progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=225, Strength=4)">
This should have a shadow. But only on IE, regardless of whether you're from
THE FUTURE or not. Unless it's STEVE BALLMER'S FUTURE, where every browser is IE.
</h3>
</div>
</center>

EDIT: Some play in the search for a solution.
Better yet, works towards a possible patch for Firefox, with a test build.

Labels: browsers, css, html

First attempted solution

Second solution

Chartige

Landscape on iOS (iPhone 5 size)

Portrait on iOS (iPhone 5 size)

RapidWeaver Theme Removes ALL br Tags. Rly.

This should have a shadow. Without Safari, though, you're likely not seeing it -- or you're from THE FUTURE.

This should have a shadow. But only on IE, regardless of whether you're from THE FUTURE or not. Unless it's STEVE BALLMER'S FUTURE, where every browser is IE.