v1.8.12
Platform UI RocketAnimation of a rocket ship flying through space.

Platform UI

Fast, simple, and powerful CSS framework that's built with user experience in mind

Get Started

It started with us, now we're sharing it with you!

Platform UI is built to give designers and developers more control over their UIs. It's a powerful and simple system with just enough utilities to make your project amazing.

Easy

Platform UI setup is easy!
Quick to install, easy to learn. Use a CDN or npm install, add a template, and you're live!

Responsive

Create responsive designs!
Take advantage of Platform UI's responsive grid system. You'll have your designs on every screen in no time at all.

Icons

Utilizes Platform Icons!
Platform Icons let you not worry about your icon choices. They work seamlessly when choosing a CDN install.

Templates

Quickly get started with templates!
Want that blog up now? We have starter templates to help you launch your ideas.

Quick Start

Using packages

npm install @ritterim/platform-ui

Using a CDN

<!-- Compressed CSS -->
https://cdn.jsdelivr.net/npm/@ritterim/platform-ui/dist/platform-ui.min.css
<!-- Compressed JS -->
https://cdn.jsdelivr.net/npm/@ritterim/platform-ui/dist/js/platform-ui.min.js

Need moar?

Here's a quick template to get you started. It uses the CDN install, which we recommend for a quick launch!

<!doctype html>
<html lang="en">
  <head>
    <title>Platform UI</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Import your fonts here -->
    <!-- <link rel="dns-prefetch" href="https://cdn.jsdelivr.net/"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ritterim/platform-ui/dist/platform-ui.min.css" crossorigin="anonymous">
  </head>
  <body>
    <div class="block-container">
      <aside class="block block-3 background--dark text--white p-4 vh-100 flex flex--column flex--justify-between">
        <nav class="site-menu pt-4">
          <ul class="list">
            <li><a class="site-menu__item" href="#">Home</a></li>
            <li><a class="site-menu__item" href="#">About</a></li>
            <li><a class="site-menu__item" href="#">Donate</a></li>
          </ul>
        </nav>
        <footer class="text--light">
          <p>&copy; My Blog</p>
        </footer>
      </aside>
      <main class="block block-9 p-4 h-100">
        <h1 class="py-4 text--orange">Headline</h1>
      </main>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@ritterim/platform-ui/dist/js/platform-ui.min.js" defer></script>
  </body>
</html>