space-case

version 1.0A
Download

Welcome! space-case is a project aiming to be a simple and slightly biased CSS framework.

Jump to the getting started section if you wanna get this rocket a movin’ or keep reading if you want the personal scoop.

Why?

space-case is a personal project of mine that spawned from a desire to learn better CSS and HTML in a way that would preserve it for future use. What I mean is that the times I find myself working on any web projects, they are so few and far between that I notice I’m learning/looking up the same things over and over again, which tends to add a lot of time before being able to act on even some of the simpliest of ideas/projects. So, I’ve planned to lay this out as personal guide to help me start building an idea, regardless of how much time is inbetween projects, and I’m going to try and cover all the weird things I find my self obsessing over everytime.

Getting Started

Alright, if you don’t need any refreshers simply grab minireset.min.css and space-case.css from the downloaded zip and add them in your page head like so:

<link rel="stylesheet" type="text/css" href="path/to/minireset.min.css">
<link rel="stylesheet" type="text/css" href="path/to/space-case.css">

If it’s been awhile let me walk you through some basics, keep in mind most of this will be of personal choice on how I like to go about things and I’ll try to update whenever any of my methods change.

Structure

Typical directory layout for me goes like so:

space-case
|-- css/
|   |-- minireset.min.css
|   |-- space-case.ss
|-- imgs/
|-- js/
|-- index.html

Pretty simple, the folders are self explanatory and I usually don’t bother with a vendor folder. JS would be used for any custom or downloaded scripts and not jquery itself as that is delivered via a CDN, though you could always download the latest from jquery and stash it in your js folder if you really wanted to.

HTML Boilerplate

Your index.html will look like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title></title>
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="/css/minireset.min.css">
    <link rel="stylesheet" type="text/css" href="/css/space-case.css">
  </head>

  <body>

    <h1>Hello World</h1>

    <!-- Remove this if you don't need JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

  </body>
</html>

This was picked apart from HTML 5 Boilerplate. If you want to add more meta tags check out the HEY META website and for more favicon options check out Real Favicon Generator.

Typography

space-case uses a system font stack. This Article by GitHub creator Mark Dotto does a nice job of explaining the font choices, but to sum it up it uses San Fransisco/Helvetica for macOS/iOS and Segoe UI for Windows, if those fonts aren’t installed on the device you are using it then uses the default sans-serif font set in your browser.

The base font size is set to 62.5% which equals 10px. So using REM units is easier as you just have to multiply it by 10 to know the pixel value, for example 1.8rem would be 18px because 1.8 x 10 = 18. Easy peasy. As for the body font, it changes based on the screen size using the em unit.

Name Screen Size Font Size
Small 0px - 768px 1.6em/16px
Medium 769px - 1024px 1.8em/18px
Large 1025px - 1920px 2.0em/20px
X-Large 1921px + 2.2em/22px

Header sizes are based on augmented fourths thanks to Type Scale and will scale nicely with various screen sizes, like the body font, because of the EM units.

If you are curious about why 62.5% is used as the root font size instead of just putting 10px, it’s because the default font size on browsers is 16px and 62.5% of 16 is 10, but more importantly, we use that percentage so that if a user has changed their default font size (which is possible for many reasons) then your design will shrink and grow based on the users default value. Which is essentially the main point of responsive design.

Aa

Regular 400px
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&(){}[]

Aa

Bold 700px

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&(){}[]

Header 1

<h1> 3.998em

Header 2

<h2> 2.827em

Header 3

<h3> 1.999em

Header 4

<h4> 1.414em

Header 5

<h5> 1em

Header 6

<h6> 0.8em

You can highlight text. <mark></mark>

This line of text is meant to be treated as deleted text. <del></del>

This line of text is meant to be treated as no longer accurate. <s></s>

This line of text is meant to be treated as an addition to the document. <ins></ins>

This line of text will render as underlined <u></u>

This line of text is meant to be treated as fine print. <small></small>

This line rendered as bold text. <b></b>

This line rendered as italicized text. <i></i>

This is a block quote

<blockquote></blockquote>

The Grid

The Grid system is pieced together with 3 parts. The container class, which holds your drawer class(es), which holds your box class(es). Organization is key, so you can also think of your drawers as sections and your boxes as articles if you want to use Semantic HTML.

<main class="container">
  <section class="drawer">
    <article class="box">
    </article>
  </section>
</main>

-- Or feel free to just use div's

<div class="container">
  <div class="drawer">
    <div class="box">
    </div>
  </div>
</div>

The container class centres itself and has a default max-width of 96rem/960px. You can of course adjust the max-width to whatever you desire, though if you have a lot of text (like a blog) I suggest using around 72rem/720px so your text paragraphs remain comfortable to read.

If the container size is under the small breakpoint, all boxes will be stacked in a column, otherwise, they will fill the drawer based on what box you are using.

The drawer class expands to the size of the container and holds your boxes, which are:

.box - Takes up available space in the drawer
.box-10 - Takes up 10% of the drawer
.box-20 - Takes up 20% of the drawer
.box-25 - Takes up 25% or 1/4th of the drawer
.box-30 - Takes up 30% of the drawer
.box-33 - Takes up 33% or 1/3rd of the drawer
.box-40 - Takes up 40% of the drawer
.box-50 - Takes up 50% or 1/2 (2/4ths) of the drawer
.box-60 - Takes up 60% of the drawer
.box-66 - Takes up 66% or 2/3rds of the drawer
.box-70 - Takes up 70% of the drawer
.box-75 - Takes up 75% or 3/4ths of the drawer
.box-80 - Takes up 80% of the drawer
.box-90 - Takes up 90% of the drawer
.box-100 - Takes up 100% of the drawer

To help visualize how the grid works have a look at these examples

Here’s one drawer filled with all 10 box sizes

.box-100

.box-90

.box-80

.box-75

.box-70

.box-66

.box-60

.box-50

.box-40

.box-33

.box-30

.box-25

.box-20

.box-10

<div class="drawer">

  <div class="box-100">
    <p>.box-100</p>
  </div>

  <div class="box-90">
    <p>.box-90</p>
  </div>

  <div class="box-80">
    <p>.box-80</p>
  </div>

  <div class="box-75">
    <p>.box-75</p>
  </div>

  <div class="box-70">
    <p>.box-70</p>
  </div>

  <div class="box-66">
    <p>.box-66</p>
  </div>

  <div class="box-60">
    <p>.box-60</p>
  </div>

  <div class="box-50">
    <p>.box-50</p>
  </div>

  <div class="box-40">
    <p>.box-40</p>
  </div>

  <div class="box-33">
    <p>.box-33</p>
  </div>

  <div class="box-30">
    <p>.box-30</p>
  </div>

  <div class="box-25">
    <p>.box-25</p>
  </div>

  <div class="box-20">
    <p>.box-20</p>
  </div>

  <div class="box-10">
    <p>.box-10</p>
  </div>

</div>

Here’s one drawer filled with all 10 box sizes with an auto sizing box after each set sized box

.box-100

auto (.box)

.box-90

auto (.box)

.box-80

auto (.box)

.box-75

auto (.box)

.box-70

auto (.box)

.box-66

auto (.box)

.box-60

auto (.box)

.box-50

auto (.box)

.box-40

auto (.box)

.box-33

auto (.box)

.box-30

auto (.box)

.box-25

auto (.box)

.box-20

auto (.box)

.box-10

auto (.box)

<div class="drawer">

  <div class="box-100">
    <p>.box-100</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-90">
    <p>.box-90</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-80">
    <p>.box-80</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-75">
    <p>.box-75</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-70">
    <p>.box-70</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-66">
    <p>.box-66</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-60">
    <p>.box-60</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-50">
    <p>.box-50</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-40">
    <p>.box-40</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-33">
    <p>.box-33</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-30">
    <p>.box-30</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-25">
    <p>.box-25</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-20">
    <p>.box-20</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

  <div class="box-10">
    <p>.box-10</p>
  </div>
  <div class="box">
    <p>auto (.box)</p>
  </div>

</div>

Here’s 13 drawers each with one sized box and one auto sizing box

.box-100

auto

.box-90

auto

.box-80

auto

.box-75

auto

.box-70

auto

.box-66

auto

.box-60

auto

.box-50

auto

.box-40

auto

.box-33

auto

.box-30

auto

.box-20

auto

.box-10

auto

<div class="drawer">
  <div class="box-100">
    <p>.box-100</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-90">
    <p>.box-90</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-80">
    <p>.box-80</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-75">
    <p>.box-75</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-70">
    <p>.box-70</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-66">
    <p>.box-66</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer grid">
  <div class="box-60">
    <p>.box-60</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-50">
    <p>.box-50</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-40">
    <p>.box-40</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-33">
    <p>.box-33</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-30">
    <p>.box-30</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-20">
    <p>.box-20</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

<div class="drawer">
  <div class="box-10">
    <p>.box-10</p>
  </div>
  <div class="box">
    <p>auto</p>
  </div>
</div>

Understanding the grid classes

The grid is essentially div(s) inside of a div inside a div (or article(s) inside a section inside a main) and each div has a class of either .box, .drawer, or .container respectively. Together they allow one to layout content in a grid like manner. All that is pretty straight forward, but by understanding how each class modifies it’s div you can also use them for other things, like the container class you can use on a div in say, a footer or header, so that the content lines up with the main content container, but you can still style the header or footer class to be full width if need be, like what I have done on this pages footer.

Buttons and Forms

The buttons are a bit more biased than I planned for, I originally intended to just strip away all styling from them, but then they didn’t really look like buttons, so I spruced them up a bit and well, here we are.

As for the forms, pretty much the same thing.

Anchor

<a href="button-link" class="button">Anchor</a>

<button>Button</button>

<input type="button" value="Input Button">

<input type="Submit" value="Disabled Submit" disabled>
Various Inputs
Various Inputs
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
Text Area
Input Fields

<label>First Name</label>
<input type="name" name="first-name" value="First Name">

*/
-- With HTML5 you can choose more specific input types like:
-- text, name, tel, email, password, and date.
-- to make them disabled just add the disabled attribute at then end.
*/

<input type="name" name="middle-name" value="Middle Name" disabled>

/* Radio and Checkboxes */

<label>Radio</label>
<input type="radio" name="radio1" value="option 1" checked="checked">Option 1<br>
<input type="radio" name="radio1" value="option 2">Option 2<br>
<input type="radio" name="radio1" value="option 3">Option 3

<label>Checkbox</label>
<input type="checkbox" name="checkbox1" value="option 1">Option 1<br>
<input type="checkbox" name="checkbox2" value="option 2" checked="checked">Option 2<br>
<input type="checkbox" name="checkbox3" value="option 3">Option 3

-- input types are inline, so you can organise them with div's and the grid or just use line breaks (<br>) like I did above, whatever works for your situation.
-- disabled also works the same way and to have an item preselected/checked simply add checked="checked" to the input line.


/* Selection and Textarea */

<label>Selection</label>
<select>
  <option value="Value" disabled selected>Choose</option>
  <option value="Value">Value 2</option>
  <option value="Value">Value 3</option>
  <option value="Value">Value 4</option>
</select>

<label>Text area</label>
<textarea name=text-area>Type inside of me.</textarea>

<label>Text area</label>
<textarea name=text-area disabled>Type inside of me, oh wait you can't</textarea>

Tables

All I did with the tables is just space them out a bit, gave every second row a faint grey background, and added borders to help section the cells off. Make sure you use proper formatting/markup with thead, tbody, tfoot when using a table. W3Schools can help explain further.

Name Band Label Party
Jordan McCracken London Stone Words Been known to
Slash Guns N Roses Words Yes
Josh Homme QOTSA Words In the desert
Alice Cooper Alice Cooper Words Meh
David Bowie David Bowie Words Can’t stop
<table>
  <thead>
    <tr>
        <th>Name</th>
        <th>Band</th>
        <th>Label</th>
        <th>Party</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Jordan McCracken</td>
        <td><a href="http://londonstone.ca" target="_blank">London Stone</a></td>
        <td>Words</td>
        <td>Been known to</td>
    </tr>
    <tr>
        <td>Slash</td>
        <td>Guns n Roses</td>
        <td>Words</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>Josh Homme</td>
        <td>QOTSA</td>
        <td>Words</td>
        <td>In the desert</td>
    </tr>
    <tr>
        <td>Alice Cooper</td>
        <td>Alice Cooper</td>
        <td>Words</td>
        <td>Meh</td>
    </tr>
    <tr>
        <td>David Bowie</td>
        <td>David Bowie</td>
        <td>Words</td>
        <td>Can't stop</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
        <td colspan="4">This is the table footer. Party on Garth.</td>
    </tr>
  </tfoot>
</table>

Lists

I pretty much left the list’s stripped down as minireset has them, but I gave the description list a bit of styling to help separate the terms and descriptions, plus I added a margin for when you want to nest a list inside of another list.

  • Unordered, with a nested ordered list
    • List item
      1. Look at me!
      2. An ordered list in an unordered lists
      3. CHAOS
    • List item
  • Ordered list
    1. List item
    2. List item
    3. List item
  • Description List
  • List item
    Description
    List Item
    Description
/* Unordered list with Ordered list nested */

<ul>
  <li>List item</li>
  <li>
    <ol>
      <li>Look at me!</li>
      <li>An ordered list in an unordered list</li>
      <li>CHAOS</li>
    </ol>
  </li>
  <li>List Item</li>
</ul>

/* Ordered List */

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List Item</li>
</ol>

/* Description List */
<dl>
  <dt>List item</dt>
    <dd>Description</dd>
  <dt>List Item</dt>
    <dd>Description</dd>
</dl>

Code

I decided to throw this in here as well since I do use it a lot on this page. If you want to show something as code simply wrap in the code element and it will show up inline like so. If you want to use a code block simply wrap your code tag with the pre tag. Your pre tag will preserve spacing and line breaks though so keep that in mind. You can read more here.

Use the <code>code</code> tag!

or for a code block use:
<pre><code>
  .i-am-code-block {
    party: yes;
  }
</code></pre>

Utilities

These are the little tid-bits that help speed up construction, so I will continue to build a collection of little tweaks that I find myself making over and over again.

.text-center Centers text
.text-right Sets text to the right
.horizontal-center Centers children horizontally
.vertical-center Centers children vertically
.center-center Centers children both horizontally or vertically
.align-left Aligns children to the left
.align-right Aligns children to the right
.space-around Aligns children with equal space around them
.space-between Aligns children with equal space between them .full-100 item width is 100%
.max-100 Item width won’t go past 100% of parent

Examples