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.<p>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.<p>[0] <a href="https://github.com/codedgar/Puppertino/commit/e8426d11646c4b11f2371a542ce3e7df3185ee91" rel="nofollow">https://github.com/codedgar/Puppertino/commit/e8426d11646c4b...</a>
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.
What are some examples of guidelines that this follows? What has this done differently than other CSS frameworks?<p>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.<p>Edit: maybe this is just reusing some components from the HIG? <a href="https://developer.apple.com/design/human-interface-guidelines/components/all-components" rel="nofollow">https://developer.apple.com/design/human-interface-guideline...</a>
Also worth taking a look at Ionic (<a href="https://ionicframework.com/" rel="nofollow">https://ionicframework.com/</a>), it’s significantly heavier than this, but is incredibly compleat and has iOS and Material styles. Also can be used with plain “vanilla” js.<p>People often only associate Ionic with old PhoneGap/Cordova apps, but as a toolkit for just standard web apps it’s awesome.<p>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.
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?<p>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.<p>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.<p>It’s not a constant battle, keeping keyboard navigation working, but it is a tiring and repetitive one.<p>How does Puppertino make accessibility easier?
No screenshots in the readme of a project like this immediately makes me forget it and completely lose interest.<p>I surely can’t be the only one. It’s a no brainer - especially for a CSS framework - to include visual examples.
<p><pre><code> Cool looking
This is the most important part of Puppertino! […] In any case, coolness, it's my main focus with Puppertino.
</code></pre>
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.
<a href="https://codedgar.github.io/Puppertino/examples/segmented_controls.html" rel="nofollow">https://codedgar.github.io/Puppertino/examples/segmented_con...</a><p>shouldn't the markup be a radio box (<input type="radio">) instead of <div> and <a>? I mean it is replicating the radio functionality
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 :)
Multiple negative comments on company & motive.<p>IMO - Encourage anyone who is building original OSS.<p>If you see any improvements, Fork It or Create a PR.<p>P.s, not associated with this repo, company or anything.
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?<p>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.<p>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":<p>- Don't use class-based styling<p>- Don't use CSS.<p>All I'd want from a "framework" is to give a consistent set of <i>SASS mixins</i>, 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.<p>I started doing something like that with <a href="https://gitlab.com/mushroomlabs/zenstyles" rel="nofollow">https://gitlab.com/mushroomlabs/zenstyles</a>, 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 <a href="https://headlessui.dev" rel="nofollow">https://headlessui.dev</a> 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.