git ssb


Dominic / patchbay

A step toward modular CSS (and so more modular components).

Closed mix wants to merge commits into master from about_refactor
mix · 12/20/2016, 4:18:43 AM

A step toward modular CSS (and so more modular components).

This PR adds styles to depject, and introduces an opinion about how styling should be done in modules. The pattern here is to use micro-css, with classNames which match the the name of the module. e.g. the About module has class About. The style encourages more object-oriented styling, which I hope will help devs think more clearly about the DOM structures they are using.

%sdcReSndjwsHNBLW02yrSUT3zL3FSGi7y+654/y0ijI=.sha256 mix · 12/20/2016, 4:19:53 AM

made with @ahdinosaur ! woop

dinosaur updated the branch to ca490d87 · 12/20/2016, 4:53:36 AM
%cIZlJhLT4aJGoQb0KaPutbJCjKfn78Rfhps5u9zmE/c=.sha256 Dominic · 12/20/2016, 2:32:30 PM

this doesn't seem to change the previous style.css file - happy for this to be merged this but my main question is how does this effect the, well, flexbox helpers used by hypertabs & pull-scroll (column, row, etc) I'm guessing these would be like mixins in the micro-css world?

%p3qEfVklNbz2KZyw3uU4pskQKYmGlC3YX8BmoCfTZKk=.sha256 ev · 12/20/2016, 2:54:38 PM

We've had issues in the past where hyperscript modules have had built-in css. It makes it impossible to override the style if you want to theme a client without going into each individual module and fixing the styles.

I'm concerned that is what is happening here.

%FGdmO3f3pxD2Ixz3zhztsJ8868GxjliCCQMq6zkml00=.sha256 Dominic · 12/20/2016, 4:01:45 PM

@ev if the css is provided via a separate socket it will be possible to disable the css a module provides. The classes are more difficult though.

%EP9KOXqkF6mWgJSFgl1Dzca17ozdDjq85GP+ejSFQHs=.sha256 mix · 12/20/2016, 4:15:55 PM

feels like a tension between over-ridability (theming) and re-useability of parts across patch*s (modularity).

I currently feel like there is too much fracturing across patch*s to be able to dev in a way which is re-useable, so I think more modularity is needed at the moment. In the future I think we're gonna want more themeing, and at that point we should move towards more over-write-ability.

In this pull request, the class is alongside the component, but because of how depject/ patch* is set up, that needn't be the case. I don't know the mechanism, but the styling is only bonded to the component by a clear naming and structure. I think this is a really stabilising change.

%+Fn3XCFoAEMJ7qY6UDDIGkZc4780hLsukiHVPaXFuis=.sha256 mix · 12/20/2016, 4:36:53 PM

what do you mean about the classes being more difficult @dominic ? which classes in which instance?

%vicwHjOgQrMEoZibOh/zvy1zLJ71wvpF1pirr0G1LmQ=.sha256 Dominic · 12/20/2016, 4:39:33 PM

@ev well, there is some "functional css" that is, it doesn't work right unless there is the right css. hmm, but maybe we can tag these classes specially? I'm thinking _{className} because it is kinda analogous to a private field. says "don't mess with this"

%mS1TfVpQ5Lv78/iThbw+PJfQKCNQuWKtDoHSQGELH+I=.sha256 Dominic · 12/20/2016, 4:47:03 PM

.screen (in the style.css) is another example. I notice that this PR doesn't change the current style sheet... is this only for adding more additional styles?

%Lr7HHKXlwh0c/JSLHIhbtkYqQJycUDVTaA3usdvEhsU=.sha256 dinosaur · 12/20/2016, 5:22:02 PM

to describe the changes here:

each module that wants to export styles can either export css (a function that returns a css string) or mcss (a function that returns a micro-css string). these are then merged together in a styles module, which is then included to the document head in the app module.

for themers, it's only necessary to override the styles module and change how the styles are merged together, either with a provided module-override-map or a full complete stylesheet (to match class names in modules).

also chose to keep the current stylesheet the same, so this can be a small change to get the ball rolling in this direction.

%Fr9DkZ35XW7gO1Z6olcbnNlC3FR2GxZsLt1PYhoIAmg=.sha256 dangerousbeans · 12/20/2016, 5:22:53 PM

Yeah prefixing all the essential stuff away would be useful, a lot of css-framework pain came from .column and .row, but if they were .patchbay__column etc then :cake:

%lx1LLszgfNqe3gP05rsSGu82xwQjGvUy7JAukriE31A=.sha256 dangerousbeans · 12/20/2016, 5:25:12 PM

maybe also we could set things up so things (like say the list of places you've been / tabs) could be passed in an optional target, which would make it not return html but instead try and burry itself inside whatever the selector was.

This would get over another tricky thing of wanting to split things up in the DOM when they're not split up in the modules

%maiJ3NIxLu88qo6nLt0DmwrCtmW3j/hu6E7XDtcvzbY=.sha256 ev · 12/20/2016, 6:50:38 PM

I'm fine with embedded functional css that is necessary for modules to function. You don't need anything other than hyperscript to embed css for those modules.

My concern is throwing opinion into the individual modules will force anyone who is developing on Bay styles into an immediate fork -- which is what happens when people develop on Patchwork.

This isn't a problem with Bay or modules or anything personal. The issue is browsers can't apply a global stylesheet on top of individual embedded styles.

Now if there's a way to flip a switch and turn all of the module opinion off, that's great.

dinosaur updated the branch to e69d724b · 12/22/2016, 4:59:07 AM
dinosaur updated the branch to 5e399826 · 12/22/2016, 6:36:02 AM
dinosaur updated the branch to dcbbc1ce · 12/22/2016, 8:51:32 AM
%v+oDrXrYLXwmDbOi/hfvNmrF2BTqGsaNfvMhj8KJWHE=.sha256 mix · 12/22/2016, 7:15:54 PM

Really excited about how this is starting to shape up. Pair coded with Matt Mikey Mix (m-cubed?). Mikey on rowing the code boat, Matt on asking ALL the questions, Mix on asking which are the relevant questions.

dinosaur updated the branch to d4292626 · 12/23/2016, 12:47:37 AM
dinosaur updated the branch to f11783d1 · 12/23/2016, 5:49:49 AM
%YjSofeSiM86o/lVfCL7S/NyM6B+vqWQzo7KhrbcdSog=.sha256 dinosaur · 12/23/2016, 5:56:29 AM

@mixmix @matt made some more changes :smile:

can haz code review? link

%bWmV54/FyKKFPlq8wFZj5a+rSJyaCLxt3F3S7snRqng=.sha256 dinosaur · 12/23/2016, 7:11:40 AM

git-ssb pull-request diff is stale: link

dinosaur updated the branch to 822d7aba · 12/26/2016, 11:01:59 PM
mix updated the branch to 1462edda · 12/29/2016, 3:45:53 PM
mix updated the branch to 787f8588 · 12/30/2016, 4:55:33 PM
mix updated the branch to 5db5f587 · 12/31/2016, 9:07:33 PM
mix updated the branch to c78c5d3d · 12/31/2016, 9:24:25 PM
mix updated the branch to d2fc80d0 · 1/1/2017, 2:27:18 AM
mix updated the branch to 7470f29e · 1/1/2017, 4:13:47 PM
cel deleted the about_refactor branch · 1/11/2017, 4:31:26 PM
%4luVQ14CwzvhmEbB0uqm0QxPBAUuzEOigh57Vtps4xw=.sha256 cel · 1/11/2017, 4:31:49 PM

cleaned up some merged branches

%M3Sl6OIqKSJoJfYdH6XhWl3WSlklR4MQP3WeMmN3m3U=.sha256 mix closed this pull request · 1/13/2017, 5:22:28 PM

Built with git-ssb-web