We launched Subform on Kickstarter in 2016, but are just now opening up our beta to the public.
Subform's focus is on layout. Dynamic layout systems are pretty functionally complex, but creating them is more of a visual process that really benefits from direct-manipulation and a tight feedback loop. (Rather than the endless tweak-reload/recompile-tweak-reload/recompile cycle)
We started with flexbox, but ended up designing our own layout system, which is both simpler and more expressive.
For HN folks who like thinking about conceptual design: https://medium.com/subform/why-not-flexbox-ddbe60396163
Or if you just want to check out the layout system in code, there's a WebAssembly build: https://github.com/lynaghk/subform-layout
Beyond the layout semantics, we've also spent quite a bit of time on the user experience for adjusting layout and hierarchy in the app: https://medium.com/subform/dynamic-layout-at-design-time-91d...
Definitely worth a watch for people interested in designing software for use by other people.
I should also say that I think CSS is great --- there's nothing like trying to come up with your own solution to make you appreciate the tradeoffs that other folks have made.
We had the advantage of starting from scratch in a more constrained problem space of UI layout, rather than CSS's reflowable documents + UI sometimes + 20 years of backward compatibility.
Daniel Jackson's work on conceptual design (http://sdg.csail.mit.edu/projects/conceptual/) is a great starting place for thinking about this kind of thing.
I personally think we're long overdue for a Yoga alternative that implements CSS Grid like semantics consistently across Web and React Native. Being able to reuse the same fluid, declarative 2d layout for your responsive website to implement your native mobile/tablet UIs would be a killer feature IMO.
I'd love to see the project turn into an actual open source project with a compatible license though, as opposed to just a tech demo with strict licensing requirements. Part of this is me just wanting to use it for free, but I do also believe building an open-source community around your layout engine can drive adoption of your product and help you improve the layout engine itself at a much faster pace than if it remained closed.
Right now we're working directly with everyone in the beta to understand their process and make things work.
We've added specific features like CSS/HTML export that people wanted for their workflow, and we've also spent a lot of time on Skype with folks to help them change their "throw pictures over the wall" process to ones that help them better bring their designs to production.
The use case is "simply". I need something that do the layout calculations for me and I take care of call the controls...
Curious to hear more about your use case and what you think of the existing API/demos --- definitely open a Github issue or start a topic on the Subform discussion board after you get a chance to try things out.
I find it incredibly refreshing to see you guys openly point out use-cases where the tool might not be a good fit.
Any plans to license the layout engine? If you decide to go down that path, I'd ask you to consider allowing free non-commercial usage. I probably wouldn't consider paying for a library unless I got to try it first, but if it's a good fit it can be well worth the cost. e.g. At my previous job we ended up buying a Highcharts license by my suggestion, since I'd had positive prior experiences and it was a good fit for our problem.
Here's one complaint I have with some designers: they always design for the perfect scenario. They don't consider what should happen when a value is too long or short, as well as what should happen when dealing with an empty collection, or worse, a large one. Having a way to specify all those kinds of variations would be absolutely amazing.
Or am I misunderstanding your question?
Re: designing for the perfect scenario, I'd say devs are guilty of that too --- I'm in Australia right now, and it's obvious when an app or site has only been tested on localhost =)
Specifying dimensions in the "application state space" along which to vary is a tricky problem. It's not clear to me how much of that can work in a GUI tool vs. programming languages and stuff like Clojure.spec, property-based testing, concolic testing, etc.
The happy path issue is definitely one of the big pain points in the "designer throws mockups over the wall" workflow. Simulation of the production medium in the visual design tool can help a bit, but the real solution is to get designers working in the production medium. That's easier said than done, of course. (And ultimately more of an organizational/practice issue than a tooling one.)
Second, charging for a beta...what a great idea. I’ve signed up for 7 competitors this week and can’t remember their names and will never again login. But if I have to decide this problem is big enough to make a monthly commitment, I’m damn sure going to log back in to get my money’s worth. I hope y’all crush it. Thanks.
Beyond that, all of the CSS that he writes on a daily basis would become more robust once he learns a few more values (space-between, space-around, space-evenly, flex: 1;, etc.).
Here are some situations where you may want to test your understanding of centering in CSS:
+ Center an absolute positioned element whose width and height are unknown (e.g., it's an <img>).
+ Does anything change if the parent element has padding?
+ Create an element that's width 50%, height 50%, and center it in a parent of unknown size.
+ Do any of these solutions still work if all elements have a 10px border?
+ Which of these solutions will remain centered if the parent has smaller width/height than the child?
How confident are you in any of these solutions without being able to run them?
CSS is quite complex. It was built up incrementally by reasonable, intelligent people trying to solve hard problems.
If you're convinced that things are easy or that other people struggle simply because they are lazy, then you'll never be able to learn and grow your own skills.
The article OP mentioned is from 2011 and antiquated unless you're writing for IE8 or below (which, of course, could still be a requirement).
I was merely trying to point out a better solution to OP's face-value problem and suggest a new CSS pattern that I personally have grown to love.
@iambateman - feel free to email me if you want some help learning some of these CSS techniques. I'll gladly walk you through them and answer any questions that I can.
@lynghk - cheers, thanks for your comment.
Making changes directly on an element in a way that makes sense is the holy grail, and remains an unsolved problem in my opinion. Browsersync can help, and Webflow (et al) is trying to help, but none of the tools allow real direct manipulation.
Cicerone doesn't yet do the kind of thing discussed here because it is originally designed to be a rich structured content editor with customizable HTML/CSS components, as opposed to a design tool. However the more I use it myself, the more I find that designing anything in CSS is the biggest PIA, and it would be really cool if I could bring a little sanity there. So I've been thinking a lot about how to do this. Stay tuned (but don't hold you breath, it'll be a while.)
PS: and if you do get around to poking around with Cicerone, do let me know your thoughts: good, bad, or random, I'm happy to nerd out on tools. Cheers Stephen.
1+ left/top 50% + transform with x/y -50%
2+ No, it's absolute positioned. Oops, unless you mean with flexbox, then no, it's fine.
3+ (first answer, or flexbox centering) Why is this thing 50% wide/high? Seems an odd choice (or a setup to prove a point?)
4+ I use box-sizing: border-box, not a problem, same as #2.
5+ None of them? (does not seem physically possible, probably just crop/hide inside element. Or tell the user they are holding it wrong)
After doing this, it appears that list was just to force a point...
Note: I wish the kickstarter video was on the website linked here. The video is very compelling.
I'm curious why you decided on a monthly subscription model. Apart from support and updates, what is the ongoing value? Other desktop tools like this I've seen (Sublime Text, Paw, xScope) are available for a bit higher, one-time price.
Just curious what your guys' thought process was.
Subform is in beta, and the others are finished and offer free trials.
Also, Figma and Framer are backed by venture capital. They're going for marketshare and don't need to make any money from licenses. I appreciate that the Subform authors are upfront about their position on the order page: they're two people who need to make a living, and you can choose to support that or go elsewhere.
The cost of subform is truly on the higher side. I understand that it's catered to a niche target group - how niche is it though? if it's managed by 2 people, 1000 customers would bring in $25.000 monthly before tax. I cannot imagine that they aim for 1000 customers only, though.
I tried — and failed — to make a living in this market with two products, Neonto Studio  and React Studio . Reaching one thousand subscribers was a distant dream. Nowadays we just give away the base product, and the real business is focused purely on customizing the software for enterprise in-house development where the pain is much greater than with what one might call "competent teams" (i.e. practically anyone reading HN).
What I'm not sure it does, and would hope it does, is provide a WYSIWYG way of CSS layout. I.E. under the hood it's using css3 to layout, but in a way I don't have to think about it, and could output it after I get the design the way I want.
Re: WYSIWYG CSS, we initially started w/ flexbox but things like the difference between margins, padding, and absolute positioning confused tons of designers coming from Photoshop/Sketch.
We ended up implementing our own layout system, which can be used directly in production (if you want to ship a runtime), otherwise it's possible to map layouts to something like flexbox+grid or native engines if your designers stay away from things that are hard to implement on those platforms (e.g., aspect ratio).
Our goal is to help people think about layout directly, not try to hide the inherent complexity from them.
At the end of the day, most all digital products require close collaboration between designers and implementors.
First, I won't say your product is a commodity, but there are many, many, many layout and design tools out there. I'm not going to pay $25 to evaluate each one. It's as much about the sign-up-and-hand-over-the-credit-card process as it is about the money.
Second, the fact that it's refundable doesn't matter. I'm never going to ask for a refund. The hassle and the back-and-forth isn't worth $25 to me.
Third, I'm willing to pay way more than $25 if your tool actually solves my problem. There are tons of UI tools out there, but I haven't found the one. It's totally worth it to me if you save me hours of work.
So don't add any friction to the process. Feel free to time-limit or cripple the tool so I have to pay to do any real work, but don't waste my time, and don't make me pay you for the privilege of sinking a bunch of my time into determining if your product works or not.
Find a way to do free trials, and do it in such a way that your costs are minimal. It's worth it.
What you guys have built is worth far more than $25.
Reminds me of HTML tables and GroupLayout. Wasn't sure how to specify min/max sizes.
I've spent money on Spotify, Prime, Patreon (to support local podcasters and niche YouTube content), Twitch streamers, software (Sketch, Lightroom), Marvel/Invision... all because I got to sample the software or produced content and want to support the artist/developers.
Anyways, good luck. Competition and subsequent innovation is always a good thing.
Speeding up laying out elements is really nice but it's difficult to communicate responsive designs to production without having to duplicate artboards.
It's great for production work where you are explicitly targeting the web --- we've actually pointed some of our Kickstarter backers to Webflow after they explained their needs and we realized it'd be a better fit for them.
Subform doesn't target a specific platform.
Its focus is to help folks explore layouts and design ideas easily.
If you are familiar with industrial design, an analogy would be that Subform is somewhere between SketchUp or Inventor/SolidWorks, and Webflow is closer to a CAM tool.
With this in mind, how could Subform fit into a modern workflow, or how would a end to end workflow that leverages Subform on all platforms (web, mobile, desktop) look like?
What I'm looking forward to is a living stylable styleguide that includes layouts and translates into code, like a visual Babel.
This doesn't look like it does everything in the Kickstarter video, but keen to be proven wrong!
Edit: Also re your website, a comparison with other tools to highlight what Subform can do that others (Invision Studio etc) can't would be very helpful.
Also, I appreciate the honesty here: https://subformapp.com/why-not-subform/
From a copywriting perspective, I think you can you to find a more descriptive/useful sub headline. I've read the page and I get and need what your service does, but I still have no idea what the sub headline means.