Make
designs
KICK

with web:frametwo and
your favorite tools!

Discover the possibilities
hero image

Creator

The Framework was created by Satistile

Licence

The project run's under the MIT licence

Discord

If you need help, feel free to ask at our Discord Server

Documentation:

Get started:

Welcome at web:frametwo. When you want to use the CSS framework, please use the following code.

<link rel="stylesheet" href="https://satistile.github.io/webframetwo/resources/webframetwo.css">

For the JS framework, please use this.

<script src="https://satistile.github.io/webframetwo/resources/webframetwo.js">

When you want to use a specific version, then use the following file name scheme at the filenames in the links above.

webframetwo-[version].[file type]

To achieve the best responsibility with the framework, you can use the following meta-tags.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

Layouts and alignments

Standard side padding

CSS
<div class="wft padding sides standard">
<p>The standard side padding is responsive to the display size and used all over the side.</p>
</div>

The standard side padding is responsive to the display size and used all over the side.

Standard side margin

CSS
<div class="wft margin sides standard">
<p>"The standard side margin is responsive to the display size and used all over the side.</p>
</div>

The standard side margin is responsive to the display size and used all over the side.

Centered text align

CSS
<div class="wft text center">
<p><span class="wft code black">text-align: center</span> is applied here</p>
</div>

text-align: center is applied here

Block text align

CSS
<div class="wft text block">
<p><span class="wft code black">text-align: justify</span> is applied here</p>
</div>

text-align: justify is applied here

Absolute corner alignments

CSS
<p class="wft absolute top left preview border">top left</p>
<p class="wft absolute top right preview border">top right</p>
<p class="wft absolute bottom left preview border">bottom left</p>
<p class="wft absolute bottom right preview border">bottom right</p>

top left

top right

bottom left

bottom right

Text formatting

Underlines

CSS
<span class="wft underline">Normal underline</span>
<span class="wft underline magenta">Magenta underline</span>
<span class="wft underline blue">Blue underline</span>
<span class="wft underline red">Red underline</span>

<span class="wft chunky underline magenta">Magenta chunky underline</span>
<span class="wft chunky underline blue">Blue chunky underline</span>
<span class="wft chunky underline red">Red chunky underline</span>
Normal underline
Magenta underline
Blue underline
Red underline

Magenta chunky underline
Blue chunky underline
Red chunky underline

Font-weights

CSS
<span class="wft semi-bold">This is a text with the font weight semi-bold.</span>
<span class="wft bold">This is a text with the font weight bold.</span>
This is a text with the font weight semi-bold.
This is a text with the font weight bold.

Comment

CSS
<span class="wft comment">This</span> is a comment
This is a comment

Tab

CSS
<span class="wft tab"></span> <- this is a Tab. Of course without color in the framework.
<- this is a Tab. Of course without color in the framework.

Code

CSS
<code class="wft code white">This is a white code element.</code>
<div class="wft code block white">This is a white code block.</div>

<code class="wft code black">This is a black code element.</code>
<div class="wft code block black">This is a black code block.</div>
This is a white code element.
This is a white code block.
This is a black code element.
This is a black code block.

Rounded code block

CSS
<div class="wft code block rounded white">This is a white code block.</div>

<div class="wft code block rounded black">This is a black code block.</div>
This is a white code block.
This is a black code block.

Panels and badges

Panel

CSS
<div class="wft panel white">White panel</div>

<div class="wft panel black">Black panel</div>
White panel
Black panel

Rounded panel

CSS
<div class="wft panel rounded white">White panel</div>

<div class="wft panel rounded black">Black panel</div>
White panel
Black panel

Badge

CSS
<span class="wft badge white">This is a white badge.</span>

<span class="wft badge black">This is a black badge.</span>
This is a white badge.
This is a black badge.

Rounded badge

CSS
<span class="wft badge rounded white">This is a white badge.</span>

<span class="wft badge rounded black">This is a black badge.</span>
This is a white badge.
This is a black badge.

Buttons

Small button

CSS
<span class="wft button small white">This is a white small button.</span>

<span class="wft button small black">This is a black small button.</span>
This is a white small button.
This is a black small button.

Rounded small button

CSS
<span class="wft button small rounded white">This is a white small button.</span>

<span class="wft button small rounded black">This is a black small button.</span>
This is a white small button.
This is a black small button.

Button

CSS
<span class="wft button white">This is a white button.</span>

<span class="wft button black">This is a black button.</span>
This is a white button.
This is a black button.

Rounded Button

CSS
<span class="wft button rounded white">This is a white rounded button.</span>

<span class="wft button black rounded">This is a black rounded button.</span>
This is a white rounded button.
This is a black rounded button.

Input fields

Text input

CSS
<input type="text" class="wft input text white" placeholder="This is a white text input">
<input type="text" class="wft input text black" placeholder="This is a black text input">

Rounded text input

CSS
<input type="text" class="wft input text rounded white" placeholder="This is a rounded white text input">
<input type="text" class="wft input text rounded black" placeholder="This is a rounded black text input">

Small text input

CSS
<input type="text" class="wft input text small white" placeholder="This is a small white text input">
<input type="text" class="wft input text small black" placeholder="This is a small black text input">

Dropdown input

CSS
<select class="wft input dropdown white" name="dropdown white">
<option value="">This is a normal dropdown input</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>

<select class="wft input dropdown black" name="dropdown black">
<option value="">This is a normal dropdown input</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>

Rounded dropdown input

CSS
<select class="wft input dropdown rounded white" name="dropdown white">
<option value="">This is a rounded dropdown input</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>

<select class="wft input dropdown rounded black" name="dropdown black">
<option value="">This is a rounded dropdown input</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>

Small dropdown input

CSS
<select class="wft input dropdown small white" name="dropdown white">
<option value="">This is a small dropdown input</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>

<select class="wft input dropdown small black" name="dropdown black">
<option value="">This is a small dropdown input</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>

Trigger input

CSS
<label class="wft input trigger white">
<input type="checkbox">
<span class="wft input trigger-slider"></span>
</label>

<label class="wft input trigger black">
<input type="checkbox">
<span class="wft input trigger-slider"></span>
</label>

Rounded trigger input

CSS
<label class="wft input trigger rounded white">
<input type="checkbox">
<span class="wft input trigger-slider"></span>
</label>

<label class="wft input trigger rounded black">
<input type="checkbox">
<span class="wft input trigger-slider"></span>
</label>

CSS effects

No background

CSS
<span class="wft button small black no-background">This is a button without background</span> You can do this on every element
This is a button without background You can do this on every element

Y-axis transform on hover

CSS
<span class="wft button small black transform y-axis on-hover">This is a y-axis transformation on hover</span>
This is a y-axis transformation on hover

Z-axis transform on hover

CSS
<span class="wft button small black transform z-axis on-hover">This is a y-axis transformation on hover</span>
This is a y-axis transformation on hover

CSS animations

Skeleton placeholder

CSS
<div class="wft skeleton-placeholder line white"></div>
<div class="wft skeleton-placeholder circle white"></div>

<div class="wft skeleton-placeholder line black"></div>
<div class="wft skeleton-placeholder circle black"></div>

Rounded skeleton placeholder

CSS
<div class="wft skeleton-placeholder line rounded white"></div>

<div class="wft skeleton-placeholder line rounded black"></div>

Loading spinner

CSS
<span class="wft loading-spinner white"></span>
<span class="wft loading-spinner small white"></span>

<span class="wft loading-spinner black"></span>
<span class="wft loading-spinner small black"></span>

Helpful JS

No background

CSS
<div class="wft button small black" onclick="wft.Scroll('#explaination')">
Scroll to the explanation
</div>
<div id="explanation">
When you use the method <span class="wft code black">wft.Scroll()</span> and enter the element to scroll to into the brackets, the page scrolls to this element.
</div>
Scroll to the explanation
When you use the method wft.Scroll() and enter the element to scroll to into the brackets, the page scrolls to this element.

Checkbox state check

CSS
<script>
function checkboxStateCheck(element) {
alert(wft.CheckboxChecked(element));
}
</script>
<span class="wft button small black no-color-mode-toggle" onclick="checkboxStateCheck('#checkbox-showcase')">show state of checkbox</span><input type="checkbox" id="checkbox-showcase"><br> With the method <span class="wft code black">wft.CheckboxChecked(your checkbox)</span>, you can check if the checkbox is checked. In the brackets, yóu must write a query selector like <span class="wft code black">#test</span> or <span class="wft code black">.test</span>. The method will return <span class="wft code black">true</span> or <span class="wft code black">false</span>.
show state of checkbox
With the method wft.CheckboxChecked(your checkbox), you can check if the checkbox is checked. In the brackets, yóu must write a query selector like #test or .test. The method will return true or false.

Color mode toggle for wft elements

CSS
<label class="wft input trigger black">
<input type="checkbox" onclick="wft.ColorModeToggle()">
<span class="wft input trigger-slider"></span>
</label>
You can change the color mode with the method <span class="wft code black">wft.ColorModeToggle()</span>.You might change other aspects of your website when toggling the color modes, because this method only effects elements of the Framework. With the class <span class="wft code black">no-color-mode-toggle</span>, you can disable the color change.
You can change the color mode with the method wftColorModeToggle().You might change other aspects of your website when toggling the color modes, because this method only effects elements of the Framework. With the class no-color-mode-toggle, you can disable the color change.

Experimental features

Expander

CSS
<div class="wft expand parent">
<button class="wft button small black" onclick="wft.ExpandToggle(this)">This is the expand button</button>
<div class="wft expand content">
<div>
This is the expand content
</div>
</div>
</div>
This is the expand content

Border expander

CSS
<div class="wft border-expand wrapper">
<div class="wft button small black" onclick="wft.BorderExpandToggle(this)">
This is the border-expand button.
</div>
<div class="wft border-expand content">
This is the border-expanding content.
</div>
</div>
This is the border-expand button.
This is the border-expanding content.