This is an AO3 (An Archive of Our Own) workskin using a modified version of Bootstrap's 3.4.1 CSS grid system. This work skin provides a 12-column layout for AO3 works with complex typographical needs, as well as some alignment tools and basic text transformations. Reviewing the Bootstrap documentation will give a good sense of what this code does, but there are some deviations to keep in mind.
You are welcome to clone this repo, but the simplest way to apply this work skin is to simply copy the contents of the modified-bootstrap.css file into the CSS box when creating a new work skin. For creating a new work skin, AO3 has a tutorial available on its site.
Once you have your work skin installed and selected, you'll want to format it for columns using AO3's HTML editor. This work skin cannot be used in Rich Text mode.
This work skin is class-based, which means that all styles will be applied via CSS class. Classes are applied to HTML elements via the class keyword. For instance, a work skin with the following classes
.text-center {
text-align: center;
}
.text-sm {
font-size: 0.75rem;
}Would be applied to HTML thus:
<p class="text-center text-sm">This is your content</p>The above text would be center-aligned and the text would be smaller. You can apply a (theoretically) infinite number of classes to a given HTML element by including a space between each class name. For further explanation, see MDN's guide on CSS classes.
Because of the quirks of how AO3 processes text, using this grid work skin differs somewhat from the standard boostrap framework. The basic structure of your page should look something like this:
<div class="container"> <!-- The entire body of your work should be wrapped in a <div> with a class of "container" -->
<div class="row"> <!-- Rows should posses column elements that add up to 12 or less -->
<p class="col-6">A column that takes up half of the horizontal space</p> <!-- Every column should be within a <p> tag, not a <div> -->
<p class="col-offset-4 col-2">A column that takes up the rightmost 1/6 of horizontal space on the same line</p>
</div>
</div>Please keep the following in mind:
- A
<div>with a class ofcontainershould wrap the entirety of your chapter - The
rowclass should only be applied to a<div>tag - Conversely, all
colclasses should be applied to<p>tags only. Because of the way AO3 auto-formats HTML, you'll get odd spacing if you try to use columns with anything other than the<p>tag. - Each
rowclass should have an amount of columns adding up to 12 or less. For instance, in the above example, there's a<p class="col-6">, so a<p>that spans 6 columns, and then a<p class="col-offset-4 col-2">, a<p>that is offset by 4 (so 4 columns of empty space) and then content that spans 2 colums. So 6 + 4 + 2 = 12. If you have more than 12 columns in a row, the contents will wrap to the next line and may behave erratically.
Unlike the original Bootstrap, this work skin does not support mobile devices, because AO3 does not support media queries in its work skins. This means that if you have a lot of text in very narrow columns, it may be difficult to read on mobile devices.
If you are having trouble with AO3 not respecting intra-line spacing, you can toggle to the Rich Text editor and use the space bar, or HTML-encode your spaces by replacing them with the character. For instance, if you wanted to preserve the 5 spaces between "Hello" and "World" below:
Hello World!
You would replace those spaces with 5 characters:
Hello World!
You can usually find + replace spaces using your word processor by replacing a single " " character with the tag rather than doing it manually. You can also read more about other intra-line spacing options here.
This work skin has several basic class utilities that deal with alignment, capitalization, font size, and font color.
The alignment utilities make use of the CSS text-align property. These utilities will likely only work properly when applies to <p> tags with text inside.
text-leftwill align text to the left. This is AO3's default.text-rightwill align text to the right.text-centerwill align text in the center.text-justifywill justify text.
The capitalization utilities make use of the CSS text-transform property.
text-uppercasewill make all text uppercase, regardless of how it was typed in.text-lowercasewill make all text lowercase, regardless of how it was typed in.text-capitalizewill capitalize the first letter of every word. If a word is already capitalized, it will not make the rest of the word lowercase. It also will capitalize words not typically capitalized in title case, such as "the" and "or."
The font size utilities make use of the CSS font-size property. All font sizes are specified in rem, where 1rem is equal to the browser's default font size. If you modify these font sizes, it's recommended to stil with a relative calculation for accessibility, instead of px, which don't scale as nicely.
text-xsis an extra-small font. This font may be functionally useless.text-smis a small font.text-mdis a medium font. This should be the same size as the default AO3 font.text-lgis a slightly larger font.text-xlis the largest font.
These utilities are for use with body text. If you want a large header, it's recommended that you use HTML section heading tags such as <h1>, <h2>, <h3>, &c. (section header reference).
The font color utilities make use of the CSS color property. Right now there are only two font colors available:
text-red, which is hex code#C82E23text-blue, which is hex code#6FA8DC
Text colors are easy to add. You'll just want to add a rule to your work skin like so:
.text-[color-name] {
color: [color-code];
}Where [color-name] is whatever you want to name the color and [color-code] is a web. I personally like the W3Schools HTML Color Picker. For the different ways you can specify color, MDN has a useful piece here.
Please note that CSS rules (that's the .text-red bit) cannot contain spaces!
Most of the tags we've discussed, such as <p> and <div>, are what we call "block-level elements, which means they always take up a block of vertical space. It's easiest to think of them as paragraphs. However, you may want to apply any of the above text utilities (except alignment) to a line of text or a single word. In that case, you'll want to use an inline element. If you're at all familiar with HTML, you might've encountered the inline elements <i> or <em> for italics, or <b> or <strong> for bold. You can add classes to those tags. So, for instance, if you want your italicised text to also be red, you could do something like:
<p>I really <em class="text-red">want to emphasize this</em>!</p>However, if you don't want text to be bold or italics, just say small and blue, you'll want to use the <span> tag.
<p>I want <span class="text-blue text-sm">this text to be a little quieter</span>.</p><span> doesn't apply any additional styles, so it's perfect for text you just want to modify with the classes in the work skin. Also, if my explanation of block and inline elements didn't make total sense, feel free to check out W3Schools' much better explanation if that didn't make sense.
If you're going to be making extensive use of this system, I suggest downloading a free code editor like Notepad++ or Visual Studio Code, as an editor will help you keep track of your HTML tags and add contextual highlighting to your classes. Of course, do what's easiest for you.
Feel free to modify this skin however you see fit, and if you find any bugs feel free to reach out to me or shoot a PR my way.