A E S T H E T I C

Initializing start-up sequence...

A E S T H E T I C

description.txt

A vaporwave CSS framework.

Fork me on G I T H U B

Table of Contents

Elements

Button

Windows 95

Windows XP

          <h2>Button</h2>

<h3>Windows 95</h3>
<div class="aesthetic-windows-95-button">
  <button>
    OK
  </button>
</div>
<div class="aesthetic-windows-95-button-title-bar">
  <button>
    X
  </button>
</div>

<h3>Windows XP</h3>
<div class="aesthetic-windows-xp-button">
  <button>
    OK
  </button>
</div>
<div class="aesthetic-windows-xp-button-title-bar">
  <button>
    _
  </button>
</div>
<div class="aesthetic-windows-xp-button-title-bar-close">
  <button>
    X
  </button>
</div>

Checkbox

Windows 95

Windows XP

          <h2>Checkbox</h2>

<h3>Windows 95</h3>
<label class="aesthetic-windows-95-checkbox">Checkbox
  <input type="checkbox" />
  <span class="aesthetic-windows-95-checkmark"></span>
</label>

<h3>Windows XP</h3>
<label class="aesthetic-windows-xp-checkbox">Checkbox
  <input type="checkbox" />
  <span class="aesthetic-windows-xp-checkmark"></span>
</label>

Container

Windows 95

I am some contained element

I am some inner contained element

Windows XP

I am some contained element 
          <h2>Container</h2>

<h3>Windows 95</h3>
<div class="aesthetic-windows-95-container">
  I am some contained element
</div>

<br>

<div class="aesthetic-windows-95-container-indent">
  I am some inner contained element
</div>

<br>

<h3>Windows XP</h3>
<div class="aesthetic-windows-xp-container">
  I am some contained element
</div>

Dropdown

Windows 95

Windows XP

          <h2>Dropdown</h2>

<h3>Windows 95</h3>
<div class="aesthetic-windows-95-dropdown">
  <button class="aesthetic-windows-95-dropdown-trigger">
    File
  </button>
  <ul class="aesthetic-windows-95-dropdown-menu is-active">
    <li class="aesthetic-windows-95-dropdown-menu-item">
      <button>Menu Item 1</button>
    </li>
    <li class="aesthetic-windows-95-dropdown-menu-item">
      <button>Menu Item 2</button>
    </li>
    <hr>
    <li class="aesthetic-windows-95-dropdown-menu-item">
      <button>Menu Item 3</button>
    </li>
  </ul>
</div>

<h3>Windows XP</h3>
<div class="aesthetic-windows-xp-dropdown">
  <button class="aesthetic-windows-xp-dropdown-trigger">
    File
  </button>
  <ul class="aesthetic-windows-xp-dropdown-menu is-active">
    <li class="aesthetic-windows-xp-dropdown-menu-item">
      <button>Menu Item 1</button>
    </li>
    <li class="aesthetic-windows-xp-dropdown-menu-item">
      <button>Menu Item 2</button>
    </li>
    <hr>
    <li class="aesthetic-windows-xp-dropdown-menu-item">
      <button>Menu Item 3</button>
    </li>
  </ul>
</div>

Loaders

Windows 95 Boot Loader

Windows 95 Loader

Windows XP Loader

          <h2>Loaders</h2>

<h3>Windows 95 Boot Loader</h3>
<div class="aesthetic-windows-95-boot-loader">
  <div></div>
</div>

<h3>Windows 95 Loader</h3>
<div class="aesthetic-windows-95-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

<h3>Windows XP Loader</h3>
<div class="aesthetic-windows-xp-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

Modal

Windows 95

A E S T H E T I C
I am the modal content

Windows XP

A E S T H E T I C
I am the modal content 
          <h2>Modal</h2>

<h3>Windows 95</h3>
<div class="aesthetic-windows-95-modal">

  <!-- Title Bar -->
  <div class="aesthetic-windows-95-modal-title-bar">

    <div class="aesthetic-windows-95-modal-title-bar-text">
      A E S T H E T I C
    </div>

    <div class="aesthetic-windows-95-modal-title-bar-controls">
      <div class="aesthetic-windows-95-button-title-bar">
        <button>
          X
        </button>
      </div>
    </div>

  </div>


  <!-- Content -->
  <!-- Could be a tabbed container, or a set of dropdowns, etc... -->
  <div class="aesthetic-windows-95-modal-content">

    <div>
      I am the modal content
    </div>

    <amp-video alt="Windows 95 loading gif"
               src="https://media.giphy.com/media/edl5t7nDVPtC/giphy.mp4"
               width="400"
               height="300"
               layout="responsive"
               autoplay
               loop>
    </amp-video>

  </div>
</div>

<h3>Windows XP</h3>
<div class="aesthetic-windows-xp-modal">

  <!-- Title Bar -->
  <div class="aesthetic-windows-xp-modal-title-bar">

    <div class="aesthetic-windows-xp-modal-title-bar-text">
      A E S T H E T I C
    </div>

    <div class="aesthetic-windows-xp-modal-title-bar-controls">
      <div class="aesthetic-windows-xp-button-title-bar">
        <button>
          _
        </button>
      </div>
      <div class="aesthetic-windows-xp-button-title-bar-close">
        <button>
          X
        </button>
      </div>
    </div>

  </div>


  <!-- Content -->
  <!-- Could be a tabbed container, or a set of dropdowns, etc... -->
  <div class="aesthetic-windows-xp-modal-content">

    <div>
      I am the modal content
    </div>

    <amp-video alt="Windows xp loading gif"
               src="https://media.giphy.com/media/zsmE8wKNUDsc0/giphy.mp4"
               width="400"
               height="300"
               layout="responsive"
               autoplay
               loop>
    </amp-video>

  </div>
</div>

Notification

A E S T H E T I C

Hello! I am a notification and I F A D E I N

Windows XP

Hello! I am a notification and I F A D E I N 
          <h2>Notification</h2>

<h3>A E S T H E T I C</h3>
<div class="aesthetic-notification is-active">
  <button class="dismiss">X</button>
  <div class="aesthetic-notification-content">
    Hello! I am a notification and I <i>F A D E   I N</i>
  </div>
</div>

<h3>Windows XP</h3>
<div class="aesthetic-windows-xp-notification is-active">
  <button class="dismiss">X</button>
  <div class="aesthetic-windows-xp-notification-content">
    Hello! I am a notification and I <i>F A D E   I N</i>
  </div>
</div>

Radio

Windows 95

Windows XP

          <h2>Radio</h2>

<h3>Windows 95</h3>
<div>
  <label class="aesthetic-windows-95-radio">Option 1
    <input type="radio" name="my-aesthetic-windows-95-radio" />
    <span class="aesthetic-windows-95-checkmark"></span>
  </label>
</div>
<div>
  <label class="aesthetic-windows-95-radio">Option 2
    <input type="radio" name="my-aesthetic-windows-95-radio" />
    <span class="aesthetic-windows-95-checkmark"></span>
  </label>
</div>
<div>
  <label class="aesthetic-windows-95-radio">Option 3
    <input type="radio" name="my-aesthetic-windows-95-radio" />
    <span class="aesthetic-windows-95-checkmark"></span>
  </label>
</div>

<h3>Windows XP</h3>
<div>
  <label class="aesthetic-windows-xp-radio">Option 1
    <input type="radio" name="my-aesthetic-windows-xp-radio" />
    <span class="aesthetic-windows-xp-checkmark"></span>
  </label>
</div>
<div>
  <label class="aesthetic-windows-xp-radio">Option 2
    <input type="radio" name="my-aesthetic-windows-xp-radio" />
    <span class="aesthetic-windows-xp-checkmark"></span>
  </label>
</div>
<div>
  <label class="aesthetic-windows-xp-radio">Option 3
    <input type="radio" name="my-aesthetic-windows-xp-radio" />
    <span class="aesthetic-windows-xp-checkmark"></span>
  </label>
</div>

Select

Windows 95

Windows XP

          <h2>Select</h2>

<h3>Windows 95</h3>
<div class="aesthetic-windows-95-select">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <div class="aesthetic-windows-95-select-checkmark">
  </div>
</div>

<h3>Windows XP</h3>
<div class="aesthetic-windows-xp-select">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <div class="aesthetic-windows-xp-select-checkmark">
  </div>
</div>

Tabs

Windows 95

I am some tabbed contained element

Windows XP

I am some tabbed contained element 
          <h2>Tabs</h2>

<h3>Windows 95</h3>
<div class="aesthetic-windows-95-tabbed-container">
  <div class="aesthetic-windows-95-tabbed-container-tabs">
    <div class="aesthetic-windows-95-tabbed-container-tabs-button is-active">
      <button>
        General
      </button>
    </div>
    <div class="aesthetic-windows-95-tabbed-container-tabs-button">
      <button>
        Vapor
      </button>
    </div>
    <div class="aesthetic-windows-95-tabbed-container-tabs-button">
      <button>
        Macintosh
      </button>
    </div>
    <div class="aesthetic-windows-95-tabbed-container-tabs-button">
      <button>
        Anime
      </button>
    </div>
  </div>

  <div class="aesthetic-windows-95-container">
    I am some tabbed contained element
  </div>
</div>

<h3>Windows XP</h3>
<div class="aesthetic-windows-xp-tabbed-container">
  <div class="aesthetic-windows-xp-tabbed-container-tabs">
    <div class="aesthetic-windows-xp-tabbed-container-tabs-button is-active">
      <button>
        General
      </button>
    </div>
    <div class="aesthetic-windows-xp-tabbed-container-tabs-button">
      <button>
        Vapor
      </button>
    </div>
    <div class="aesthetic-windows-xp-tabbed-container-tabs-button">
      <button>
        Macintosh
      </button>
    </div>
    <div class="aesthetic-windows-xp-tabbed-container-tabs-button">
      <button>
        Anime
      </button>
    </div>
  </div>

  <div class="aesthetic-windows-xp-container">
    I am some tabbed contained element
  </div>
</div>

Taskbar

Windows 95

📶🔈🔔 
          <h2>Taskbar</h2>

<h3>Windows 95</h3>
<div class="aesthetic-windows-95-taskbar">
  <div class="aesthetic-windows-95-taskbar-start">
    <button>
      🏳️‍🌈 Start
    </button>
  </div>

  <ul class="aesthetic-windows-95-taskbar-start-menu is-active">
    <li class="aesthetic-windows-95-taskbar-start-menu-item">
      <button>Menu Item 1</button>
    </li>
    <li class="aesthetic-windows-95-taskbar-start-menu-item">
      <button>Menu Item 2</button>
    </li>
    <li class="aesthetic-windows-95-taskbar-start-menu-item">
      <button>Menu Item 3</button>
    </li>
  </ul>

  <div class="aesthetic-windows-95-taskbar-services">
    📶🔈🔔
  </div>
</div>

Text Input

Windows 95

Windows XP

          <h2>Text Input</h2>

<h3>Windows 95</h3>
<div>
  <input class="aesthetic-windows-95-text-input" type="text" value="c:\aesthetic\src" />
</div>
<div class="margin-top">
  <textarea class="aesthetic-windows-95-text-input"></textarea>
</div>

<h3>Windows XP</h3>
<div>
  <input class="aesthetic-windows-xp-text-input" type="text" value="c:\aesthetic\src" />
</div>
<div class="margin-top">
  <textarea class="aesthetic-windows-xp-text-input"></textarea>
</div>

Effects

CRT

class="aesthetic-effect-crt"

          <h2>CRT</h2>
<p><i>class="aesthetic-effect-crt"</i></p>
<div class="aesthetic-effect-crt">
  <amp-video alt="Cowboy Bebop gif"
  src="https://media.giphy.com/media/gQbVzXQQbGO7C/giphy.mp4"
  width="400"
  height="300"
  layout="fixed"
  autoplay
  loop>
</amp-video>
</div>

Text Glitch

class="aesthetic-effect-text-glitch" data-glitch="INNER_TEXT_HERE"

A E S T H E T I C

          <h2>Text Glitch</h2>
<p><i>class="aesthetic-effect-text-glitch" data-glitch="INNER_TEXT_HERE"</i></p>
<div>
  <h1 class="aesthetic-effect-text-glitch" data-glitch="A E S T H E T I C">A E S T H E T I C</h1>
</div>

Colors

Colors have both a font and background color class. To use the font color, use the class: "aesthetic-COLOR_NAME_HERE-color". To use the background color, use the class: "aesthetic-COLOR_NAME_HERE-bg-color"

Colors

aesthetic-white

aesthetic-black

aesthetic-25-transparent

aesthetic-50-transparent

aesthetic-75-transparent

aesthetic-purple

aesthetic-light-purple

aesthetic-pink

aesthetic-blue

aesthetic-light-blue

aesthetic-green

Arizona colors

aesthetic-arizona-pink

aesthetic-arizona-black

aesthetic-arizona-lime

aesthetic-arizona-green

aesthetic-arizona-blue

Pepsi colors

aesthetic-pepsi-blue

aesthetic-pepsi-red

aesthetic-pepsi-white

aesthetic-pepsi-cola

aesthetic-pepsi-grey

Windows (95ish) colors

aesthetic-windows-95-grey

aesthetic-windows-95-grey-border

aesthetic-windows-95-green

Windows XP colors

aesthetic-windows-xp-blue

          <h2>Colors</h2>
<div>
  <h3>aesthetic-white</h3>
  <div class="aesthetic-white-bg-color">
  </div>
  <h3>aesthetic-black</h3>
  <div class="aesthetic-black-bg-color">
  </div>
  <h3>aesthetic-25-transparent</h3>
  <div class="aesthetic-25-transparent-bg-color">
  </div>
  <h3>aesthetic-50-transparent</h3>
  <div class="aesthetic-50-transparent-bg-color">
  </div>
  <h3>aesthetic-75-transparent</h3>
  <div class="aesthetic-75-transparent-bg-color">
  </div>
  <h3>aesthetic-purple</h3>
  <div class="aesthetic-purple-bg-color">
  </div>
  <h3>aesthetic-light-purple</h3>
  <div class="aesthetic-light-purple-bg-color">
  </div>
  <h3>aesthetic-pink</h3>
  <div class="aesthetic-pink-bg-color">
  </div>
  <h3>aesthetic-blue</h3>
  <div class="aesthetic-blue-bg-color">
  </div>
  <h3>aesthetic-light-blue</h3>
  <div class="aesthetic-light-blue-bg-color">
  </div>
  <h3>aesthetic-green</h3>
  <div class="aesthetic-green-bg-color">
  </div>
</div>

<h2>Arizona colors</h2>
<div>
  <h3>aesthetic-arizona-pink</h3>
  <div class="aesthetic-arizona-pink-bg-color">
  </div>
  <h3>aesthetic-arizona-black</h3>
  <div class="aesthetic-arizona-black-bg-color">
  </div>
  <h3>aesthetic-arizona-lime</h3>
  <div class="aesthetic-arizona-lime-bg-color">
  </div>
  <h3>aesthetic-arizona-green</h3>
  <div class="aesthetic-arizona-green-bg-color">
  </div>
  <h3>aesthetic-arizona-blue</h3>
  <div class="aesthetic-arizona-blue-bg-color">
  </div>
</div>

<h2>Pepsi colors</h2>
<div>
  <h3>aesthetic-pepsi-blue</h3>
  <div class="aesthetic-pepsi-blue-bg-color">
  </div>
  <h3>aesthetic-pepsi-red</h3>
  <div class="aesthetic-pepsi-red-bg-color">
  </div>
  <h3>aesthetic-pepsi-white</h3>
  <div class="aesthetic-pepsi-white-bg-color">
  </div>
  <h3>aesthetic-pepsi-cola</h3>
  <div class="aesthetic-pepsi-cola-bg-color">
  </div>
  <h3>aesthetic-pepsi-grey</h3>
  <div class="aesthetic-pepsi-grey-bg-color">
  </div>
</div>

<h2>Windows (95ish) colors</h2>
<div>
  <h3>aesthetic-windows-95-grey</h3>
  <div class="aesthetic-windows-95-grey-bg-color">
  </div>
  <h3>aesthetic-windows-95-grey-border</h3>
  <div class="aesthetic-windows-95-grey-border-bg-color">
  </div>
  <h3>aesthetic-windows-95-green</h3>
  <div class="aesthetic-windows-95-green-bg-color">
  </div>
</div>

<h2>Windows XP colors</h2>
<div>
  <h3>aesthetic-windows-xp-blue</h3>
  <div class="aesthetic-windows-xp-blue-bg-color">
  </div>
</div>

Fonts

Outline

class="aesthetic-font-modifier-outline-black"

class="aesthetic-font-modifier-outline-pink"

class="aesthetic-font-modifier-outline-purple"

Gradient

class="aesthetic-font-modifier-gradient-arizona"

class="aesthetic-font-modifier-gradient-pink-blue"

class="aesthetic-font-modifier-gradient-pink-green"

class="aesthetic-font-modifier-gradient-green-pink"

class="aesthetic-font-modifier-gradient-purple-blue"

          <div>
  <h2>Outline</h2>
  <div>
    <h1 class="aesthetic-font-modifier-outline-black">class="aesthetic-font-modifier-outline-black"</h1>
    <h1 class="aesthetic-font-modifier-outline-pink">class="aesthetic-font-modifier-outline-pink"</h1>
    <h1 class="aesthetic-font-modifier-outline-purple">class="aesthetic-font-modifier-outline-purple"</h1>
  </div>
  <h2>Gradient</h2>
  <div>
    <div>
      <h1 class="aesthetic-font-modifier-gradient-arizona">class="aesthetic-font-modifier-gradient-arizona"</h1>
    </div>
    <div>
      <h1 class="aesthetic-font-modifier-gradient-pink-blue">class="aesthetic-font-modifier-gradient-pink-blue"</h1>
    </div>
    <div>
      <h1 class="aesthetic-font-modifier-gradient-pink-green">class="aesthetic-font-modifier-gradient-pink-green"</h1>
    </div>
    <div>
      <h1 class="aesthetic-font-modifier-gradient-green-pink">class="aesthetic-font-modifier-gradient-green-pink"</h1>
    </div>
    <div>
      <h1 class="aesthetic-font-modifier-gradient-purple-blue">class="aesthetic-font-modifier-gradient-purple-blue"</h1>
    </div>
  </div>
</div>