Content Components

Images

A regular image, centered on the page.

Now here's an image with the float-left class applied (note, these only work on larger screens):

You're going to need a bit of content below the image to look right, of course. Prefereably text, because it flows around images more easily and generally looks better. Be sure to set the height to "auto" so it doesn't start to look squished. Maybe I'll add something with the aspect-ratio property to the framework later...

From here on out, I'm going to use some Lorem Ipsum. Okay? Okay. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in consequat erat, a aliquam lectus. Donec sit amet tellus felis. Nullam molestie dolor nec tellus commodo aliquet. Cras ac auctor purus. Vivamus egestas ac augue sed semper. In rutrum enim erat, quis venenatis lacus accumsan at. Pellentesque tristique neque ut nulla interdum laoreet.

Going out of bounds

You can add the .float-hard class to any image to push it out of bounds.

Here it is working on the left:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in consequat erat, a aliquam lectus. Donec sit amet tellus felis. Nullam molestie dolor nec tellus commodo aliquet. Cras ac auctor purus. Vivamus egestas ac augue sed semper. In rutrum enim erat, quis venenatis lacus accumsan at. Pellentesque tristique neque ut nulla interdum laoreet.

And here it is working on the right:

Code

You've almost assuredly seen inline code and probably the code boxes too. There's no syntax highlighting or anything by default,, because that usually requires a JavaScript-based solution. Still, this is how you get those sweet, sweet code blocks:

<pre>    
    <code>
        <h1>Darn this looks good!</h1>
    </code>    
</pre>

Definition/description lists

This is a term: This is a description of that term.; Plus another description.
A second term: Is what every US president wants.

Blockquotes

Blockquotes are pretty simple, all things considered. Any blockquote that has a paragraph in it will automatically get smart quotes put around it, and be made a bit more prominent.

This is a quote, with a nice first sentence.

And a second sentence, because why not?

Tables

Simple tables that look like this in your code:

<table>
  <tbody><tr>
    <th>Table Heading</th>
    <th>Table Heading</th>
    <th>Table Heading</th>
  </tr>
  <tr>
    <td>Table Content</td>
    <td>Table Content</td>
    <td>Table Content</td>
  </tr>
  <tr>
    <td>Table Content</td>
    <td>Table Content</td>
    <td>Table Content</td>
  </tr>
</tbody></table>

Will look like this on the page:

Table Heading	Table Heading	Table Heading
Table Content	Table Content	Table Content
Table Content	Table Content	Table Content

Alerts/ Notices/ Admonitions

Look, I have no idea what they're supposed to be called, exactly. There are a dozen different names for these things, but here's the idea: they're specially formatted boxes that contain extra information, and are used to catch the eye.

They could also technically be used as modal windows and dialogue moxes if necessary.

This is a general info box

Use the classes alert and generalinfo on any div (or other block level element) to make it look like this.

This is a warning box

This requres the alert and warning classes. Good for error messages.

This is a "mild warning" box

I use it for important info that doesn't necessarily require immediate action. Requires the alert and mild classes.

This is a success message box.

This takes, you guessed it, alert and success to make it work.

By the way, you can (technically) add the float-left, float-right, and float-hard classes to the notice/alert boxes too... I just can't show it here. That's one of the limits of the Typemill CMS I'm using, I'm afraid.