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="padding-right: 30%">
      <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>
      </fieldset>
      <button type="submit">Sign in</button>

      <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>
      </fieldset>

      <button type="submit">Sign up</button>
     </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>Choose an option
	   <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">
       </fieldset>
       <button type="submit">Next...</button>
      </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> 
	  <tbody>
       <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>
	  </tbody>
      <tfoot>
       <tr><td colspan="3">table footer</td></tr>
      </tfoot>
     </table>

	 <p>Table without thead, tbody and tfoot sections.</p>
	 
     <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

Name Description Last modified Size
_a.scss Sass 2 April 1.1 KBDownload
_abbr.scss Sass Jun ’18 187 BytesDownload
_article.scss Sass 17 April 1.8 KBDownload
_badge.scss Sass 17 January 175 BytesDownload
_blockquote.scss Sass 13 February 259 BytesDownload
_body.scss Sass 17 January 1.5 KBDownload
_button.scss Sass 31 May 411 BytesDownload
_comment.scss Sass Nov ’18 306 BytesDownload
_figure.scss Sass Dec ’18 278 BytesDownload
_footer.scss Sass 18 May 261 BytesDownload
_form.scss Sass 31 May 1.5 KBDownload
_gallery.scss Sass 17 January 871 BytesDownload
_grid.scss Sass Dec ’18 270 BytesDownload
_header.scss Sass 18 May 389 BytesDownload
_hint.scss Sass 4 January 251 BytesDownload
_icons.scss Sass Nov ’18 121 BytesDownload
_iframe.scss Sass 4 January 75 BytesDownload
_image.scss Sass 17 January 188 BytesDownload
_layout.scss Sass 28 May 3.4 KBDownload
_list.scss Sass 18 May 768 BytesDownload
_media.scss Sass 5 February 188 BytesDownload
_modal.scss Sass Mar ’18 536 BytesDownload
_nav.scss Sass 9 June 1.4 KBDownload
_pre.scss Sass 22 July 1.6 KBDownload
_print.scss Sass 9 June 696 BytesDownload
_prototype.scss Sass 6 January 1.2 KBDownload
_responsive.scss Sass 17 January 788 BytesDownload
_screenshot.scss Sass 17 January 386 BytesDownload
_table.scss Sass 28 May 1.7 KBDownload
_tag.scss Sass 15 February 1.5 KBDownload
_tree.scss Sass 17 January 349 BytesDownload
_typography.scss Sass 1 March 1.4 KBDownload
_utility.scss Sass 6 January 683 BytesDownload
_variables.scss Sass 22 January 505 BytesDownload
_vertical-rhythm.scss Sass Dec ’18 490 BytesDownload
black-no4.css Stylesheet Aug ’18 18.6 KBDownload
black-no4.scss Sass Nov ’18 420 BytesDownload
black-no5.css Stylesheet 25 July 26.4 KBDownload
build.cmd Command script 17 January 96 BytesDownload
build.sh Shell script Nov ’18 88 BytesDownload
c64screenmatrix.scss Sass 6 January 514 BytesDownload
candy-cannibal.css.txt Text Mar ’18 21.1 KBDownload
[dist] Folder Nov ’18 -
image.svg SVG Dec ’17 233 BytesDownload
pretzels.css Stylesheet 25 July 26.0 KBDownload
pretzels.scss Sass May ’18 147 BytesDownload
sweet.html HTML Document 28 May 18.7 KBDownload
sweet.scss Sass 29 January 760 BytesDownload
48 files 140.9 KB