• Stars
    star
    1,016
  • Rank 45,279 (Top 0.9 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 5 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A CSS framework based on Human Guidelines from apple

Puppertino Stars Puppertino's contributors Follow Puppertino_css Follow Codedgar_dev Puppertino Logo

Welcome to Puppertino V 1.0!

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

Lightweight

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.

Modular

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!

Usage

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)

Docs

Find all the documentation, examples, and list of components and how to use them at https://codedgar.github.io/Puppertino/.

License

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 :)