UITerminal
Terminal Style CSS Framework
Introduction
UITerminal is an Terminal Style CSS Framework.
Install
You can get UITerminal with CDN.
<head>
<link href="https://cdn.jsdelivr.net/gh/omerimzali/uiterminal@master/uiterminal.min.css">
</head>Or You can clone it.
git clone https://github.com/omerimzali/uiterminal.git
Usage
Before start to use UITerminal, You should get 'Press Start 2P' to your workarea.
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/omerimzali/uiterminal@master/uiterminal.min.css" >
</head>Elements&Colors&ETC
- uiterminal-full: It's a containter for other uiterminal elements.
<div class='uiterminal-full'>
- uiterminal-line: It's basicly a line for any content
<span class='uiterminal-line'>.uiterminal-line</span>
<span class='uiterminal-line is-centered'>.is-centered</span>
<span class='uiterminal-line is-centered is-blinked'> .is-blinked </span>
<span class='uiterminal-line is-centered is-empty'> .is-empty</span>
- Colors
<span class='uiterminal-line uitext-primary'>.uitext-primary</span>
<span class='uiterminal-line uitext-secondary'>.uitext-secondary</span>
<span class='uiterminal-line uitext-success'>.uitext-success</span>
<span class='uiterminal-line uitext-danger'>.uitext-danger</span>
<span class='uiterminal-line uitext-warning'>.uitext-warning</span>
<span class='uiterminal-line uitext-white'>.uitext-white</span>
<span class='uiterminal-line uitext-black '>.uitext-black</span>
<span class='uiterminal-line uitext-white uibg-primary'>.uibg-primary</span>
<span class='uiterminal-line uitext-white uibg-secondary'>.uibg-secondary</span>
<span class='uiterminal-line uitext-white uibg-success'>.uibg-success</span>
<span class='uiterminal-line uitext-white uibg-danger'>.uibg-danger</span>
<span class='uiterminal-line uitext-white uibg-warning'>.uibg-warning</span>
<span class='uiterminal-line uitext-black uibg-white'>.uibg-white</span>
<span class='uiterminal-line uitext-white uibg-black'>.uibg-black</span>
- Form Elements
<span class='uiterminal-line'> .uiterminal-text: <input type='text' class='uiterminal-text' autofocus> </span>
<span class='uiterminal-line'> .fullline: <input type='text' class='uiterminal-text fullline' autofocus> </span>
<span class='uiterminal-line is-empty'>
<textarea class='uiterminal-textarea' autofocus> </textarea>
</span>
- Buttons
<button class='uiterminal-button '>Button</button>
<button class='uiterminal-button uitext-white uibg-primary'>primary</button>
<button class='uiterminal-button uitext-white uibg-secondary'>secondary</button>
<button class='uiterminal-button uitext-white uibg-success'>succes</button>
<button class='uiterminal-button uitext-white uibg-danger'>danger</button>
<button class='uiterminal-button uitext-white uibg-warning'>warning</button>
<button class='uiterminal-button uitext-black uibg-white'>white</button>
<button class='uiterminal-button uitext-white uibg-black '>black</button>
- Badges
<a href="#" class="uiterminal-badge uitext-white uibg-primary">Primary</a>
<a href="#" class="uiterminal-badge uitext-white uibg-secondary">Secondary</a>
<a href="#" class="uiterminal-badge uitext-white uibg-success">Success</a>
<a href="#" class="uiterminal-badge uitext-white uibg-danger">Danger</a>
<a href="#" class="uiterminal-badge uitext-white uibg-warning">Warning</a>
<a href="#" class="uiterminal-badge uitext-black uibg-white">White</a>
<a href="#" class="uiterminal-badge uitext-white uibg-black">Black</a>
- Progress
<span class='uiterminal-line is-full is-empty'>
<progress class="uiterminal-progress progress-primary" max="100" value="90"></progress>
</span>
<span class='uiterminal-line is-full is-empty'>
<progress class="uiterminal-progress progress-secondary" max="100" value="80"></progress>
</span>
<span class='uiterminal-line is-full is-empty'>
<progress class="uiterminal-progress progress-success" max="100" value="70"></progress>
</span>
<span class='uiterminal-line is-full is-empty'>
<progress class="uiterminal-progress progress-danger" max="100" value="60"></progress>
</span>
<span class='uiterminal-line is-full is-empty'>
<progress class="uiterminal-progress progress-warning" max="100" value="50"></progress>
</span>
<span class='uiterminal-line is-full is-empty'>
<progress class="uiterminal-progress progress-white" max="100" value="40"></progress>
</span>
<span class='uiterminal-line is-full is-empty'>
<progress class="uiterminal-progress progress-black" max="100" value="30"></progress>
</span>
8.Tables
<span class="ui-terminal-line">
<table class="uiterminal-table ">
..
</table>
</span>
- Images:
<img src="images/manjaro.png" class="uiterminal-image">
<img src="images/fedora.png" class="uiterminal-image is-blurred">
<img src="images/arch.png" class="uiterminal-image is-ghost">
- Headings
<span class='uiterminal-line is-empty'>
<h1>h1. UITERMINAL</h1>
</span>
<span class='uiterminal-line is-empty'>
<h2>h2. UITERMINAL</h2>
</span>
<span class='uiterminal-line is-empty'>
<h3>h3. UITERMINAL</h3>
</span>
<span class='uiterminal-line is-empty'>
<h4>h4. UITERMINAL</h4>
</span>
<span class='uiterminal-line is-empty'>
<h5>h5. UITERMINAL</h5>
</span>
<span class='uiterminal-line is-empty'>
<h6>h6. UITERMINAL</h6>
</span>
- Lists
<span class='uiterminal-line is-empty'>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</span>
Browser Support
UITerminal tested on following browsers.
- Chrome
- Firefox
- Safari
- Opera
Development&Contributions
You can fork the project and enter this commands in your terminal.
git clone https://github.com/YOUR_GITHUB_USERNAME/uiterminal.git
cd uiterminal
Thanks
UITerminal Inspired by NES.CSS, I have to thank to BcRicco