Simple Web Design
Components Colors Functions
Home Components Colors Functions
Elements Get started Layout Menu Navigation Footer Headline Text Label Button Dropdown Input Card Table Icons Media Dialog Code
Interfaces Variables Utility Classes

Get started

Download you stylesheet here or use the hostet version of the css and javascript files:

<link href="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.0-beta-4/style.min.css" rel="stylesheet">
<script src="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.0-beta-4/script.min.js"></script>

You can create a .html file using the following template. If you use the downloaded version of the resources you have to change the scrpt.src and link.href paths to your local path.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="theme-color" content="#003ecc">
        <link href="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.0-beta-4/style.min.css" rel="stylesheet">
        <script src="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.0-beta-4/script.min.js"></script>
        <title>Template</title>
    </head>
    <body>

        <!-- Your content here -->

    </body>
</html>

Layout

container <div class="container-sm">container-sm</div>
<div class="container-md">container-md</div>
<div class="container-lg">container-lg</div>
<div class="container-xl">container-xl</div>
<div class="container-xxl">container-xxl</div>
<div class="container-fluid">container</div>
ClassSize
container-sm576px
container-md768px
container-lg992px
container-xl1200px
container-xxl1400px
container-fluid100%
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 <div class="grid-cols-md-3 grid-cols-sm-2, grid-cols-1">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</div> Item 1 Item 2 Item 3 Item 4 <div class="grid-cols-md-3 grid-cols-sm-2, grid-cols-1">
    <div class="grid-span-sm-2">Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div class="grid-span-sm-2">Item 4</div>
</div>
ClassBreakpoint
grid-cols-[1-12]
grid-span-[1-12]		Always
grid-cols-sm-[1-12]
grid-span-sm-[1-12]		min-width: 576px
grid-cols-md-[1-12]
grid-span-mg-[1-12]		min-width: 768px
grid-cols-lg-[1-12]
grid-span-lg-[1-12]		min-width: 992px
grid-cols-xl-[1-12]
grid-span-xl-[1-12]		min-width: 1200px
grid-cols-xxl-[1-12]
grid-span-xxl-[1-12]		min-width: 1400px
Item 1 Item 2 Item 3 Item 4 <div class="flex">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div> Item 1 Item 2 Item 3 Item 4 <div class="flex flex-end">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div> Item 1 Item 2 Item 3 Item 4 <div class="flex flex-space-around">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div> Item 1 Item 2 Item 3 Item 4 <div class="flex flex-space-between">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div> Item 1 Item 2 Item 3
Item 4 <div class="flex text-nowrap">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div class="width-100"></div>
    <div>Item 4</div>
</div>
ClassProperty
flex-wrapflex-wrap: wrap
flex-endjustify-content: flex-end
flex-space-aroundjustify-content: space-around
flex-space-betweenjustify-content: space-between
Page Title Item 1 item 2 Item 3 <swd-menu>
    <a class="swd-menu-title">Page Title</a>
    <a>Item 1</a>
    <a selected>Item 2</a>
    <a>Item 3</a>
</swd-menu> Page Title
Item 1 item 2 Item 3 <swd-menu>
    <a class="swd-menu-title">Page Title</a>
    <div class="width-100"></div>
    <a>Item 1</a>
    <a selected>Item 2</a>
    <a>Item 3</a>
</swd-menu> Page Title Item 1 item 2 Item 3
Item 4 Item 5 <swd-menu>
    <a class="swd-menu-title">Page Title</a>
    <a>Item 1</a>
    <a selected>Item 2</a>
    <a>Item 3</a>
    <div class="width-100"></div>
    <a>Item 4</a>
    <a>Item 5</a>
</swd-menu> Item 1 item 2 Item 3 Item 4 <swd-menu class="flex-space-between">
    <a>Item 1</a>
    <a selected>Item 2</a>
    <a>Item 3</a>
    <a>Item 4</a>
</swd-menu> Navigation Item 1 Item 2 Item 3 <swd-navigation>
    <b>Navigation</b>
    <a>Item 1</a>
    <a selected>Item 2</a>
    <a>Item 3</a>
</swd-navigation>
<swd-navigation-content>
    <!-- Page content here -->
</swd-navigation-content>
Navigation Item 1 Item 2 Item 3
Some Card with some Information <swd-navigation>
    <div class="margin-bottom">
        <b>Navigation</b>
        <a>Item 1</a>
        <a selected>Item 2</a>
        <a>Item 3</a>
    </div>
    <swd-card>
        <span>Some Card</span>
        <swd-subtitle>with some Information</swd-subtitle>
    </swd-card>
</swd-navigation>
<swd-navigation-content>
    <!-- Page content here -->
</swd-navigation-content> <swd-menu>
    <a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger"></swd-icon></a>
    <a class="swd-menu-title" href="#">Page Title</a>
</swd-menu>

<swd-navigation navigation-collapse-md>
    <a href="#">Item 1</a>
    <a href="#" selected>item 2</a>
    <a href="#" >Item 3</a>
</swd-navigation>

<swd-navigation-content navigation-collapse-md>
    <!-- Page content here -->
</swd-navigation-content> © 2023 Someone
Imprint Privacy policy <swd-footer>
    <a class="text-nowrap">&copy; 2023 Someone</a>
    <div class="width-100"></div>
    <a>Imprint</a>
    <a>Privacy policy</a>
</swd-footer>

Headline

Headlines

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
<h4>Headline 4</h4>
<h5>Headline 5</h5>
<h6>Headline 6</h6>

Text

Some Headline Subtitle

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

<h2>
    Some Headline
    <swd-subtitle>Subtitle</swd-subtitle>
</h2>
<p>Some text</p>
  1. Ordered List 1
  2. Ordered List 2
  3. Ordered List 3
 <ol>
    <li>Ordered List 1</li>
    <li>Ordered List 1</li>
    <li>Ordered List 1</li>
</ol>
  • Unordered List 1
  • Unordered List 2
  • Unordered List 3
 <ul>
    <li>Unordered List 1</li>
    <li>Unordered List 1</li>
    <li>Unordered List 1</li>
</ul>

Label

Chip Colored Chip Code Key Tooltip <swd-chip>Chip</swd-chip>
<swd-chip class="primary">Colored Chip</swd-chip>
<samp>Code</samp>
<kbd>Key</kbd>
<swd-tooltip>Tooltip</swd-tooltip>

Button

 <button>Button</button>
<button selected>Active</button>
<button disabled>Disabled</button>

<button class="outline">Button</button>
<button class="outline" selected>Active</button>
<button class="outline" disabled>Disabled</button>

<button class="ghost">Button</button>
<button class="ghost" selected>Active</button>
<button class="ghost" disabled>Disabled</button>
 <div class="flex no-gap">
    <button class="left-item">1</button>
    <button class="center-item">2</button>
    <button class="center-item" selected>3</button>
    <button class="right-item">4</button>
</div> Option Selections Something

John Doe

john.doe@mail.com Visit Profile <swd-dropdown>
    <button>Test</button>
    <swd-dropdown-content>
        <swd-selection>
            <a>Option</a>
            <a selected>Selections</a>
            <a>Something</a>
        </swd-selection>
    </swd-dropdown-content>
</swd-dropdown>

<swd-dropdown>
    <button>Card Example</button>
    <swd-dropdown-content>
        <swd-card>
            <h4 class="margin-bottom-0">John Doe</h4>
            <a>john.doe@mail.com</a>
            <button class="width-100 margin-top grey">Visit Profile</button>
        </swd-card>
    </swd-dropdown-content>
</swd-dropdown>
 Amsterdam Berlin Bern Brussels Los Angeles New York Paris Rom Vienna Amsterdam Berlin Bern Brussels Los Angeles New York Paris Rom Vienna <swd-dropdown>
    <input placeholder="Autocomplete" onselect="doWhatYouWant()">
    <swd-dropdown-content>
        <swd-selection onselect="doWhatYouWant()" onfilter="doWhatYouWant()">
            <a>Amsterdam</a>
            <a>Berlin</a>
            <a>Bern</a>
            <a>Brussels</a>
            <a>Los Angeles</a>
            <a>New York</a>
            <a>Paris</a>
            <a>Rom</a>
            <a>Vienna</a>
        </swd-selection>
    </swd-dropdown-content>
</swd-dropdown>

<swd-dropdown>
    <input placeholder="Select" readonly onselect="doWhatYouWant()">
    <swd-icon class="more-down" onclick="this.parentElement.querySelector('input').focus()"></swd-icon>
    <swd-dropdown-content>
        <swd-selection onselect="doWhatYouWant()" onfilter="doWhatYouWant()">
            <a>Amsterdam</a>
            <a>Berlin</a>
            <a>Bern</a>
            <a>Brussels</a>
            <a>Los Angeles</a>
            <a>New York</a>
            <a>Paris</a>
            <a>Rom</a>
            <a>Vienna</a>
        </swd-selection>
    </swd-dropdown-content>
</swd-dropdown> AmsterdamNetherlands BerlinGermany BernSwitzerland BrusselsBelgium Los AngelesUnited States New YorkUnited States ParisFrance RomItaly ViennaAustria <swd-dropdown>
    <input placeholder="Search City">
    <input hidden onselect="console.log(event)">
    <swd-dropdown-content>
        <swd-selection onselect="doWhatYouWant()" onfilter="doWhatYouWant()">
            <a value="amsterdam">Amsterdam<swd-subtitle>Netherlands</swd-subtitle></a>
            <a value="berlin">Berlin<swd-subtitle>Germany</swd-subtitle></a>
            <a value="bern">Bern<swd-subtitle>Switzerland</swd-subtitle></a>
            <a value="brussels">Brussels<swd-subtitle>Belgium</swd-subtitle></a>
            <a value="los-angeles">Los Angeles<swd-subtitle>United States</swd-subtitle></a>
            <a value="new-york">New York<swd-subtitle>United States</swd-subtitle></a>
            <a value="paris">Paris<swd-subtitle>France</swd-subtitle></a>
            <a value="rom">Rom<swd-subtitle>Italy</swd-subtitle></a>
            <a value="vienna">Vienna<swd-subtitle>Austria</swd-subtitle></a>
        </swd-selection>
    </swd-dropdown-content>
</swd-dropdown>

Input

<input value="Default">
<input value="Default (Selected)" selected>
<input value="Default (Selected)" disabled>

<input value="Outline" class="outline">
<input value="Outline (Selected)" class="outline" selected>
<input value="Outline (Selected)" class="outline" disabled>

<input value="Ghost" class="ghost">
<input value="Ghost (Selected)" class="ghost" selected>
<input value="Ghost (Selected)" class="ghost" disabled>
 <swd-input>
    <label for="example-input-1">Default</label>
    <input id="example-input-1" type="text">
</swd-input>
<swd-input class="outline">
    <label for="example-input-2">Outline</label>
    <input id="example-input-2" type="text">
</swd-input> <swd-input>
    <label for="example-input">Username (only letters and numbers)</label>
    <input id="example-input" type="text" maxlength="10" pattern="(\w|\d)+">
    <swd-input-range></swd-input-range>
    <swd-input-error></swd-input-error>
</swd-input>

Card

Default card Default card hover Outline card Outline card hover Ghost card <swd-card>
    Default card
</swd-card>

<swd-card class="swd-card-hover">
    Default card hover
</swd-card>

<swd-card-outline>
    Outline card
</swd-card-outline>

<swd-card-outline class="swd-card-hover">
    Outline card hover
</swd-card-outline>

<swd-card-ghost>
    Ghost card
</swd-card-ghost>

Some Title

Some text

Some action

Some image
Some image
<swd-card>
    <h2>Some Title</h2>
    <p>Some text</p>
    <div class="flex flex-end"><a class="button">Some action</a>
</swd-card>

<img class="swd-card-frame top-item" src="/SimpleWebDesign/resources/image.jpg">
<swd-card class="bottom-item margin-bottom-0">
    <p>Some image</p>
</swd-card>

<div class="overlay-bottom-left">
    <img class="swd-card-frame" src="/SimpleWebDesign/resources/image.jpg">
    <swd-tooltip>Some image</swd-tooltip>
</div>

Table

NameAuthorParts
Harry PotterJ. K. Rowling7
Lord of the RingsJ. R. Tolkien3
 <table>
    <tr><th>Name</th><th>Author</th><th>Parts</th></tr>
    <tr><td>Harry Potter</td><td>J. K. Rowling</td><td>7</td></tr>
    <tr><td>Lord of the Rings</td><td>J. R. Tolkien</td><td>3</td></tr>
</table>

Icons

hamburger
arrow-left
arrow-right
arrow-up
arrow-down
more
more-down
done
close
search
add
delete
<swd-icon class="hamburger"></swd-icon>
hamburger
Test
<swd-icon class="hamburger"></swd-icon> <span>hamburger</span>

<button><swd-icon class="add"></swd-icon> Add</button>

<a class="red-text button ghost"><swd-icon class="remove"></swd-icon> Remove</a>

Media

Image

image <img src="image.jpg" alt="image">

Video

<video width="100%" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

We've embedded content from YouTube here. As YouTube may collect personal data and track your viewing behaviour, we'll only load the video after you consent to their use of cookies and similar technologies as described in their privacy policy.

<swd-card id="youtube-gdpr-question">
    <p>
        We've embedded content from YouTube here. As YouTube may collect personal data and track your viewing behaviour,
        we'll only load the video after you consent to their use of cookies and similar technologies as described in their
        <a href="https://www.youtube.com/t/privacy">privacy policy</a>.
    </p>
    <div class="flex flex-end"><button onclick="swd.query('#youtube-gdpr-question').hide(); swd.query('#youtube-wrapper').commentExpose();">Allow content from YouTube</button></div>
</swd-card>

<div id="youtube-wrapper" class="youtube" hidden>
    <!-- <iframe src="https://www.youtube.com/embed/r2nblrwCMeA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
</div>

Audio

<audio controls>
    <source src="audio.mp3" type="video/mp3">
    Your browser does not support HTML5 audio.
</audio>

Dialog

Dialog

Really interesting text for the dialog to see how the dialog works

 <button onclick="swd.query('swd-dialog').show()">Click to show dialog</button>

<swd-dialog id="swd-dialog">
    <swd-card>
        <h2>Dialog</h2>
        <p>Really interesting text for the dialog to see how the dialog works</p>
        <div class="grid-cols-sm-2 grid-cols-1">
            <button onclick="SwdDialog.hide()">Cancel</button>
            <button onclick="SwdDialog.hide()">Save</button>
        </div>
    </swd-card>
</swd-dialog>

Code

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <script src="script.js"></script>
        <title>Template</title>
    </head>
    <body>
        <element class="some classes">Some element</element>
        <!-- comment -->
    </body>
</html> <swd-code swd-code-language="html"> <!-- Your code here --> </swd-code> .div {
    background-color: #0000ff;
    margin-bottom: 2px;
}
/* comment /* <swd-code swd-code-language="css"> <!-- Your code here --> </swd-code> @Override
public static void main(String args[]) {
    System.out.println("Hello World");
} <code> <!-- Your code without highlighting here --> </code>

Variables

VariableDefault
--theme-font-familyRoboto, sans-serif
--theme-font-size18px
--theme-line-height30px
--theme-border-radius5px
--theme-border-width3px
--theme-box-shadownone
--theme-element-spacing30px
--theme-inner-element-spacing20px
--theme-menu-height50px
--theme-navigation-width250px

Utility Classes

ClassProperty
marginmargin: var(--theme-element-spacing)
margin-topmargin-top: var(--theme-element-spacing)
margin-leftmargin-left: var(--theme-element-spacing)
margin-rightmargin-right: var(--theme-element-spacing)
margin-bottommargin-bottom: var(--theme-element-spacing)
margin-0margin: 0
margin-top-0margin-top: 0
margin-left-0margin-left: 0
margin-right-0margin-right: 0
margin-bottom-0margin-bottom: 0
margin-automargin-left: auto; margin-right: auto
margin-left-automargin-left: auto
margin-right-automargin-right: auto
ClassProperty
text-lefttext-align: start
text-righttext-align: end
text-centertext-align: center
text-uppercasetext-transform: uppercase
text-lowercasetext-transform: lowercase
text-underlinetext-decoration: underline
text-line-throughtext-decoration: line-through
text-nowrapwhite-space: nowrap
text-overflowoverflow: hidden; text-overflow: ellipsis; white-space: nowrap
ClassProperty
left-itemborder-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0;
right-itemborder-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0;
top-itemborder-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0;
bottom-itemborder-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0;
center-itemborder-radius: 0px; margin: 0;
ClassProperty
only-smaller-smOnly displayed if screen size is smaller than 576px
only-smaller-mdOnly displayed if screen size is smaller than 768px
only-smaller-lgOnly displayed if screen size is smaller than 992px
only-smaller-xlOnly displayed if screen size is smaller than 1200px
only-smaller-xxlOnly displayed if screen size is smaller than 1400px
only-bigger-smOnly displayed if screen size is equal or bigger than 576px
only-bigger-mdOnly displayed if screen size is equal or bigger than 768px
only-bigger-lgOnly displayed if screen size is equal or bigger than 992px
only-bigger-xlOnly displayed if screen size is equal or bigger than 1200px
only-bigger-xxlOnly displayed if screen size is equal or bigger than 1400px
ClassProperty
width-100width: 100%
contentsdisplay: contents
© 2024 Der Zauberer
Imprint Privacy policy