6 ms·

Puppertino: A CSS framework based on Human Guidelines from Apple

150 points by memorable 4y ago

rado 4y ago
Modals don't trap focus, can't be closed by keyboard.
podviaznikov 4y ago
Love this. Would be cool to see more examples. Like Apple Notes/Apple Mail layout done with this library/framework.
lelandfe 4y ago
What are some examples of guidelines that this follows? What has this done differently than other CSS frameworks? I'm not seeing anything obvious, and there are some clear deviations – like Puppertino's advice to "always include a placeholder" when validating fields, whereas the HIG has no guidance on the subject. Edit: maybe this is just reusing some components from the HIG? https://developer.apple.com/design/human-interface-guidelines/components/all-components https://developer.apple.com/design/human-interface-guideline...
jiggywiggy 4y ago
It's a bit messy and all over the place, it's mixing old ios and new ios. Apple in most of their own apps use filled icons in tabs and such, not the outline style. Also less of the blue gradients and more on the new trend of modern "sunset" type of gradients and focus on translucent backgrounds, like the dialog you added.
- jiggywiggy 4y ago
  Note: I'm saying this because I would love a proper IOS style component for web/app. Both code examples, but even more breakdowns of how and why are super useful. I've been half recreating it for react native for app build I was creating. The subtleties between creating cool graphics with gradients & translucent as well as not overdoing it have been extremely well done in the latest ios. I see a big trend in websites now following this.
- pnut 4y ago
  I'm assuming the name is pronounced 'poopertino' so your description seems apt
- codedgar 4y ago
  Hey! I'm Codedgar, the creator of Puppertino! That's 100% true, I've been working component by component to create a unified look, Big_woof branch is being updated to fix all of this :D
PeterWhittaker 4y ago
Interesting idea, but: is Puppertino as pro-mouse and anti-keyboard-navigation as Mac OS seems to be? I love my Mac, I really do, but I do find the mouse focus frustrating. For example, there is not, AFAIK, a simple way to navigate menus, e.g., Windows, without the mouse. There may be, and I may simply be ignorant, but I haven’t found it yet. There are keyboard shortcuts, but they can be frustrating. E.g., I don’t know what changed recently, but I have used gmail with Safari for years, and just recently, Safari started swallowing all of the Gmail formatting shortcuts. It’s not a constant battle, keeping keyboard navigation working, but it is a tiring and repetitive one. How does Puppertino make accessibility easier?
- jen20 4y ago
  System Preferences > Accessibility > Keyboard > Navigation then enable full keyboard. The function has existed since at least 2002 when I started using OS X full time, though it did just take me almost 5 seconds to find the current location of it by googling (I enable it via defaults).
  - bastawhiz 4y ago
    There's also Preferences > Keyboard > Shortcuts > "Use keyboard navigation to move focus between controls" which is a separate thing (that arguably should be enabled by default).
    - xbar 4y ago
      They both should be. It's like shipping a set of scissors in a container that requires scissors to open.
    - PeterWhittaker 4y ago
      Cf my comment above re the limits of this approach.
  - PeterWhittaker 4y ago
    Wow, is that ever awful in terminal! Talk about poorly thought out. And it doesn't provide the feature I was inquiring about, accessing the menu bar, at least not AFAICT. I may be missing something. While I've had Macs for years, and mostly use the keyboard, I've simply accepted that some things require a mouse. It's the old tradeoff: current muscle memory works kinda well, is it worth research and retraining? Good, effective keyboard navigation is the ONLY thing I like about those times I have to use Windows. The trackpad is wrong, mouse scroll is wrong, so much is wrong, but being able to jump about without the mouse is really nice. (After using NextStep years (well, decades) ago and feeling personally triggered and antagonized by Steve's refusal to support PageUp/PageDown "because they are not pages" (no, they're screens dude, flex a bit, get real), I was pleasantly surprised that Mac OS supported PageUp/PageDown.
IMcD23 4y ago
What are the "Human guidelines" from Apple? Do you mean the Human Interface Guidelines (aka HIG)? From what I could see in the examples, this doesn't look very Apple-like.
- wahnfrieden 4y ago
  ofc
samwillis 4y ago
Also worth taking a look at Ionic (https://ionicframework.com/ https://ionicframework.com/), it’s significantly heavier than this, but is incredibly compleat and has iOS and Material styles. Also can be used with plain “vanilla” js. People often only associate Ionic with old PhoneGap/Cordova apps, but as a toolkit for just standard web apps it’s awesome. I do wish Ionic invested a little more in “desktop” versions of the widgets however, they work well but tend to need a little more css to reduce font sizes and a few other tweaks.
- danielvaughn 4y ago
  Yep. I’m considering using ionic for our mobile website. One thing I really dislike about it though, is that it uses a ton of shadow dom everywhere with encapsulated styles. That works if the abstractions are perfect, but we know they rarely are. When you need to do anything outside of the box, you’re in for a rough ride. I’ve been thinking about building a tailwind-backed version of the same idea as ionic.
deleted 4y ago
[deleted]
9dev 4y ago
This feels like it had fallen out of time, maybe a couple years too late. No proper build chain with tree shaking? Installation by downloading a CSS file and dropping it somewhere in my CSS folder? Non-namespaced classes, mixing colors and layout, custom helpers for paddings and margins all over again? Besides, the framework needs some serious overhaul work to actually look (and feel!) like Apple UI - there are some clear deviations, starting from the breadcrumbs (the active item is misaligned, and has a gray background with a slightly more gray border - one of the seven deadly sins of web design), continuing with the main navigation items (the gray border is out of place, and the radius is off), all to the buttons (which simply don’t mimic the real thing properly). There are also lots of bugs and subtle behaviour differences with modals and actions, and that’s just what a cursory inspection found. Can’t we build stuff like that on Tailwind and stop making the same mistakes all over again?
deleted 4y ago
[deleted]
ryanmarsh 4y ago
Browsing HN on mobile. New CSS framework appears. I click the link, aaaaand it looks janky on mobile. Every. Single. Time.
bastawhiz 4y ago
It looks like this project has been abandoned for over a year. There's quite a few rough edges that stand out pretty distinctly: some buttons have a pressed state, others don't. Some controls have transitions or animations, while others which I'd expect to have transitions do not. Spacing and margins seem off (even the tiles on the Examples page). Some of the styles on the Layout documentation are broken due to specificity issues. Sizing is mixed: select boxes are very small compared to text inputs, while the switch control is absolutely massive. Most of the text is very large, but the mobile tabs' text is almost unreadably small. But this is a small personal project, it seems, and nobody is expecting high-end results. But here's the thing: the project is sponsored. Moreover, the website of the company that sponsors the project is down. Which, for a mostly-abandoned project, isn't surprising. But if you look up Fractal Technologies online, the two employees other than the CEO have been working there for under two years. Moreover, Fractal has been a sponsor since March 2021 [0]: there have been only a handful of commits since the sponsorship began. It's curious that an "IT Services and IT Consulting" company specializing in blockchain, AI, and IoT which doesn't seem to have a website would sponsor a project which is mostly unmaintained. The more I read about the business and the employees, the more questions I have. [0] https://github.com/codedgar/Puppertino/commit/e8426d11646c4b11f2371a542ce3e7df3185ee91 https://github.com/codedgar/Puppertino/commit/e8426d11646c4b...
- b1ue64 4y ago
  The latest commit is from May 23 of this year. That's not "abandoned for over a year". Fractal Technologies is still very suspicious though.
  - airtonix 4y ago
    I wouldn't call this commit you speak of as something that makes me think "yeah, they're still fixing stuff" https://github.com/codedgar/Puppertino/commit/b0148279d453db2322c7a23fa1116e2ccd53262c https://github.com/codedgar/Puppertino/commit/b0148279d453db... this commit is just fluff.
  - bastawhiz 4y ago
    The last time any CSS—for a CSS framework—was changed was April 2021.
airtonix 4y ago
- dang 4y ago
  Unsubstantive/flamebait/name-calling comments will get you banned here, so can you please not? https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
rglullis 4y ago
Two simple things I wish from anyone attempting to create a "CSS framework": - Don't use class-based styling - Don't use CSS. All I'd want from a "framework" is to give a consistent set of SASS mixins, and I want to have one single sass file that generates all the CSS I need in one single place. It's not just for the purism of "separation of design and content", but also to make changes easier across a whole site. I started doing something like that with https://gitlab.com/mushroomlabs/zenstyles https://gitlab.com/mushroomlabs/zenstyles, but only out of necessity for my work on Hub20, I still think that if more designers started taking this approach, there could be a substantial increase in the quality of the "theme templates" offerings. Pair it with something like https://headlessui.dev https://headlessui.dev and application developers could take a basic spreadsheet to focus on functionality at first, and then you easily switch between whatever "sass theme" you wanted without having to touch any of the code.
lostgame 4y ago
No screenshots in the readme of a project like this immediately makes me forget it and completely lose interest. I surely can’t be the only one. It’s a no brainer - especially for a CSS framework - to include visual examples.
berry_sortoro 4y ago
axelthegerman 4y ago
The modal looked like an iOS modal and to me very out of place on any in other device - non starter for me
akerr 4y ago
The logo looks like a dog wearing a plastic cone.
desaiguddu 4y ago
Multiple negative comments on company & motive. IMO - Encourage anyone who is building original OSS. If you see any improvements, Fork It or Create a PR. P.s, not associated with this repo, company or anything.
nextaccountic 4y ago
https://codedgar.github.io/Puppertino/examples/segmented_controls.html https://codedgar.github.io/Puppertino/examples/segmented_con... shouldn't the markup be a radio box (<input type="radio">) instead of <div> and <a>? I mean it is replicating the radio functionality
layer8 4y ago
Cool looking This is the most important part of Puppertino! […] In any case, coolness, it's my main focus with Puppertino. So, looking cool is more important than adhering to the Human Guidelines? That seems kinda antithetical. In particular since the desire to “look cool” is a major reason why usability is often being neglected in practice.
- codedgar 4y ago
  Yup, it _was_ , after a lot of feedback I've been working on a new version which adheres more to the Human Guidelines, more so now that Human Guidelines have been updated a lot and for the most part don't show old components or legacy design.
codedgar 4y ago
Hey guys! Codedgar here! I'm the creator of Puppertino! I'll be answering all your questions about Puppertino and the way the things are right now, feel free to ask me too :)

150 points by memorable 4y ago

rado 4y ago

Modals don't trap focus, can't be closed by keyboard.

podviaznikov 4y ago

Love this. Would be cool to see more examples. Like Apple Notes/Apple Mail layout done with this library/framework.

lelandfe 4y ago

What are some examples of guidelines that this follows? What has this done differently than other CSS frameworks? I'm not seeing anything obvious, and there are some clear deviations – like Puppertino's advice to "always include a placeholder" when validating fields, whereas the HIG has no guidance on the subject. Edit: maybe this is just reusing some components from the HIG? https://developer.apple.com/design/human-interface-guidelines/components/all-components https://developer.apple.com/design/human-interface-guideline...

jiggywiggy 4y ago

It's a bit messy and all over the place, it's mixing old ios and new ios. Apple in most of their own apps use filled icons in tabs and such, not the outline style. Also less of the blue gradients and more on the new trend of modern "sunset" type of gradients and focus on translucent backgrounds, like the dialog you added.

jiggywiggy 4y ago
Note: I'm saying this because I would love a proper IOS style component for web/app. Both code examples, but even more breakdowns of how and why are super useful. I've been half recreating it for react native for app build I was creating. The subtleties between creating cool graphics with gradients & translucent as well as not overdoing it have been extremely well done in the latest ios. I see a big trend in websites now following this.
pnut 4y ago
I'm assuming the name is pronounced 'poopertino' so your description seems apt
codedgar 4y ago
Hey! I'm Codedgar, the creator of Puppertino! That's 100% true, I've been working component by component to create a unified look, Big_woof branch is being updated to fix all of this :D

PeterWhittaker 4y ago

Interesting idea, but: is Puppertino as pro-mouse and anti-keyboard-navigation as Mac OS seems to be? I love my Mac, I really do, but I do find the mouse focus frustrating. For example, there is not, AFAIK, a simple way to navigate menus, e.g., Windows, without the mouse. There may be, and I may simply be ignorant, but I haven’t found it yet. There are keyboard shortcuts, but they can be frustrating. E.g., I don’t know what changed recently, but I have used gmail with Safari for years, and just recently, Safari started swallowing all of the Gmail formatting shortcuts. It’s not a constant battle, keeping keyboard navigation working, but it is a tiring and repetitive one. How does Puppertino make accessibility easier?

jen20 4y ago
System Preferences > Accessibility > Keyboard > Navigation then enable full keyboard. The function has existed since at least 2002 when I started using OS X full time, though it did just take me almost 5 seconds to find the current location of it by googling (I enable it via defaults).
- bastawhiz 4y ago
  There's also Preferences > Keyboard > Shortcuts > "Use keyboard navigation to move focus between controls" which is a separate thing (that arguably should be enabled by default).
  - xbar 4y ago
    They both should be. It's like shipping a set of scissors in a container that requires scissors to open.
  - PeterWhittaker 4y ago
    Cf my comment above re the limits of this approach.
- PeterWhittaker 4y ago
  Wow, is that ever awful in terminal! Talk about poorly thought out. And it doesn't provide the feature I was inquiring about, accessing the menu bar, at least not AFAICT. I may be missing something. While I've had Macs for years, and mostly use the keyboard, I've simply accepted that some things require a mouse. It's the old tradeoff: current muscle memory works kinda well, is it worth research and retraining? Good, effective keyboard navigation is the ONLY thing I like about those times I have to use Windows. The trackpad is wrong, mouse scroll is wrong, so much is wrong, but being able to jump about without the mouse is really nice. (After using NextStep years (well, decades) ago and feeling personally triggered and antagonized by Steve's refusal to support PageUp/PageDown "because they are not pages" (no, they're screens dude, flex a bit, get real), I was pleasantly surprised that Mac OS supported PageUp/PageDown.

IMcD23 4y ago

What are the "Human guidelines" from Apple? Do you mean the Human Interface Guidelines (aka HIG)? From what I could see in the examples, this doesn't look very Apple-like.

wahnfrieden 4y ago
ofc

samwillis 4y ago

Also worth taking a look at Ionic (https://ionicframework.com/ https://ionicframework.com/), it’s significantly heavier than this, but is incredibly compleat and has iOS and Material styles. Also can be used with plain “vanilla” js. People often only associate Ionic with old PhoneGap/Cordova apps, but as a toolkit for just standard web apps it’s awesome. I do wish Ionic invested a little more in “desktop” versions of the widgets however, they work well but tend to need a little more css to reduce font sizes and a few other tweaks.

danielvaughn 4y ago
Yep. I’m considering using ionic for our mobile website. One thing I really dislike about it though, is that it uses a ton of shadow dom everywhere with encapsulated styles. That works if the abstractions are perfect, but we know they rarely are. When you need to do anything outside of the box, you’re in for a rough ride. I’ve been thinking about building a tailwind-backed version of the same idea as ionic.

deleted 4y ago

[deleted]

9dev 4y ago

This feels like it had fallen out of time, maybe a couple years too late. No proper build chain with tree shaking? Installation by downloading a CSS file and dropping it somewhere in my CSS folder? Non-namespaced classes, mixing colors and layout, custom helpers for paddings and margins all over again? Besides, the framework needs some serious overhaul work to actually look (and feel!) like Apple UI - there are some clear deviations, starting from the breadcrumbs (the active item is misaligned, and has a gray background with a slightly more gray border - one of the seven deadly sins of web design), continuing with the main navigation items (the gray border is out of place, and the radius is off), all to the buttons (which simply don’t mimic the real thing properly). There are also lots of bugs and subtle behaviour differences with modals and actions, and that’s just what a cursory inspection found. Can’t we build stuff like that on Tailwind and stop making the same mistakes all over again?

deleted 4y ago

[deleted]

ryanmarsh 4y ago

Browsing HN on mobile. New CSS framework appears. I click the link, aaaaand it looks janky on mobile. Every. Single. Time.

bastawhiz 4y ago

It looks like this project has been abandoned for over a year. There's quite a few rough edges that stand out pretty distinctly: some buttons have a pressed state, others don't. Some controls have transitions or animations, while others which I'd expect to have transitions do not. Spacing and margins seem off (even the tiles on the Examples page). Some of the styles on the Layout documentation are broken due to specificity issues. Sizing is mixed: select boxes are very small compared to text inputs, while the switch control is absolutely massive. Most of the text is very large, but the mobile tabs' text is almost unreadably small. But this is a small personal project, it seems, and nobody is expecting high-end results. But here's the thing: the project is sponsored. Moreover, the website of the company that sponsors the project is down. Which, for a mostly-abandoned project, isn't surprising. But if you look up Fractal Technologies online, the two employees other than the CEO have been working there for under two years. Moreover, Fractal has been a sponsor since March 2021 [0]: there have been only a handful of commits since the sponsorship began. It's curious that an "IT Services and IT Consulting" company specializing in blockchain, AI, and IoT which doesn't seem to have a website would sponsor a project which is mostly unmaintained. The more I read about the business and the employees, the more questions I have. [0] https://github.com/codedgar/Puppertino/commit/e8426d11646c4b11f2371a542ce3e7df3185ee91 https://github.com/codedgar/Puppertino/commit/e8426d11646c4b...

b1ue64 4y ago
The latest commit is from May 23 of this year. That's not "abandoned for over a year". Fractal Technologies is still very suspicious though.
- airtonix 4y ago
  I wouldn't call this commit you speak of as something that makes me think "yeah, they're still fixing stuff" https://github.com/codedgar/Puppertino/commit/b0148279d453db2322c7a23fa1116e2ccd53262c https://github.com/codedgar/Puppertino/commit/b0148279d453db... this commit is just fluff.
- bastawhiz 4y ago
  The last time any CSS—for a CSS framework—was changed was April 2021.

airtonix 4y ago

dang 4y ago
Unsubstantive/flamebait/name-calling comments will get you banned here, so can you please not? https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html

rglullis 4y ago

Two simple things I wish from anyone attempting to create a "CSS framework": - Don't use class-based styling - Don't use CSS. All I'd want from a "framework" is to give a consistent set of SASS mixins, and I want to have one single sass file that generates all the CSS I need in one single place. It's not just for the purism of "separation of design and content", but also to make changes easier across a whole site. I started doing something like that with https://gitlab.com/mushroomlabs/zenstyles https://gitlab.com/mushroomlabs/zenstyles, but only out of necessity for my work on Hub20, I still think that if more designers started taking this approach, there could be a substantial increase in the quality of the "theme templates" offerings. Pair it with something like https://headlessui.dev https://headlessui.dev and application developers could take a basic spreadsheet to focus on functionality at first, and then you easily switch between whatever "sass theme" you wanted without having to touch any of the code.

lostgame 4y ago

No screenshots in the readme of a project like this immediately makes me forget it and completely lose interest. I surely can’t be the only one. It’s a no brainer - especially for a CSS framework - to include visual examples.

berry_sortoro 4y ago

axelthegerman 4y ago

The modal looked like an iOS modal and to me very out of place on any in other device - non starter for me

akerr 4y ago

The logo looks like a dog wearing a plastic cone.

desaiguddu 4y ago

Multiple negative comments on company & motive. IMO - Encourage anyone who is building original OSS. If you see any improvements, Fork It or Create a PR. P.s, not associated with this repo, company or anything.

nextaccountic 4y ago

https://codedgar.github.io/Puppertino/examples/segmented_controls.html https://codedgar.github.io/Puppertino/examples/segmented_con... shouldn't the markup be a radio box (<input type="radio">) instead of <div> and <a>? I mean it is replicating the radio functionality

layer8 4y ago

Cool looking This is the most important part of Puppertino! […] In any case, coolness, it's my main focus with Puppertino. So, looking cool is more important than adhering to the Human Guidelines? That seems kinda antithetical. In particular since the desire to “look cool” is a major reason why usability is often being neglected in practice.

codedgar 4y ago
Yup, it _was_ , after a lot of feedback I've been working on a new version which adheres more to the Human Guidelines, more so now that Human Guidelines have been updated a lot and for the most part don't show old components or legacy design.

codedgar 4y ago

Hey guys! Codedgar here! I'm the creator of Puppertino! I'll be answering all your questions about Puppertino and the way the things are right now, feel free to ask me too :)