Building a website?
'This' is the way.

responsive, fluid, freedom

DOWNLOAD V1.0 DOWNLOAD V2.0 (beta)

MENU

What is THIS?

THIS is an easy-to-use responsive HTML5 framework for building responsive webdesigns without limitations. It is NOT a UI kit! THIS is a simple responsive boilerplate to get you started on easily building your pixel-perfect designs. With THIS no website is the same. Your skill and expertise define the design, UX and functions of the website, and THIS makes it easy to build.

NEW IN V2


  • V2 is completely rebuilt in scss in stead of plain css
  • Flex box has been added as a new feature
  • Some classes are deprecated and/or replaced (shown in documentation below)


(full documentation will be added soon)

THIS grid

12-column grid - standard example

Just as any other framework THIS offers a standard 12-column grid. Nice and familiar :)
Don't want your columns to simply stack in smaller devices? Use the device grid classes.

  • Smartphones and up: xs-*
  • Phablets, Tablets portrait, and up: sm-*
  • Tablets, small Laptops, and up: md-*
  • Laptops, Desktops: lg-*
  • NEW IN V2 4k screens, TV's and larger xl-* (full documentation will be added soon)
sm-col6
sm-col6
sm-col7
sm-col5
sm-col8
sm-col4
sm-col9
sm-col3
sm-col10
sm-col2
sm-col11
sm-col1
sm-col12
1
2
3
4
5
6
7
8
9
<div class="row">
	<div class="sm-col6"></div> 
	<div class="sm-col6"></div>
</div>

<div class="row">
	<div class="sm-col7"></div> 
	<div class="sm-col5"></div>
</div>

12-column grid - advanced example

Just as any other framework THIS offers a standard 12-column grid. Nice and familiar :)
Don't want your columns to simply stack in smaller devices? Use the device grid classes.

  • Smartphones and up: xs-*
  • Phablets, Tablets portrait, and up: sm-*
  • Tablets, small Laptops, and up: md-*
  • Laptops, Desktops and larger screens: lg-*
  • NEW IN V2 4k screens, TV's and larger xl-* (full documentation will be added soon)
xs-col6, sm-col7, md-col3, lg-col4
xs-col6, sm-col5, md-col3, lg-col4
xs-col6, sm-col3, md-col3, lg-col4
xs-col6, sm-col9, md-col3, lg-col4
1
2
3
4
5
6
<div class="row">
	<div class="xs-col6 sm-col7 md-col3 lg-col4"></div> 
	<div class="xs-col6 sm-col5 md-col3 lg-col4"></div>
	<div class="xs-col6 sm-col3 md-col3 lg-col4"></div> 
	<div class="xs-col6 sm-col9 md-col3 lg-col4"></div>
</div>

Percentual grid - basic example

To offer more freedom in designing your page, THIS also offers a percentual lay-out.
For example: This way you can creat assymetrical layouts, or 5 a column grid.

  • Smartphones and up: xs-*
  • Phablets, Tablets portrait, and up: sm-*
  • Tablets, small Laptops, and up: md-*
  • Laptops, Desktops and larger screens: lg-*
  • NEW IN V2 4k screens, TV's and larger xl-* (full documentation will be added soon)
sm-50
sm-50
sm-34
sm-66
sm-17
sm-23
sm-60
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="row">
	<div class="sm-50"></div> 
	<div class="sm-50"></div>
</div>

<div class="row">
	<div class="sm-34"></div> 
	<div class="sm-66"></div>
</div>

<div class="row">
	<div class="sm-17"></div> 
	<div class="sm-23"></div>
	<div class="sm-60"></div>
</div>

Nesting

Just as in any other framework you can simply nest columns and even
combine column blocks with percentual blocks

sm-col6
within sm-28
sm-col6
within sm-28
sm-col4
within sm-72
sm-19
within sm-72
sm-56
within sm-72 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
	<div class="row">
		<div class="sm-28">
			<div class="row">
				<div class="sm-col6">
				sm-col6 within sm-28
				</div>
				<div class="sm-col6">
				sm-col6 within sm-28
				</div>
			</div>
		</div> 
		
		<div class="sm-72">
			<div class="row">
				<div class="sm-25">
				sm-25 within sm-72
				</div>
				
				<div class="sm-col3">
				sm-col3 within sm-72
				</div>
				
				<div class="sm-col4">
				sm-col4 within sm-72
				</div>
				
			</div>
		</div> 
	</div>

Offset

Move columns to the right using .md-offset-col* or .md-offset-* classes.
These classes increase the left margin of a block by *. To reset the offset for a
specific device, simply add .*-offset-0. For example .sm-offset-0

Offset column based

sm-col6
sm-offset-col3, sm-col3
sm-col4
sm-offset-col3, sm-col3
sm-col2

Offset percentage based

sm-32
sm-offset-12, sm-21
sm-35
sm-offset-20, sm-32
sm-21
sm-27
1
2
3
4
5
6
7
8
9
<div class="row">
	<div class="sm-col6">sm-col6</div> 
	<div class="sm-offset-col3 sm-col3">sm-offset-col3 sm-col3</div>
</div>

<div class="row">
	<div class="sm-45">sm-45</div> 
	<div class="sm-offset-45 sm-10">sm-offset-45 sm-10</div>
</div>

Container

If you do not want your content to spread over the entire width of the viewport,
You can simply wrap your content with the class .container which has
a standard width of 80% of the viewport. 

1
2
3
4
5
	<div class="row">
		<div class="container">
			Your content for this row.
		</div>
	</div>

Standard paddings

To add standard paddings to your blocks, use .inner classes.

NEW IN V2


.inner classes are deprecated in v2 and replaced with .padding and .margin classes.

For paddings we use ".device-padding-side-[1-5]". For example .sm-padding-4 or .md-padding-top-2

For margins we use ".device-margin-side-[1-5]". For example .sm-margin-4 or .md-margin-top-2

(full documentation will be added soon)

For all devices (V1 only)

padding on all sides (inner)
padding on the left (inner-left)
padding on the right (inner-right)
padding on top (inner-top)
padding on the bottom (inner-bottom)
inner-left + inner-right
inner-right + inner-top

For specific devices (V1 only)

padding on all sides only on sm- devices and larger (sm-inner)
padding on the left on md- devices and larger (md-inner-left)
padding on the right on lg- devices (lg-inner-right)
padding on the bottom (inner-bottom)
inner-left + inner-right
inner-right + inner-top
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
		<div class="sm-20">
			<div class="inner">
				padding on all sides, on all devices (inner)
			</div>
		</div>
		
		<div class="sm-20">
			<div class="sm-inner">
				padding on all sides only on sm- devices and larger (sm-inner)
			</div>
		</div> 
		
		<div class="sm-20">
			<div class="md-inner-left">
				padding on the left on md- devices and larger (md-inner-left)
			</div>
		</div> 
		
		<div class="sm-20">
			<div class="lg-inner-right">
				padding on the right on lg- devices (lg-inner-right)
			</div>
		</div> 
		
		<div class="sm-20">
			<div class="inner-right inner-top">
				Padding on the right and on top (inner-right + inner-top)
			</div>
		</div>

Hide on specific device

If you want a block to hide on a specific device, you can use the .hide-* class

Hiding is NOT combineable for multiple devices! Only hide for one device at once!
If you want a block to hide on a couple of devices, please use the .show-*
option (see below).

shows
shows
hides on sm- devices
shows
hides on md-devices
shows

Show on specific devices

If you want a block only to show up an specific devices you can use the .show-* class

shows
shows
shows on sm- devices
shows
shows on md-devices
shows
shows
shows on md- and lg- devices
shows on md- and lg- devices
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
		<div class="sm-col3 hide-md">
		hides on md-devices	
		</div> 
		
		
		<div class="sm-col3">
		shows
		</div>
		
		
		<div class="sm-col3 show-md show-lg">
		shows on md- and lg- devices	
		</div>

THIS typography

Headings

Header1(2.286em (=32px))

Header2(1.714em (=24px))

Header3(1.286em (=18px))

Header4(1.143em (=16px))

Header5(1em (=14px))
Header6(0.857em (=12px))
1
2
3
4
5
6
 <h1>Header1</h1>
 <h2>Header2</h2>
 <h3>Header2</h3>
 <h4>Header2</h4>
 <h5>Header2</h5>
 <h6>Header2</h6>

Paragraph sizing

Below you can find some standard font sizes to use with THIS. But if you want to shrink or
enlarge the texts throughout your whole website, you can simply change the base fontsize of 14px
that is stated on the body tag in the THIS-elements.css file. Since all the fonts are calculated
with em values, changing the base fontsize will effect all the texts on your page including
headers, lists,...

This is a lead paragraph. cou simply add the class .lead to your <p> tag. A paragraph with .lead class added to it, will be 1.3em in size, which equals to 18px.

This is a normal paragraph, nothing special. A standard paragraph in THIS is 1em, which equals to 14px.

this is text within a <small> tag. It does not necessarily need to be within a <p> element. Small text is 0.786em, which equals to 11px. 

1
2
3
4
5
6
7
	<p class="lead">This is a lead paragraph.</p>
				
				
	<p>This is a normal paragraph.</p>

		
	<p><small>This is a small paragraph.</small></p>

Paragraph alignment

You can simpy align your paragraphs by adding the class .text-*

  • Left aligned: .text-left
  • Right aligned: .text-right
  • Canter aligned: .text-center
  • Justified: .text-justify

This is left aligned text. Nothing special here

This is right aligned text. Simply add the .text-right class to your <p> element.

This is center aligned text. Simply add the .text-center class to your <p> element.

This is text with justified alignment. Simply add the .text-justify class to your <p> element. No need to read any further. We're just typing some random sentences now to fill up this paragraph so it shows you the justified alignment. Still reading? Why don't you take a break to recommend THIS to your fellow webdesigners on facebook or twitter :) 

1
2
3
4
5
6
7
	<p class="text-left">This is left aligned text.</p>
					
	<p class="text-right">This is right aligned text.</p>
					
	<p class="text-center">This is center aligned text.</p>
		
	<p class="text-justify">This is text with justified alignment.</p>

Lists

Standard styling for numbered and unnumbered lists. Nested lists will get an exta indent.

  • Unnumbered list item 1
  • Unnumbered list item 2
  • Unnumbered list item 3
    • Second unnumbered list item 1
    • Second unnumbered list item 2
    • Second unnumbered list item 3
      • Third unnumbered list item 1
      • Third unnumbered list item 2
  1. Numbered list item 1
  2. Numbered list item 2
  3. Numbered list item 3
    1. Second numbered list item 1
    2. Second numbered list item 2
    3. Second numbered list item 3
      1. Third numbered list item 1
      2. Third numbered list item 2
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  <ul>
    <li>Unnumbered list item 1</li>
    <li>Unnumbered list item 2</li>
    <li>Unnumbered list item 3<br>
    	<ul>
			<li>Second unnumbered list item 1</li>
			<li>Second unnumbered list item 2</li>
			<li>Second unnumbered list item 3 <br>
				<ul>
					<li>Third unnumbered list item 1</li>
					<li>Third unnumbered list item 2</li>
        		</ul>
			</li>
		</ul>    
    </li>
  </ul>
    
    
  <ol>
    <li>Numbered list item 1</li>
    <li>Numbered list item 2</li>
    <li>Numbered list item 3<br>
    	<ol>
			<li>Second numbered list item 1</li>
			<li>Second numbered list item 2</li>
			<li>Second numbered list item 3 <br>
				<ol>
					<li>Third numbered list item 1</li>
					<li>Third numbered list item 2</li>
        		</ol>
			</li>
		</ol>    
    </li>
  </ol>

Special text elements

Below you can find some examples for special text elements such as keyboard entry, marked text,...

Use <code> to write code

Use <kbd> to write keyboard entry

the <abbr> tag lets you write an abbreviation.

Use <mark> to write marked text.

the <del> tag lets you write deleted text. 

1
2
3
4
5
       <code>this is code</code>
       <kbd>this is keyboard entry</kbd>
       <abbr title="this is an abbreviation">what is this?</abbr>    
       <mark>this is marked text</mark>
       <del>this is deleted text</del>

Blockquotes

The standard markup and styling for blockquotes.

This is a blockquote

a quote by John Smith

This is a blockquote

a quote by John Smith

This is a blockquote

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    <blockquote>
	<p>This is a blockquote</p>
	<footer><small>a quote by <cite title="Source Title">John Smith</cite></small></footer>
    </blockquote>
    

    <blockquote>
	<h3>This is a blockquote</h3>
	<footer>a quote by <cite title="Source Title">John Smith</cite></footer>
    </blockquote>
    

    <blockquote>
        <h1>This is a blockquote</h1>
	<footer class="lead">a quote by <cite title="Source Title">John Smith</cite></footer>
    </blockquote>

Addresses

The standard markup and styling for an address.

TITLE
addressline 1
addressline 2
P: (123) 456-7890 
1
2
3
4
5
6
        <address>
	  <strong>TITLE</strong><br>
	  addressline 1<br>
	  addressline 2<br>
	  P: (123) 456-7890
	</address>

THIS elements

Buttons

THIS contains a series of standard options for buttons. Add the class .button to start styling your button. Then define the size by adding the class .button-* to your link. The last step is defining the color of the button. We will get into that below

  • Extra small button: .button-xs
  • Small button: .button-sm
  • Medium sized button: .button-md
  • Large: .button-lg
button-lg button-md button-sm button-xs 
1
2
3
4
	<a class="button button-lg button-primary" href="#">button-lg</a>
	<a class="button button-md button-primary" href="#">button-md</a>
	<a class="button button-sm button-primary" href="#">button-sm</a>
	<a class="button button-xs button-primary" href="#">button-xs</a>

Button colors and styles

When you have defined the size of your button you can choose from a series of colors predefined in THIS. If you prefer rounded buttons, you can also add the class .rounded to your button

  • Blue: .button-primary
  • Purple: .button-secondary
  • Grey: .button-standard
  • Green: .button-ok
  • Yellow: .button-warning
  • Red: .button-error

  • rounded: .rounded
button-primary button-secondary button-standard button-ok button-warning button-error

button-primary button-secondary button-standard button-ok button-warning button-error 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
	<a class="button button-md button-primary" href="#">button-primary</a>
	<a class="button button-md button-secondary" href="#">button-secondary</a>
	<a class="button button-md button-standard" href="#">button-standard</a>
	<a class="button button-md button-ok" href="#">button-ok</a>
	<a class="button button-md button-warning" href="#">button-warning</a>
	<a class="button button-md button-error" href="#">button-error</a>
					
	<a class="button button-md button-primary rounded" href="#">button-primary</a>
	<a class="button button-md button-secondary rounded" href="#">button-secondary</a>
	<a class="button button-md button-standard rounded" href="#">button-standard</a>
	<a class="button button-md button-ok rounded" href="#">button-ok</a>
	<a class="button button-md button-warning rounded" href="#">button-warning</a>
	<a class="button button-md button-error rounded" href="#">button-error</a>

Buttongroups

Within button groups you can easily use different colors, and also choose for a regular or rounded finish.

button 1 button 2 button 3

button 1 button 2 button 3 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
	<div class="button-group">
		<a class="button button-md button-primary" href="#">button 1</a> 
		<a class="button button-md button-primary" href="#">button 2</a> 
		<a class="button button-md button-primary" href="#">button 3</a> 
	</div>
					

	<div class="button-group rounded">
		<a class="button button-md button-ok" href="#">button 1</a> 
		<a class="button button-md button-error" href="#">button 2</a> 
		<a class="button button-md button-warning" href="#">button 3</a> 
	</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
	<a class="primary" href="#">link primary</a>

	<a class="secondary" href="#">link secondary</a>

	<a class="standard" href="#">link standard</a>

	<a class="ok" href="#">link ok</a>

	<a class="warning" href="#">link warning</a>

	<a class="error" href="#">link error</a>

Wells

For a standard background option (often used to display code blocks) you can use the .well class. Just as with buttons, you can choose for a standard, or a slightly rounded version by simply adding the .rounded class

NEW IN V2


.well class is deprecated in v2 and replaced with .card class.

(full documentation will be added soon)

hello, I'm in a well

hello, I'm in a rounded well 

1
2
3
4
5
6
7
8
	<div class="well">
		<p> hello, I'm in a well </p>			
	</div>
		
		
	<div class="well rounded">		
		<p> hello, I'm in a rounded well </p>		
	</div>

Tables

We offer 3 variants of tables in 2 sizes: Standard tables, striped tables, and hover tables. These can simply be triggered by adding a specific class.

  • Standard .table
  • Striped: .table-striped
  • Hover: .table-hover

  • Large table: .table-lg
Standard table
cell1 cell2
cell3 cell4
cell5 cell6
cell7 cell8


Striped table
cell1 cell2
cell3 cell4
cell5 cell6
cell7 cell8


Table with hover effect
cell1 cell2
cell3 cell4
cell5 cell6
cell7 cell8


Larger table with stripe effect
cell1 cell2
cell3 cell4
cell5 cell6
cell7 cell8 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
	<table cellpadding="0" cellspacing="0" class=" table">
	  <tr>
	    <td>
		content for regular table
	    </td>
	  </tr>
	</table>


	<table cellpadding="0" cellspacing="0" class=" table-striped">
	  <tr>
	    <td>
		content for striped table
	    </td>
	  </tr>
	</table>


	<table cellpadding="0" cellspacing="0" class=" table-hover">
	  <tr>
	    <td>
		content for table with hover effect
	    </td>
	  </tr>
	</table>


	<table cellpadding="0" cellspacing="0" class=" table-striped table-lg">
	  <tr>
	    <td>
		content for larger table
	    </td>
	  </tr>
	</table>

Forms

All input fields will automatically get a 100% width. So the easiest way to build the forms, is with the standard column and percentual blocks. An example below.

Submit 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
   <form>
      <div class="row">
            	<div class="md-col6">
                <div class="inner">
                	<label>First name</label>
                    <input type="text" placeholder="John">
                    
                    <label>Last name</label>
                    <input type="text" placeholder="Doe">
                    
                    <label>email adress</label>
                    <input type="text" placeholder="name@domain.com">

                </div>
                </div>
                
                
                <div class="md-col6">
                <div class="inner">
                	<div class="row">
                		<div class="md-70">
                			<label>Street</label>
                    		<input type="text">
                    	</div>
                    
                    	<div class="md-30">
                        <div class="md-inner-left">
                			<label>color</label>
                    		<input type="color">
                        </div>
                    	</div>
                    </div>
                    
                    <div class="row">
                		<div class="md-40">
                        
                			<label>Zip-code</label>
                    		<input type="text">
                        
                    	</div>
                    
                    	<div class="md-60">
                        <div class="md-inner-left">
                			<label>upload</label>
                    		<input type="file">
                    	</div>
                        </div>
                    </div>
                    
                    <div class="row">
                    	<div class="md-100">
                    		<label>range</label>
                    		<input type="range">
                    	</div>
                    </div>
                    
                    

                </div>
                </div>
                
                <div class="md-col12">
                <div class="inner">
                <label>Message</label>
                <textarea placeholder="your message here"></textarea>
                
                <input type="submit" class="button button-md button-primary">
                
                </div>
                </div>
                
      </div>
   </form>

Form validation

you can simply add validation to forms by adding .error or .ok classes to your input fields

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
	<form>
           <div class="row">
           	
            	<div class="md-col6">
                <div class="inner">
                	<label>First name</label>
                    <input type="text" placeholder="John" class="error">
                </div>
                </div>
                
                
                <div class="md-col6">
                <div class="inner">
                	<label>Last name</label>
                    <input type="text" placeholder="John" class="ok">
                </div>
                </div>
                
            </div>
        </form>

© THIS is a project of Davy Meykens

The purpose of this website is to distribute the open source code of THIS framework. THIS is not related to Disney®, The Mandalorian, or any other trademark in any way. Click here for the source of the image we used in the header section of the website. For any questions please send an email to me@davymeykens.com. I have spoken.