Me

• 1. Import
• 2. Usage
• 3. Lore Ipsum

# Import

To import the framework, paste the following code in the head of your html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ln.topdf.de/web_framework/js/marked.min.js"></script>
<script type="module" src="https://ln.topdf.de/web_framework/js/index.js"></script>


and this right below the body

<script src="js/markdown.js"></script>

# Usage ## Features ### header To create a header, use the header element. If you want a child of it to be on the right instead of the left, give it the push class. ### themes To create a button to switch between the currently available themes, simply create a button element with the class theme-button. ### container For the contents you might want it responsive. You can create a div and give it the class container, to make every child responsive. The container elements also keep a nice distance ### textbox The textbox is there to put your real content. The fields get highlighted and an outline will be made. Simply create a div with the class textbox. In a textbox you can use: - headers (h1, h2, h3) - blocktexts (p) - images (img) - lists (ol, ul) - inputs you can give a blocktext the class secondary to make it secondary and elevated to make it elevated. ### images There are a couple of classes, you can add to your images in a textbox: - negated: the image gets negated when in dark mode. - max: the image spans over the whole textbox. - half: the image spans half the textbox. - third: the image spans over a third of the textbox. Due to responsive design the classes defining how far the image spans, may only apply on large screens. ### markdown support If you want to use markdown, you just have to add the class markdown to a textbox. Also look at this sweet formular: $$x_{1, 2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ ## Overview For an overview of everything supported, see down below the example. This should contain most of the features. If you want to see the html code, just press ctrl + u.

# Lorem Ipsum

This is elevated text.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam

## a list

• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet

## another list

1. Lorem ipsum dolor sit amet
2. Lorem ipsum dolor sit amet
3. Lorem ipsum dolor sit amet
4. Lorem ipsum dolor sit amet

## A full page picture

You can just like this create EVERYTHING below!