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 Loading Skeleton Loading Spinner 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.2/swd.min.css" rel="stylesheet">
<script src="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.2/swd.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 script.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.2/swd.min.css" rel="stylesheet">
        <script src="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.2/swd.min.js"></script>
        <title>Template</title>
    </head>
    <body>

        <!-- Your content here -->

    </body>
</html>

You could also install from npm npm i simplewebdesign and use import 'simplewebdesign'. You may have to configure the specific imports of the javascript and stylesheet seperately depending on the framework. Maybe you also have to enable web-components in your framework.

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> Page Title <swd-menu>
    <a tabindex="0"><swd-icon class="hamburger-icon"></swd-icon></a>
    <a class="swd-menu-title">Page Title</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-icon"></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>
Headlines

Headline 1with Subtitle

Headline 2with Subtitle

Headline 3with Subtitle

Headline 4with Subtitle

Headline 5with Subtitle
Headline 6with Subtitle
<h1>Headline 1<swd-subtitle>with Subtitle</swd-subtitle></h1>
<h2>Headline 2<swd-subtitle>with Subtitle</swd-subtitle></h2>
<h3>Headline 3<swd-subtitle>with Subtitle</swd-subtitle></h3>
<h4>Headline 4<swd-subtitle>with Subtitle</swd-subtitle></h4>
<h5>Headline 5<swd-subtitle>with Subtitle</swd-subtitle></h5>
<h6>Headline 6<swd-subtitle>with Subtitle</swd-subtitle></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 Key
Code
 <swd-chip>Chip</swd-chip>
<swd-chip class="primary-color">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>
    <swd-input>
        <input placeholder="Autocomplete">
        <swd-icon class="down-icon" swd-input-icon></swd-icon>
        <swd-icon class="close-icon" swd-input-reset-icon></swd-icon>
    </swd-input>
    <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>
    <swd-input>
        <input placeholder="Select City" readonly>
        <swd-icon class="down-icon" swd-input-icon></swd-icon>
    </swd-input>
    <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>
    <swd-input>
        <input placeholder="Search City">
        <input hidden onselect="console.log(event)">
        <swd-icon class="down-icon" swd-input-icon></swd-icon>
        <swd-icon class="close-icon" swd-input-reset-icon></swd-icon>
    </swd-input>
    <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">Input with icon</label>
    <input id="example-input" type="text">
    <swd-icon class="search-icon" onclick="this.parentElement.querySelector('input').focus()"></swd-icon>
</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 Ghost card hover <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>

<swd-card-ghost class="swd-card-hover">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>

Loading Skeleton

 <div class="flex">
    <div>
        <swd-skeleton-shape style="width: 80px; aspect-ratio: 1/1;"></swd-skeleton-shape>
    </div>
    <div class="width-100">
        <swd-skeleton-text></swd-skeleton-text>
        <swd-skeleton-text></swd-skeleton-text>
        <swd-skeleton-text style="width: 80%;"></swd-skeleton-text>
    </div>
</div>

Loading Spinner

<swd-loading-spinner loading="true" class="width-100"></swd-loading-spinner> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. <swd-loading-spinner loading="true">
    <swd-card>Some text</swd-card>
</swd-loading-spinner>

<swd-loading-spinner loading="true">
    <button>Button</button>
</swd-loading-spinner>

Icons

hamburger
more
arrow-left
arrow-right
arrow-up
arrow-down
left
right
up
down
download
upload
external
share
done
close
add
delete
search
history
settings
options
filter
star
star-filled
loading-spinner
<swd-icon class="hamburger-icon"></swd-icon>
hamburger
Delete
<swd-icon class="hamburger-icon"></swd-icon> <span>hamburger-icon</span>

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

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

Media

Image

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

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>

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>
        <h4>Dialog</h4>
        <p>Really interesting text for the dialog to see how the dialog works</p>
        <div class="grid-cols-sm-2 grid-cols-1">
            <button class="red-color" 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 (15px when screen smaller than 576px)
--theme-line-heightround(1.6em, 1px)
--theme-border-radius5px
--theme-border-width3px
--theme-box-shadownone
--theme-element-spacing30px(20px when screen smaller than 576px)
--theme-inner-element-spacing20px(15px when screen smaller than 576px)
--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