CSS

Introduction

sweet.css is my CSS framework targeted at joriszwart.nl and my company sites. It is work in progress, totally broken at some points and extended for what is needed.

Style guide

The sweet.css style guide can be found at: /sweet/sweet.html

<!DOCTYPE html>
<html id="notelines">
 <head> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sweet CSS - joriszwart.nl</title>
  <link href="black-no5.css" rel="stylesheet">
 </head>
 <body>

  <nav id="nav" class="fixed-top light"> <!-- TODO add .sticky -->
   <ul>
    <li class="active"><a href="#introduction">Introduction</a></li>
    <li><a href="#articles">Articles</a></li>
    <li><a href="#blockquote">Block quote</a></li>
    <li><a href="#buttons">Buttons</a></li>
    <li><a href="#comments">Comments</a></li>
    <li><a href="#figure">Figures</a></li>
    <li><a href="#forms">Forms</a></li>
    <li><a href="#gallery">Gallery</a></li>
    <li><a href="#hints">Hints</a></li>
    <li><a href="#images">Images</a></li>
    <li><a href="#lists">Lists</a></li>
    <li><a href="#media">Media</a></li>
    <li><a href="#modals">Modals</a></li>
    <li><a href="#navigation">Navigation</a></li>
    <li><a href="#pre-formatted">Pre-formatted</a></li>
    <li><a href="#print">Print</a></li>
    <li><a href="#prototype">Prototype</a></li>
    <li><a href="#responsive">Responsive</a></li>
    <li><a href="#screen-shot">Screen shot</a></li>
    <li><a href="#tables">Tables</a></li>
    <li><a href="#tags">Tags</a></li>
    <li><a href="#tree">Tree</a></li>
    <li><a href="#typography">Typography</a></li>
    <li><a href="#utilities">Utilities</a></li>
    <li><a href="#vertical-rhythm">Vertical rhythm</a></li>
    <li><a href="#search">&#x1F50D;&#xFE0E; (search)</a></li>
   </ul>
   <a class="more" href="#nav">More&hellip;</a>
   <a class="close" href="#">↥</a>
  </nav>

  <header>
   <h1>Sweet CSS</h1>
  </header>

  <main>
   <article>
    <header>
     <h1><a href="#">Style guide</a></h1>  
     <p>Reinventing style. Again. With Class. Sigh.</p>
     <a class="category" rel="tag">CSS</a>
    </header>

     <h2 id="introduction">Introduction</h2>

     <p>
      This is a style guide for Sweet CSS. No comments. Look at the (pretty)
      plain HTML.
     </p>


     <h2 id="articles">Articles</h2>

     <p>
      <em>Sweet CSS</em> can be used with or without <code>article</code>s.
      The main article content can be wrapped in a class <code>.content</code> (deprecated)
      for outstanding items (tables, figures, pre-formatted code).
      In fact <code>.content</code> can be used on anything (main, article,
      body) to make content reasonable width. Don't nest it however (or do if      you like).
     </p>

     <p>
      012345678901234567890123456789012345678901234567890123456789
     </p>


     <h2 id="blockquote">Block quote</h2>

     <blockquote>
      <header>Henk wrote some time ago</header>
      <p>There is no business like show business.</p>
      <footer></footer>
     </blockquote>


     <h2 id="buttons">Buttons</h2>

     <button type="submit">Button</button>
     <a class="button" href="#">Link</a>


     <h2 id="comments">Comments</h2>


     <article class="comments">
      <header>Sjaak <a href="#"><time>30 November</time></a></header>
      <p>Lets agree we disagree.</p>
      <article>
       <header>Ricky <a href="#"><time>30 November</time></a></header>
       <p>No!</p>
      </article>
     </article>


     <h2 id="figures">Figures</h2>

     <p>
      Figures can be wrapped around almost anything. But please keep it semantic!
     </p>
     
     <figure>
      <img src="image.svg" alt="">
      <figcaption>Image</figcaption>
     </figure> 

     <figure>
      <table border="1">
       <tr><td>table cell</td><td>table cell</td></tr>
       <tr><td>table cell</td><td>table cell</td></tr>
      </table> 
      <figcaption>Unstyled table</figcaption>
     </figure> 

     <figure>
      <table class="table" border="1">
       <tr><td>table cell</td><td>table cell</td></tr>
       <tr><td>table cell</td><td>table cell</td></tr>
      </table> 
      <figcaption>Styled table</figcaption>
     </figure> 


     <h2 id="forms">Forms</h2>

     <h3>Plain</h3>

     <p>
      We have to think about this.
      Input should be smaller than textarea.
      Should input 80% and textarea 100% of form and
      let form determine the width?
     </p>

     <form>
      <label for="username">Username</label>
      <input type="text" name="username" value="John">
      <small>Your name</small>

      <label for="password">Password</label>
      <input type="password" name="password" value="John15">
      <small>Forgot your <a href="#">password</a>?</small>

      <label for="message">Message</label>
      <textarea rows="6" id="mesage">
When white space is important,
    nothing else matters.
</textarea>
      <button type="submit">Sign in</button>
     </form>

     <h3>Plain with label-wrapped inputs</h3>

     <p>The parent form or field sets the total width.</p>

     <form style="width: 70%">
      <label for="name">Name
       <input type="text" id="username" value="John">
       <small>Your name</small>
      </label>
      <label for="email">Email
       <input type="email" id="email" value="John15@example.com">
      </label>
      <label for="message">Message
       <textarea rows="6" id="mesage">
When white space is important,
    nothing else matters.
</textarea>
      </label>
      <button type="submit">Shout!</button>
     </form>

     <h3>Inline search form</h3>

     <form>
      <input type="search" name="q" id="terms" value="John">
      <button type="submit">Search</button>
     </form>

     <p>
      Note that the input and button should not have whitespace in HTML.
     </p>

     <h3>Using a field set</h3>

     <p>Better not wrap this in an article.</p>
    </article>

     <form>
      <fieldset>
       <legend>Sign in</legend>
       <label for="username">Username
        <input type="text" id="username" value="John"> <a href="#" style="font-size: large; font-weight: bold">🛈</a>
       </label>
       <label for="password">Password
        <input type="password" id="password" value="John15">
       </label>
       <button type="submit">Sign in</button>
      </fieldset>
      <fieldset>
       <legend>Sign up</legend>
       <label for="username">Username
        <input type="text" id="username" value="John">
       </label>
       <label for="password">Password
        <input type="password" id="password" value="John15">
       </label>
       <button type="submit">Sign up</button>
      </fieldset>
     </form>

    <article>

     <h3>Check boxes</h3>

     <form>
      <label for="checkbox_item1">
       <input type="checkbox" id="checkbox_item1" checked>
	   Item 1
      </label>
      <label for="checkbox_item2">
       <input type="checkbox" id="checkbox_item2">
	   Item 2
      </label>
      <button type="submit">Save</button>
     </form>

     <h3>Radio buttons</h3>

     <form>
      <label for="radio_item2">
       <input type="radio" id="radio_item1" name="radiogroup" checked>
	   Item 1
      </label>
      <label for="radio_item2">
       <input type="radio" id="radio_item2" name="radiogroup">
	   Item 2
      </label>
      <button type="submit">Save</button>
     </form>

     <h3>Other field types</h3>

     <form>
	  <label>
	   <select>
	    <option>option 1</option>
	    <option>option 2</option>
	    <option>option 3</option>
	   </select>
	  </label>

	  <label>
	   number
	   <input type="number">
	  </label>

	  <label>
	   date
	   <input type="date">
	  </label>

	  <label>
	   time
	   <input type="time">
	  </label>

	  <label>
	   date time
	   <input type="date"><input type="time">
	  </label>

	  <label>
	   search
	   <input type="search">
	  </label>

	  <label>
	   URL
	   <input type="url">
	  </label>

	  <label>
	   Email
	   <input type="email">
	  </label>

     </form>


     <h2 id="gallery">Gallery</h2>

     <p>It has responsive masonry-like columns.</p>

     <section class="gallery">
      <figure class="promise">
       <p>figure<br>table<br>video<br>image<br>pre<br>text</p>
      </figure>
      <figure class="screenshot">
       <img src="image.svg">
       <figcaption>figcaption</figcaption>
      </figure>
      <figure>
       <img src="image.svg">
       <figcaption>figcaption</figcaption>
      </figure>
      <figure>
       <img src="image.svg" class="img-half"><img src="image.svg" class="img-half">
       <figcaption>figcaption</figcaption>
      </figure>
      <figure>
       <video controls></video>
       <figcaption>figcaption</figcaption>
      </figure>
      <figure>
       <canvas>canvas</canvas>
       <figcaption>canvas</figcaption>
      </figure>
      <figure class="promise">
       <p>figure</p>
      </figure>
      <figure class="promise">
       <p>figure</p>
      </figure>
     </section>


     <h2 id="hints">Hints</h2>

     <p><a href="#void" class="hint-icon" title="This is a hint.">Ⓘ</a></p>


     <h2 id="images">Images</h2>

     <p>
      Images within <code>article</code>s are responsive by default. Outside
      articles they need a class <code>.responsive</code>.
     </p>

     <img src="image.svg" alt="image">


     <h2 id="lists">Lists</h2>

     <ul>
      <li>
       Unnumbered item 1 item item item item item item item item item item
       item item item item item item item item item item item
      </li>
      <li>Unnumbered item 2</li>
      <li>Unnumbered item 3</li>
     </ul> 

     <ol>
      <li>Numbered item 1</li>
      <li>
       Numbered item 2 item item item item item item item item item item
       item item item item item
      </li>
      <li>Numbered item 3</li>
     </ol> 

     <p>
      Flat list <code>.flat</code>
     </p>

     <ul class="flat">
      <li>Unnumbered item 1</li>
      <li>Unnumbered item 2 item item item item item item item item item item item item item item item item item item item item </li>
      <li3>Unnumbered item 3</li>
     </ul> 

     <h3>Definition list</h3>
     
     <dl>
      <dt>Definition term</dt>
      <dd>Definition description</dd>
      <dt>Definition term term term term term term term term term term term term term term term term term term term term term term</dt>
      <dd>Definition description</dd>
      <dt>Definition term</dt>
      <dd>Definition description description description description description description description description description description description description description description description description description </dd>
     </dl> 


     <h2 id="media">Media</h2>

     <h3>Audio element</h3>
     
     <audio controls></audio>
     
     <h3>Video element</h3>

     <video controls></video>

     <figure>
      <audio controls></audio>
      <figcaption>Audio element wrapped in figure</figcaption>
     </figure>

     <figure>
      <video controls></video>
      <figcaption>Video element wrapped in figure</figcaption>
     </figure>

     <h3>Canvas element</h3>

     <canvas></canvas>

     <figure>
      <canvas></canvas>
      <figcaption>Canvas element</figcaption>
     </figure>


     <h2 id="modals">Modals</h2>

     <p>Modals are always behind an anchor.</p>

     <p><a href="#search">Click me!</a></p>


     <h2 id="navigation">Navigation</h2>

     <p>Priority menu.</p>


     <h2 id="pre-formatted">Pre-formatted</h2>

     <p>
      Pre-formatted elements belong to the outstanding items (see there). They
      can be used within or without <code>figure</code>s. Comes with line-numbers
      for free when lines are wrapped in <code>code</code> tags.
     </p>

     <figure>
      <pre class="HTML">
<code>line 1</code>
<code>	line 2</code>
<code>		line 3</code>
<code>	line 4</code>
<code>line 5</code>
</pre>
<figcaption>Code sample</figcaption>
     </figure>

     <pre class="CSS">
<code>line 1</code>
<code>line 2</code>
</pre>

 <pre>
<code>01234567890123456789012345678901234567890123456789012345678901234567890123456789</code>
<code>0         1         2         3         4         5         6         7         </code>
</pre>

     <p class="bg-warning">Watch your white-space!</p>

     <h3>Inline elements</h3>

     <p><code>&lt;code&gt;&lt;/code&gt;</code></p>

     <p><kbd>&lt;kbd&gt;&lt;/kbd&gt;</kbd></p>

     <p><output>&lt;output&gt;&lt;/output&gt;</output></p>

     <p><samp>&lt;samp&gt;&lt;/samp&gt;</samp></p>

     <p><var>&lt;var&gt;&lt;/var&gt;</var></p>


     <h2 id="print">Print</h2>

     <p>Environment friendly.</p>


     <h2 id="prototype">Prototype</h2>

     <p>
      Wireframe look to distinguish examples from actual site design
      to prevent misclicking. Responsive though.
     </p>

     <figure class="prototype">
      <figcaption>Some prototype examples</figcaption>

      <h1>Acme™</h1>

      <table class="table">
       <caption>User list</caption>
       <thead>
        <tr><th>Name</th><th>Surname</th><th></th></tr>
       </thead>
       <tbody>
        <tr><td>Jane</td><td>Doe</td><td><a href="#">edit</a></tr>
        <tr><td>John</td><td>Smith</td><td><a href="#">edit</a></tr>
       </tbody>
       <tfoot>
        <tr><td colspan="2">2 persons</td></tr>
       </tfoot>
      </table>

      <div class="gallery">
       <img src="image.svg"><img src="image.svg"><img src="image.svg"><img src="image.svg"><img src="image.svg"><img src="image.svg"><img src="image.svg"><img src="image.svg"><img src="image.svg">
      </div>
     </figure>

     <figure class="prototype">
      <figcaption>Prototype form and fieldset example</figcaption>
      <form>
       <fieldset>
        <legend>Person form</legend>
        <label>Name</label>
        <input type="text" value="Joris">
        <label>Surname</label>
        <input type="text" value="Zwart">
        <br><br>
        <button type="submit">Next...</button>
       </fieldset>
      </form>
     </figure>


     <h2 id="responsive">Responsive</h2>

     <p>
      Due to no hardcoded widths everything is responsive by nature. The only
      media query is used on <code>&lt;article&gt;</code> to keep line length within
      reasonable limits.
     </p>
     

     <h2 id="screen-shot">Screen shot</h2>

     <p>
      To get a more outstanding screenshot and prevent users from confusing
      the screenshot with an actual site or application <code>.screenshot</code>
      can be used on a <code>figure</code> to make it stand out.
      The <code>figcaption</code> is optional but can be used to create a
      window caption.
     </p>

     <figure class="screenshot">
      <figcaption>joriszwart.nl</figcaption>
      <img src="image.svg">
     </figure>


     <h2 id="tables">Tables</h2>

     <p>
      No need for a class <code>.table</code> because you know why.
     </p>

     <table class="table" border="1">
      <caption>Table caption</caption>
      <thead>
       <tr><th>Table header</th><th>Table header</th><th>Table header</th></tr>
      </thead> 
      <tr><td>table celll</td><td>table celll</td><td>table celll table celll table celll table celll table celll table celll</td></tr>
      <tr><td>table celll</td><td>table celll table celll table celll table celll table celll</td><td>table celll</td></tr>
      <tr><td>table celll</td><td>table celll</td><td>table celll</td></tr>
      <tr><td>table celll</td><td>table celll</td><td>table celll</td></tr>
      <tfoot>
       <tr><td colspan="3">table footer</td></tr>
      </tfoot>
     </table>

     <table class="table" border="1">
      <tr><th>Table header</th><th>Table header</th><th>Table header</th></tr>
      <tr><td>table celll</td><td>table celll</td><td>table celll table celll table celll table celll table celll table celll</td></tr>
      <tr><td>table celll</td><td>table celll table celll table celll table celll table celll</td><td>table celll</td></tr>
      <tr><td>table celll</td><td>table celll</td><td>table celll</td></tr>
      <tr><td>table celll</td><td>table celll</td><td>table celll</td></tr>
     </table>


     <h2 id="tags">Tags</h2>

     <div class="tags">Tags:
      <a href="#" rel="tag">Class</a>,
      <a href="#" rel="tag">CSS</a>,
      <a href="#" rel="tag">Framework</a>,
      <a href="#" rel="tag">HTML</a>,
      <a href="#" rel="tag">Mobile-first</a>,
      <a href="#" rel="tag">Responsive</a>,
      <a href="#" rel="tag">Style guide</a>,
      <a href="#" rel="tag">Too generic</a>
     </div>


     <h2 id="tree">Tree</h2>

     <ul class="tree">
      <li>grandma</li>
      <li>grandpa
       <ul>
        <li>father</li>
        <li>mother</li>
       </ul>
      </li>
     </ul>


     <h2 id="typography">Typography</h2>

     <p>
      <del>Deleted text</del>
     </p>
     <p>
      <em>Emphasized text</em>
     </p>
     <p>
      <strike>Strikout text</strike>
     </p>
     <p>
      <strong>Strong text</strong>
     </p>
     <p>
      <a href="https://asjdf897325hiasdjkf.com/">Link</a>
     </p>
     <p>
      <a href="https://google.com/">Visited link</a>
     </p>
     <p>
      <a href="#">Hovered link</a>
     </p>
     <p>
      <a href="#">Active link</a>
     </p>
     <p>
      Superscript<sup>sup</sup>
     </p>
     <p>
      Subscript<sub>sub</sub>
     </p>


     <h2 id="utilities">Utitilies</h2>

     <h3>Text emphasis</h3>

     <dl>
      <dt><code>.text-ok</code></dt>
      <dd class="text-ok">This is totally OK!</dd>
      <dt><code>.text-info</code></dt>
      <dd class="text-info">Dinosaurs did not have opposing thumbs.</dd>
      <dt><code>.text-warning</code></dt>
      <dd class="text-warning">Be quiet if I talk.</dd>
      <dt><code>.text-danger</code></dt>
      <dd class="text-danger">This looks wrong to me :-(</dd>
     </dl>


     <h3>Background emphasis</h3>

     <dl>
      <dt><code>.bg-ok</code></dt>
      <dd class="bg-ok"><p>This is totally OK!</p></dd>
      <dt><code>.bg-info</code></dt>
      <dd class="bg-info"><p>Dinosaurs did not have opposing thumbs.</p></dd>
      <dt><code>.bg-warning</code></dt>
      <dd class="bg-warning"><p>Be quiet if I talk.</p></dd>
      <dt><code>.bg-danger</code></dt>
      <dd class="bg-danger"><p>This looks wrong to me :-(</p></dd>
     </dl>


     <h2 id="vertical-rhythm">Vertical rhythm</h2>

     <p>
      Add <a href="#notelines"><code>#notelines</code></a> as anchor to see it
      in action.
     </p>

   </article>
  </main>

  <footer>
   Sweet CSS style guide
  </footer>

  <!-- last element before body end but can be anywhere really -->
  <form id="search" class="modal" action="./sweet.html">
   <div class="form-group">
    <input type="search" name="q"><button type="submit">search</button>
   </div>
   <a class="close" href="#close" aria-label="close">&#x1F5D9;</a>
  <!-- TODO how to go back? swipe? click in backdrop using a href #close  -->
  </form>

  <script>
    const canvasses = document.querySelectorAll('canvas')

    for(let canvas of canvasses) {
      const context = canvas.getContext('2d')
      context.fillStyle = 'gray'
      context.fillRect(0, 0, context.canvas.width, context.canvas.height)
      context.fillText('🥨', 50, 50)
    }
  </script>
 </body>
</html>

Files

NameDescriptionLast modifiedSize
[dist] Nov ’18 -
_a.scss Sass 17 January 1.0 KB
_abbr.scss Sass Jun ’18 187 Bytes
_article.scss Sass 15 February 1.7 KB
_badge.scss Sass 17 January 175 Bytes
_blockquote.scss Sass 13 February 259 Bytes
_body.scss Sass 17 January 1.5 KB
_button.scss Sass 10 January 266 Bytes
_comment.scss Sass Nov ’18 306 Bytes
_figure.scss Sass Dec ’18 278 Bytes
_footer.scss Sass 17 January 259 Bytes
_form.scss Sass 14 February 1.2 KB
_gallery.scss Sass 17 January 871 Bytes
_grid.scss Sass Dec ’18 270 Bytes
_header.scss Sass 17 January 371 Bytes
_hint.scss Sass 4 January 251 Bytes
_icons.scss Sass Nov ’18 121 Bytes
_iframe.scss Sass 4 January 75 Bytes
_image.scss Sass 17 January 188 Bytes
_layout.scss Sass 15 February 3.3 KB
_list.scss Sass 14 February 784 Bytes
_media.scss Sass 5 February 188 Bytes
_modal.scss Sass Mar ’18 536 Bytes
_nav.scss Sass 17 January 1.5 KB
_pre.scss Sass 29 January 1.6 KB
_print.scss Sass 7 January 686 Bytes
_prototype.scss Sass 6 January 1.2 KB
_responsive.scss Sass 17 January 788 Bytes
_screenshot.scss Sass 17 January 386 Bytes
_table.scss Sass 5 February 1.7 KB
_tag.scss Sass 15 February 1.5 KB
_tree.scss Sass 17 January 349 Bytes
_typography.scss Sass 17 January 1.4 KB
_utility.scss Sass 6 January 683 Bytes
_variables.scss Sass 22 January 505 Bytes
_vertical-rhythm.scss Sass Dec ’18 490 Bytes
black-no4.css Stylesheet Aug ’18 18.6 KB
black-no4.scss Sass Nov ’18 420 Bytes
black-no5.css Stylesheet 15 February 25.8 KB
build.cmd Command script 17 January 96 Bytes
build.sh Shell script Nov ’18 88 Bytes
c64screenmatrix.scss Sass 6 January 514 Bytes
candy-cannibal.css.txt Text Mar ’18 21.1 KB
image.svg SVG Dec ’17 233 Bytes
pretzels.css Stylesheet 15 February 25.4 KB
pretzels.scss Sass May ’18 147 Bytes
sweet.html HTML Document 16 January 18.6 KB
sweet.scss Sass 29 January 760 Bytes
48 files 138.8 KB