Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/codedgar/Puppertino

A CSS framework based on Human Guidelines from apple
https://github.com/codedgar/Puppertino

css css-framework human-guidelines macos modular

Last synced: about 2 months ago
JSON representation

A CSS framework based on Human Guidelines from apple

Lists

README 

        
![Puppertino Stars](https://img.shields.io/github/stars/codedgar/puppertino?style=for-the-badge) ![Puppertino's contributors](https://img.shields.io/github/contributors/codedgar/puppertino?style=for-the-badge)   [![Follow Puppertino_css](https://img.shields.io/twitter/follow/Puppertino_css?style=for-the-badge)](https://twitter.com/Puppertino_css) [![Follow Codedgar_dev](https://img.shields.io/twitter/follow/codedgar_dev?style=for-the-badge)](https://twitter.com/codedgar_dev)

![Puppertino Logo](https://i.imgur.com/r81X3Yj.png)



# 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



- [Components](#current-components)

- [Usage](#usage)

- [Documentation](https://codedgar.github.io/Puppertino/examples/)

- [About the creator](#about-the-creator)



## 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](https://github.com/codedgar/Puppertino/blob/master/LICENSE).



## About the creator



I'm [Edgar Pérez](https://twitter.com/codedgar_dev). And I make cool websites :)