Typography

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

<strong>Strong text</strong>

<i>Italic text</i>

<u>Underline text</u>

<del>~~Deleted text~~</del>

<ins>Inserted text</ins>

Navigation

The above navigation bar is produced with the following code. Here is a change with the original wing.css: this .css has nested classes and you don't need to specify class="nav-logo", class="nav-item" or class="nav-menu" classes. They are just class="logo", class="item", class="menu" and so on:

    
     <nav>
      <div class="nav">
       <img class="logo" src="img/logo.png" alt="Wing logo">
       <h5 class="brand">Brand</h5>
       <a class="item" href="#">Link 1</a>
       <a class="item" href="#">Link 2</a>
       <div class="item">
        <a class="item dropdown" data-toggle="dropdown">Dropdown</a>
        <ul class="hidden">
         <div class="background-white">
          <li class="item">Item 1</li>
          <li class="item">Item 2</li>
          <li class="item">Item 3</li>
         </div>
        </ul>
       </div>
       <div class="menu" href="#">
        <a class="item" href="#">Menu Item 1</a>
       </div>
       <div class="item" href="#">After menu item</div>
      </div>
     </nav>

For the dropdown menu, is necesary to load js/wing.dropdown.js at the end of the body with:

    
     <script type="text/javascript" src="js/wing.dropdown.js"></script>

Grid

Grids are flex, meaning that as many columns as you add, they will be displayed next to each other and everyone takes the same space:

Column 1, unique

Column 1

Column 2

Column 1

Column 2

Column 3

Column 1

Column 2

Column 3

Column 4

Column 1

Column 2

Column 3

Column 4

Column n

    
     <div class="row">
      <div class="col">
       <p>Column 1</p>
      </div>
      <div class="col">
       <p>Column 2</p>
      </div>

      As many as needed…

      <div class="col">
       <p>Column n</p>
      </div>
     </div>

Grid with col size

col-1 to col-12 take a value proportional to the value. E.g. two col-12 make them to take half the space. That means they don't need to add to 12, like for example Bootstrap, but it helps with the proportions.

col-12

col-1

col-11

    
     <div class="row">
      <div class="col-1">
       <p>Col 1</p>
      </div>
      <div class="col-11">
       <p>Col 11</p>
      </div>
     </div>

col-1

col-2

col-3

col-4

col-5

Buttons

     
      <button>Default button</button>
      <button class="outline">Outline button</button>

Forms

Form inputs are auto styled, you need no classes to get the following look:

Lists

Item 1
Item 2

Item 3
Item 4

Item 5
Item 6

Item 7

Item 1
Item 2

Item 3
Item 4

Item 5
Item 6

Item 7

Tables

Header 1	Header 2	Header 3
Col 1	Col 2	Col 3
Col 1	Col 2	Col 3

Cards

Cards are displayed up to two per line. Here is a change with the original wing.css: this .css has nested classes and you don't need to specify class="card-header", class="card-body" or class="card-footer" classes. They are just class="header", class="body" and class="footer".

Card body

Card 2 body

Author: @tanya_snimaet

Card 3 body

    
     <div class="cards">
      <div class="card">
       <div class="header">Card 3 header</div>
       <div class="body">
        <img src="img/sample.jpg" alt="Sample image">
        <caption>Author: <a href="https://www.instagram.com/tanya_snimaet/">@tanya_snimaet</a></caption>
        <p>Card 3 body</p>
       </div>
       <div class="footer">
        <div class="item">Footer Item 1</div>
        <div class="item">Footer Item 2</div>
       </div>
      </div>
     </div>

Utilities

Text alignment

<div class=pull-right>Right floating div</div>

Right floating div

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

<div class=pull-left>Left floating div</div>

Left floating div

<p class=text-center>Center aligned text</p>

Center aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

<p class=text-left>Left aligned text</p>

Left aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

<p class=text-right>Right aligned text</p>

Right aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

Width and height, size, alignment…

full-width

<div class=full-width>Full width</div>

Full width

full-height

<div class=full-height>Full height</div>

Full height

full-screen

<div class=full-screen>Full screen</div>

Full screen

fixed

There should be a fixed element in the bottom right corner of the screen, created with this class.

<div class="fixed" style="width: 100px; height: 50px; bottom: 50px; right: 100px;">Fixed</div>

"fixed" class on container div (see in "Utilities section)

hidden

<div class="hidden">Hidden</div>

There's a hidden element after this

There's a hidden element before this

vertical-align

    
     <div class="vertical-align">
      <div>Item</div>
     </div>

Item

horizontal-align

    
     <div class="horizontal-align">
      <div>Item</div>
     </div>

Item 1

center, right, left

    
     <div class="center">
      <div>center</div>
     </div>

center

    
     <div class="right">
      <div>right</div>
     </div>

right

    
     <div class="left">
      <div>left</div>
     </div>

left

Flex

The following flex arrangements are created with the following code, replacing xxxx-xxxx with the classes shown below:

    
     <div class="flex xxxx-xxxx">
      <div>First</div>
      <div>Second</div>
      <div>Third</div>
     </div>

justify-start

First

Second

Third

justify-center

First

Second

Third

justify-end

First

Second

Third

align-start

First

Second

Third

align-center

First

Second

Third

align-end

First

Second

Third

direction-vertical

First

Second

Third

direction-horizontal

First

Second

Third

Borders and Colors

Add the following classes to your elements. Note that some gray backgrounds are added here to xxxx-white classes to show the effect, but the styles don't do that.

    
     <div class="border-xxxx color-xxxx background-xxxx">Content</div>

border-black

border-gray

border-white

border-blue

border-red

border-yellow

border-green

color-black

color-gray

color-white

color-blue

color-red

color-yellow

color-green

background-black

background-gray

background-white

background-blue

background-red

background-yellow

background-green

border-rounded

border-circle

Misc

Horizontal rule

<hr>

Code block

Lines don't wrap. Background gray is added by the stylesheet:


    padding: 0.2rem 0.5rem;
    margin: 0 0.2rem;
    font-size: 90%;
    white-space: nowrap;

Pre and code block

Code is preformated. Background gray is added by the stylesheet:

    
     padding: 0.2rem 0.5rem;
     margin: 0 0.2rem;
     font-size: 90%;
     white-space: nowrap;
     background: #F1F1F1;
     border: 1px solid #E1E1E1;
     border-radius: 4px;
     font-family: "Consolas", "Monaco"