JSFiddle

  • description-list-3 #10 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <p>källa: http://maxdesign.com.au/articles/definition/</p>
    <dl class="border-around">
    	<dt>Green and Golden Bell Frog</dt>
    	<dd>Nisl ut aliquip ex ea commodo consequat</dd>
    	<dt>Bull ...</dt></dl>
  • description-list-2

    No-Library (pure JS), HTML, CSS, JavaScript

    <p>källa: http://maxdesign.com.au/articles/definition/</p>
    <dl class="background-image">
    	<dt>Green and Golden Bell Frog</dt>
    	<dd>Nisl ut aliquip ex ea commodo consequat</dd>
    	<dt>Bull ...</dt></dl>
  • description-list-1

    No-Library (pure JS), HTML, CSS, JavaScript

    <p>källa: http://maxdesign.com.au/articles/definition/</p>
    <dl class="margins-removed">
    	<dt>Green and Golden Bell Frog</dt>
    	<dd>Nisl ut aliquip ex ea commodo consequat</dd>
    	<dt>Bull ...</dt></dl>
  • sidlayout - simple - float left - 2 - text - better

    No-Library (pure JS), HTML, CSS, JavaScript

    <header>&lt;header&gt;</header>
    <section class="clearfix">
        <!-- wrapper to be able to set width in % -->
        <!-- and at the same time set padding or margin -->
        <!-- (left and right)-->
        <!-- on aside and article -->
        <div class="left-column">
            <aside>
                <h1>&lt;aside&gt; 1</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore ...</p></aside></div></!--></!--></!--></!--></section>
  • sidlayout - simple - float left - 2 - text

    No-Library (pure JS), HTML, CSS, JavaScript

    <header>&lt;header&gt;</header>
    <section class="clearfix">
        <aside class="left-column">
            <h1>&lt;aside&gt; 1</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore ...</p></aside></section>
  • sidlayout - simple - float left - 2

    No-Library (pure JS), HTML, CSS, JavaScript

    <header>&lt;header&gt;</header>
    <section class="clearfix">
    <aside>&lt;aside&gt;</aside>
    <article>&lt;article&gt;</article>
    <aside>&lt;aside&gt;</aside>
    </section>
    <footer>&lt;footer&gt;</footer>
  • sidlayout - simple - margin float 3 col procent - 2

    No-Library (pure JS), HTML, CSS, JavaScript

    <header>&lt;header&gt;</header>
    <aside class="left">&lt;aside&gt;</aside>
    <aside class="right">&lt;aside&gt;</aside>
    <article>&lt;article&gt;</article>
    <footer>&lt;footer&gt;</footer>
  • units-em-px

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Rubrik nivå 1</h1>
    <p>Text text text.</p>
    <h2>Rubrik nivå 2</h2>
    <p>Text text text. </p>
    <h3>Rubrik nivå 3</h3>
    <p>Text text text. </p>
    
    
  • form-input-invalid

    No-Library (pure JS), HTML, CSS, JavaScript

    
    <fieldset>
      <label for="email">Email:</label>
      <input type="email" name="email">
    </fieldset>
      
    <fieldset>
      <label for="emailRequired">Email (required):</label>
      <input type="email" name="emailRequired" required>
    </fieldset>
  • form output calculator

    Mootools 1.4.5, HTML, CSS, JavaScript

    function updateOutput() { 
    
            //get form 
            var form = document.getElementById("calc");
            // calculate (evaluate) the output
            form.elements["z"].value=eval(parseInt(form ...