tags, and then use

tags to break up long form content content into sections. This page is a good example of how to do this. (You could of course just ignore this advice and use magick.css for typography and styled components only.) Here is a simple example of the usual structure:

To add tangential information, magick.css uses the

tag. You will find it used from time to time on this page. Should you want to elaborate on a point, or provide additional context, you can use magick.css's sidenotes. Sidenotes are automagically numbered! You can find out more about this in the Extras section below. Typography Here is a showcase of the typography that magick.css offers: Heading 1: A title bold and grand, the story's gate. Heading 2: A subtitle beneath, where chapters await. Heading 3: With secrets whispered, plots thicken here. Heading 4: Fine details shared, the message stands clear. Paragraphs flow, a river of text, Links like portals, where will we go next? Strong as stone, our words firmly stand, Emphasized whispers, softly they land. Underlined secrets, subtly hinted, Small, yet mighty, our words are minted. Code speaks in logic, crisp and neat, Typography's spell, now complete. Headings below

are not styled by magick.css; they are usually not needed for hierarchical structuring, but instead for very specific use cases. So should you need them, you can style them as you see fit. [It is] notable that the Feynman lectures [...] write about all of physics in 1800 pages, using only 2 levels of hierarchical headings: chapters and A-level heads in the text. Edward Tufte, foum post, 'Book design: advice and examples' thread Structured Content Lists Lists are kept simple, as to not distract from the content: * This is... * ... an unordered list. 1. This is... 2. ... an ordered list. And this weird fellow here... ... is a description list. Tables In a similar manner to lists, tables are clear and concise, directing reader focus to the data at hand: Potion Main Ingredient Catalyst Glow Dew Bioluminescent algae (81mg) Float Leaf Dandelion puff (61mg) Might Brew Ginseng root (78mg) Vanish Draft Mimosa pudica (26mg) Remembrance Tea Ginkgo biloba (39mg) Forms & Input Interactive elements can be used on their own, or as part of a form. Keep reading to see examples of both. Buttons I am a button. I am disabled. Text Inputs Free standing text inputs are not opinionated in regards to their size or placement, as their use can vary greatly. Here are some examples: [ ] [ ] [ ] Checkboxes & Radio Buttons Labels for checkboxes and radio buttons are expected after the input element. This way, magick.css can ensure proper grouped spacing between them, without requiring additional wrappers and classes. [ ] I am a checkbox. [ ] I am disabled. ( ) I am a radio button. ( ) I am disabled. Fieldset ( ) I am some option. ( ) I am another option. Forms Forms provide a structured context for interactive elements. In magick.css, forms are styled to stand out, grabbing the user's attention. To stay within the established design, this is achieved by giving forms a handwritten, paper note feel: Name: [ ] Practiced Schools: [ ] Message: [ ] Radio Buttons ( ) Radio 1 ( ) Radio 2 Checkboxes [ ] Checkbox 1 [ ] Checkbox 2 Submit Reset Media & Figures Media elements such as images and video can stand alone or be presented as a figure, giving structure and elegance to your content, and an opportunity to add context using a caption. Standalone Floating images are not taken into account by magick.css, as they look best when used with justified text, which magick.css does not do. Let's start with a standalone element. It will not be stretched or distorted, but will be displayed at its natural size; as long as enough space is available: an example, depicting a random subject In a Figure Using a

element, we can display the media element more prominently, and can also add a caption using a

tag: an example, depicting a random subject This is the figure caption, is usually provides context. Code, Quotes and Preformatting Code Displaying code can be done either inline or in a distinct block. To inline code, use the

 tag. For larger pieces of code, use to wrap the  tag. By the way, you can also use figures to
display code snippets!

123456789void fib(int x) {
    unsigned long a = 0, b = 1, c;
    for(int i = 0; i < x; i++) {
        printf("%lu ", a);
        c = a + b;
        a = b;
        b = c;
    }
}

This C function generates numbers of the fibonacci sequence.

(Line numbering of code requires some extra preprocessing of the
content, but it is quite simple to do, even just by hand. Find out
how in the Extras section.)

Quotes

For quotes, use the  tag. Depending on the content, you
might want to use preformatted text or let the browser handle the
formatting:

    It was a bright cold day in April, and the clocks were striking
    thirteen.

    George Orwell, 1984

Adding a citation is done using a  inside the blockquote.
Just look at the source code of this page to see how it's done!

Let's now consider a poem, where the formatting is imporant and can't
be dynamically determined by the browser. In this case, we wrap the
poem contents in a  tag:

    The angels, not half so happy in Heaven,
       Went envying her and me--
    Yes!-- that was the reason (as all men know,
       In this kingdom by the sea)
    That the wind came out of a cloud, chilling
       And killing my Annabel Lee.


    Excerpt from Annabel Lee by Edgar Allan Poe

Extras

There are some extra features that you can use with magick.css. These
require special classes and are therefore not part of magic.css's
main features. This section will show you what extra features are
available, and how to use them.

Sidenotes & Auto Numbering

SidenotesThis is a sidenote! On mobile devices, it gets pushed into
the main column. are a great way to add additional information to
your content. To add a sidenote in your text, two things need to be
done:

  * Add an anchor where the sidenote refers from:
    
  * Add the sidenote itself, right after the anchor:
    Sidenote Content.

Code/Pre Line Numbers

To display line numbers in code/pre blocks, You need to insert a
 for each line, containing the line number. Depending on your
preferences, this can be done by hand, using JavaScript, or on the
server side. Here is an example:

12345#include
int main() {
   printf("Hello, World!");
   return 0;
}

Which is achieved by this source code:

12345#include 
int main() {
    printf("Hello, World!");
    return 0;
}

That's it!

I hope I could interest you in using magick.css. If you like what you
see, please consider giving it a star on GitHub. It costs nothing and
shows me that someone cares!

Should you be interested in what other things I build, join my
Discord!

---------------------------------------------------------------------

Made by winterveil

Mastodon, Twitter, Itch.io, LinkedIn, YouTube, [email protected]