Databases
StackOverflow2013
Postsdbo
POCreating HTML Modules with consistant CSS & HTML
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating HTML Modules with consistant CSS & HTML
    primarykey
    data
    text
    <p>Here's a live <a href="http://jsfiddle.net/ex9CQ/1/" rel="nofollow noreferrer">example</a></p> <p>I am attempting to create <em>modules</em> whose markup and CSS never change (e.g. I can use the same module in an utilities, footer, header, etc. section), but I still want the freedom to increase/decrease the size of the module.</p> <p>Ideally, my CSS would be something like this:</p> <pre><code>article { base styles } article.sample1 { custom styles } article.sample2 { custom styles } </code></pre> <p>I'm able to adjust the size of the article.login module with this code:</p> <pre><code>section.utilities &gt; article </code></pre> <p>or</p> <pre><code>section.test &gt; article </code></pre> <ol> <li><p>Article Element (or alternative). I'm using the article element. Is there a better one? I poked around a little on the inter-tubes looking for custom elements (<a href="http://www.alistapart.com/articles/customdtds2/" rel="nofollow noreferrer">A List Apart</a>, <a href="http://happyworm.com/blog/tag/custom-tags/" rel="nofollow noreferrer">The Worm Hole</a>, and <a href="http://ajaxian.com/archives/adding-custom-tags-to-internet-explorer-the-official-way" rel="nofollow noreferrer">Ajaxian</a>). Should I stick with <em>article</em>, use a different one, or make a custom one?</p></li> <li><p>IE. I haven't been able to test this in IE. I think I have my bases covered with <a href="http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/" rel="nofollow noreferrer">inline-block</a> and <a href="https://stackoverflow.com/questions/2991623/make-background-size-work-in-ie/6353808#6353808">background-size</a>, but I'm not sure about <a href="http://www.quirksmode.org/css/contents.html" rel="nofollow noreferrer">child selectors</a>. Do you see any problems supporting this code?</p></li> <li><p>Lastly, is this approach a Bad Idea™? Ultimately, this would allow me to build modules/objects in PHP files which, I'm hoping, will result in rapid development and easy code management.</p></li> </ol> <p><strong>Update</strong></p> <p>I wanted to create a custom element (module), but found that to be impractical. The combination of the <a href="http://ejohn.org/blog/html-5-data-attributes/" rel="nofollow noreferrer">data attribute</a> and <a href="http://css.maxdesign.com.au/selectutorial/selectors_attribute.htm" rel="nofollow noreferrer">CSS attribute selectors</a>, provide me the tools treat these like custom elements.</p> <pre><code>&lt;article data-module="helloWorld" /&gt; </code></pre> <p>All modules can be referenced by </p> <pre><code>article[data-module] { ... } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USw0lf42
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIf you're using HTML5, whatever versions of IE that support it will also support CSS child selectors anyway.
      singulars
      1. POCreating HTML Modules with consistant CSS & HTML
      1. USBoltClock
    2. COI was under the impression that [HeadJS](http://headjs.com/), [Modernizr](http://www.modernizr.com/), [html5shim](http://code.google.com/p/html5shim/), and similar JS solutions added support for HTML5 elements to older versions of IE.
      singulars
      1. POCreating HTML Modules with consistant CSS & HTML
      1. USw0lf42
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload