[HN Gopher] Puppertino: A CSS framework based on Human Guideline...
___________________________________________________________________
Puppertino: A CSS framework based on Human Guidelines from Apple
Author : memorable
Score : 91 points
Date : 2022-08-12 07:46 UTC (2 days ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| [deleted]
| bastawhiz wrote:
| 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/e8426d11646c4b...
| b1ue64 wrote:
| 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.
| bastawhiz wrote:
| The last time any CSS--for a CSS framework--was changed was
| April 2021.
| airtonix wrote:
| 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/b0148279d453db.
| ..
|
| this commit is just fluff.
| lelandfe wrote:
| 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-guideline...
| rado wrote:
| Modals don't trap focus, can't be closed by keyboard.
| jiggywiggy wrote:
| 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 wrote:
| 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 wrote:
| I'm assuming the name is pronounced 'poopertino' so your
| description seems apt
| airtonix wrote:
| lol, more church of apple.
|
| Apple isn't the pinnacle of design.
|
| Stop deep throating it like it is.
| podviaznikov wrote:
| Love this. Would be cool to see more examples.
|
| Like Apple Notes/Apple Mail layout done with this
| library/framework.
| samwillis wrote:
| Also worth taking a look at Ionic (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 wrote:
| 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.
| PeterWhittaker wrote:
| 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?
| ty_2k wrote:
| Apple icon -> System Preferences -> Keyboard -> Shortcuts ->
| checkbox for "Use keyboard navigation to move focus between
| controls"
|
| I found this setting while googling last week after getting
| frustrated that Firefox wasn't letting me tab to links as I
| expected when it worked just fine in Chrome.
| jen20 wrote:
| 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 wrote:
| 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).
| runjake wrote:
| > anti-keyboard-navigation as Mac OS seems to be?
|
| This is total nonsense. macOS has always had the most
| consistent built-in keyboard navigation of any OS I can think
| of.
| airtonix wrote:
| gnome-shell enters the chat.
| jbverschoor wrote:
| Except for the re-implemented versions of apps in the recent
| releases where they seem to use catalyst.
|
| No keyboard shortcuts whatsoever.
| armagon wrote:
| When I was trying to use it keyboard only, I never could
| remember the magic shortcuts to access the menu bars, even
| after tweaking system preferences. Using the keyboard with
| Windows or Linux was way easier, IMO.
| bastawhiz wrote:
| Sorry, really? You can't even tab between controls in dialog
| boxes by default on a fresh install without turning on "Use
| keyboard navigation to move focus between controls", which
| you ironically can't enable using the keyboard. Seriously, go
| try it: open System Preferences and try to do _literally
| anything_ without using the mouse.
|
| Even Finder is wildly unintuitive at times: Enter renames a
| file, while cmd+O opens it? Or cmd+down, apparently. Press
| space to show the quick preview of a file, and then cmd+O to
| open it: the quick preview morphs into the Preview app. But
| then press cmd+Q, and instead of quitting, it turns back into
| quick preview.
|
| While I'm a macOS user full time, my experience is completely
| the opposite of yours. I've constantly had to learn weird
| nuances of how Apple has managed to make keyboard navigation
| more complicated than it needs to be.
| mypalmike wrote:
| Sir, this is a css.
| IMcD23 wrote:
| 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.
| [deleted]
| ryanmarsh wrote:
| Browsing HN on mobile. New CSS framework appears. I click the
| link, aaaaand it looks janky on mobile.
|
| Every. Single. Time.
| rglullis wrote:
| 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, 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 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.
| 9dev wrote:
| 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?
___________________________________________________________________
(page generated 2022-08-14 23:00 UTC)