All Projects → codedgar → Puppertino

codedgar / Puppertino

Licence: mit
A CSS framework based on Human Guidelines from apple

Projects that are alternatives of or similar to Puppertino

Lc Design
A UI component framework for building LCUI application.
Stars: ✭ 134 (-2.9%)
Mutual labels:  css-framework, scss
Mustard Ui
A starter CSS framework that actually looks good.
Stars: ✭ 968 (+601.45%)
Mutual labels:  css-framework, scss
Primitive
⛏️ ‎ A front-end design toolkit for developing web apps.
Stars: ✭ 783 (+467.39%)
Mutual labels:  css-framework, scss
Nhsuk Frontend
NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.
Stars: ✭ 511 (+270.29%)
Mutual labels:  css-framework, scss
Tacit
CSS Framework for Dummies, Without Classes
Stars: ✭ 1,344 (+873.91%)
Mutual labels:  css-framework, scss
Tabler
Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap
Stars: ✭ 24,611 (+17734.06%)
Mutual labels:  modular, scss
Bojler
Bojler is an email framework
Stars: ✭ 885 (+541.3%)
Mutual labels:  css-framework, scss
Teutonic Css
A modern CSS framework — versatile, well documented.
Stars: ✭ 308 (+123.19%)
Mutual labels:  css-framework, scss
Avalanche
A package based CSS framework.
Stars: ✭ 86 (-37.68%)
Mutual labels:  css-framework, scss
Bem Kit
💄 CSS UI kit with BEM convention and SASS
Stars: ✭ 69 (-50%)
Mutual labels:  css-framework, scss
Siimple
The minimal CSS toolkit for flat and clean designs
Stars: ✭ 502 (+263.77%)
Mutual labels:  css-framework, scss
Fictoan
Mockups with markup — https://sujan-s.github.io/fictoan/
Stars: ✭ 114 (-17.39%)
Mutual labels:  css-framework, scss
Gutenberg
Modern framework to print the web correctly.
Stars: ✭ 4,425 (+3106.52%)
Mutual labels:  css-framework, scss
Cirrus
☁️ The CSS framework for the modern web.
Stars: ✭ 716 (+418.84%)
Mutual labels:  css-framework, scss
Nes.css
NES-style CSS Framework | ファミコン風CSSフレームワーク
Stars: ✭ 17,912 (+12879.71%)
Mutual labels:  css-framework, scss
Hive Framework
A website development framework built with Sass, and incorporating jQuery UI.
Stars: ✭ 14 (-89.86%)
Mutual labels:  css-framework, scss
fylgja
The modular highly customisable CSS framework. Powered by CSS Components, Utilities and Props for building your Web UI.
Stars: ✭ 65 (-52.9%)
Mutual labels:  modular, css-framework
Bulma Helpers
Library with missing Functional / Atomic CSS classes for Bulma framework
Stars: ✭ 263 (+90.58%)
Mutual labels:  css-framework, scss
Availity Uikit
Availity UI Kit powered by Bootstrap 4
Stars: ✭ 44 (-68.12%)
Mutual labels:  css-framework, scss
Animxyz
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
Stars: ✭ 1,689 (+1123.91%)
Mutual labels:  css-framework, scss

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 all.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, think of your users. :)
  3. You can now download the SCSS version of Puppertino, also located in /dist/.

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].