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:

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.
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.