macOS Style UI Framework – Puppertino

Category: Frameworks , Javascript , Recommended | July 20, 2020
Author:codedgar
Views Total:148 views
Official Page:Go to website
Last Update:July 20, 2020
License:MIT

Preview:

macOS Style UI Framework – Puppertino

Description:

Puppertino is a lightweight, modular, iOS- & macOS-style UI framework following Apple’s Human Interface Guidelines.

Components Included:

  • Buttons
  • Form Controls
  • Modals
  • Icons
  • Layout
  • Colors

How to use it:

1. Install & Download.

# NPM
$ npm i puppertino --save

2. Load the Puppertino’s stylesheet in the document.

<!-- All In One -->
<link rel="stylesheet" href="dist/full.css" />
<!-- Buttons Componet -->
<link rel="stylesheet" href="dist/css/buttons.css" />
<!-- Cards Componet -->
<link rel="stylesheet" href="dist/css/cards.css" />
<!-- Colors Componet -->
<link rel="stylesheet" href="dist/css/color_palette.css" />
<!-- Forms Componet -->
<link rel="stylesheet" href="dist/css/forms.css" />
<!-- Layout Componet -->
<link rel="stylesheet" href="dist/css/layout.css" />
<!-- Modals Componet -->
<link rel="stylesheet" href="dist/css/modals.css" />

3. Load the modals.js for the modal component.

<script src="./src/js/modals.js"></script>

Previews:

macOS Style UI Framework - Puppertino Buttons

macOS Style UI Framework – Puppertino Buttons

macOS Style UI Framework - Puppertino Dropdown

macOS Style UI Framework – Puppertino Dropdown

macOS Style UI Framework - Puppertino Checkbox

macOS Style UI Framework – Puppertino Checkbox

macOS Style UI Framework - Puppertino Radio Button

macOS Style UI Framework – Puppertino Radio Button

macOS Style UI Framework - Puppertino Switch

macOS Style UI Framework – Puppertino Switch

macOS Style UI Framework - Puppertino Typography

macOS Style UI Framework – Puppertino Typography

macOS Style UI Framework - Puppertino Modal Dialog

macOS Style UI Framework – Puppertino Modal Dialog

You Might Be Interested In:


Leave a Reply