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.
The project hasn't been abandoned for over a year, it's just that my life has been very busy these days, I've been working on a new version for a while, just haven't found the time nor inspiration to work on this.
I don't wanna go onto details with my relationship with Fractal technologies. They seemed like cool people but I really never had the opportunity to expand Puppertino with them.
I've seen a lot of people throwing shade at them, and I was planning on removing their sponsor once the next version appeared, but I will do a quick commit to remove them ASAP. Puppertino never really took benefits with my short relationship with Fractal, and everything Fractal related is their own and not related to Puppertino since last year.
My guess is a new company needs some traffic, recognition, whatever…
So, instead of spending marketing dollars, they get attached to something Apple related and hope the Apple media echo chamber generates enough traffic to build their business off of.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
Interesting. How do I first get focus on the menu bar without clicking with the mouse?
Honestly, I have no idea. I did not know about your suggestion, so that's a TIL for me, but if I am going to click to get to the menu bar, it's not much of a solution.
(In Safari, tab takes me around the page. In terminal, it does what I expect, command/line completion. Only after I click on a menu does it get me anywhere. And it's a good the arrow keys do the same thing, because once one gets to Help, tab is stuck in the search field.)
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).
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.
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).
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.
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.
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 :)
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?
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.
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...