Welcome to Platform UI - our CSS framework

Written by Kevin Hougasian
3
This post is days old.

It’s been a few years, several great people, an awesome company, and a cool thing we made 😀

Once upon a time, we had a mixed bag of frameworks powering our web properties. Bootstrap, Semantic UI, and thousands of lines written in straight CSS (and a bit of Less). Fast-forward to today, where we have our stable CSS framework written in Sass and a post-1.0 version that we’re offering to the dev community!

Platform UI

Platform UI

We wrote Platform UI to serve our own needs, although we hoped to offer it to the public at some point. We cleaned up personal preferences for more general considerations, thought hard about ease of use, and wrote some utilities we don’t see elsewhere. We didn’t try to copy what the other frameworks were doing, but we’re all based on the same thing - the W3C CSS standard. So you may see similarities along the way.

It’s easy

Add a CDN call to the head of your HTML document, a script call just above the closing </body> tag; you’re up and running with Platform UI! We’re using UNPKG here, but you can use other CDNs: JSDELIVR, Skypack?

<!-- In the <head> of your site. -->
<link rel="preconnect" href="https://unpkg.com" crossorigin>
<link rel="stylesheet" href="https://unpkg.com/@ritterim/platform-ui/dist/platform-ui.min.css" crossorigin>
<!-- Directly before the closing </body> tag of your site. -->
<script src="https://unpkg.com/@ritterim/platform-ui/dist/js/platform-ui.min.js" crossorigin defer></script>

You can find starter templates at our Launchpad. More are on the way!

Here’s a quick blog template just for you!

See the Pen Platform UI left nav blog template by kevin hougasian (@hougasian) on CodePen.

Icons

There’s certainly no shortage of icon choices out there. Again, there were icons we needed in our ecosystem, so we thought we’d create our own instead of loading a set where we weren’t going to use 90%.

We pack Platform Icons right next to Platform UI, so once you’ve called the CDN, you have the framework and the icons all at once.

Utilities

We didn’t go crazy with utilities, but we have created a solid selection that includes the ability to set background images and create linear-gradients straight in your markup!

Enjoy!

We hope you enjoy what we made.

Suggested reading

Comments