Connect with us


Puppertino – A CSS framework based on iOS Human Guidelines from Apple

Puppertino is a framework meant to mimic the look of macOS and follow the human guidelines.

Hi! Welcome to Puppertino! Puppertino is a framework meant to mimic the look of macOS and follow the human guidelines. Puppertino is a Framework created to be lightweight, modular, and cool looking!

NOTE: Puppertino does not include any responsive system, you must use Bootstrap, Flexbox Grid, Skeleton, or some other responsive Framework along with it.

In a nutshell


I’m focused on making Puppertino as Lightweight as possible, I want it to become a big framework, but not at the cost of weight and performance. So to keep it small, I won’t be adding AnimateCSS, or any other framework (No matter how cool it is) on top of Puppertino. And to make it more lightweight, I have implemented my second point.


I’m developing Puppertino to be used with only the components you need or to be used as a complete framework. Choosing the components that you need may help you throw some extra KB that you don’t need in your website or app.

Cool looking

This is the most important part of Puppertino! This also means that I can go out of the main components of macOS and human guidelines in the future to add other things that I think maybe necessary or great to have in the framework. In any case, coolness, it’s my main focus with Puppertino.

Current Components

Puppertino currently includes:

  • Buttons
  • Switches
  • Actions
  • Form Elements (Inputs, select, form validation)
  • Modals
  • Icons
  • Font Layout
  • Segmented Controls
  • Tabs
  • Shadows
  • NEW! Dark Mode
  • Color Palette

Yeah… That’s all. But no worries! I’m working on adding new components every day!


You can use Puppertino in 3 ways (for now):

  1. You can download the newfull.css file located in the /dist/ directory. Download this if you are sure that you need at least half of the elements that are present in Puppertino.
  2. Download every component CSS that you need from the /dist/ folder. Such as buttons or form elements or other components. While it maybe tedious to download them one by one, this can help you to save some KBs in your website. 🙂
  3. You can now download the SCSS version of Puppertino, also located in /dist/. (Deprecated)


Find all the documentation, examples, and list of components and how to use them at

Puppertino on GitHub:
Platform: crossplatform/iOS
⭐️: 901