Need help with Puppertino?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

131 Stars 14 Forks MIT License 81 Commits 13 Opened issues


A CSS framework based on Human Guidelines from apple

Services available


Need anything else?

Contributors list

Puppertino Logo

Welcome to Puppertino!

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
  • Form Elements (Inputs, select, form validation)
  • Modals
  • Icons
  • Font Layout
  • 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
    file located in the
    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
    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, think of your users. :)
  3. You can now download the SCSS version of Puppertino, also located in


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


Puppertino is free to use and abuse under the open-source MIT license.

About the creator

I'm Edgar Pérez. And I make cool websites :)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.