New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS styling #22

Open
slimsag opened this Issue Feb 13, 2016 · 11 comments

Comments

Projects
None yet
5 participants
@slimsag
Member

slimsag commented Feb 13, 2016

We might want something like an alternative to SCSS that integrates more tightly with components.

This is a particularly interesting article/lib in relation to React: https://medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04#.pkqx0ht46

@influx6

This comment has been minimized.

Show comment
Hide comment
@influx6

influx6 Feb 15, 2016

This is something am definitely interested in seeing, I would prefer a library not heavily depending on inline CSS as much but integrate with custom CSS parsers and uses style tags better. It's actually faster and performance because your browser only deals with set of changes once rather than on every property change of an inline style. Else jam pack style attribute, but seems rather too dirty to me, since the tag looks overflowed with css

influx6 commented Feb 15, 2016

This is something am definitely interested in seeing, I would prefer a library not heavily depending on inline CSS as much but integrate with custom CSS parsers and uses style tags better. It's actually faster and performance because your browser only deals with set of changes once rather than on every property change of an inline style. Else jam pack style attribute, but seems rather too dirty to me, since the tag looks overflowed with css

@dmitshur

This comment has been minimized.

Show comment
Hide comment
@dmitshur

dmitshur Feb 15, 2016

Member

I'm also interested. I'm playing/experimenting with something like this at https://github.com/shurcooL/play/tree/master/175. It's still in very early stages, nothing finished to see there yet.

Member

dmitshur commented Feb 15, 2016

I'm also interested. I'm playing/experimenting with something like this at https://github.com/shurcooL/play/tree/master/175. It's still in very early stages, nothing finished to see there yet.

@influx6

This comment has been minimized.

Show comment
Hide comment
@influx6

influx6 Feb 15, 2016

Wow. @shurcooL, that's some brilliant idea you have there, will take a look deeper, and might spin off a new library based on the ideas in that. Really like that.

influx6 commented Feb 15, 2016

Wow. @shurcooL, that's some brilliant idea you have there, will take a look deeper, and might spin off a new library based on the ideas in that. Really like that.

@influx6

This comment has been minimized.

Show comment
Hide comment
@influx6

influx6 Feb 25, 2016

I think one of the coolest thing we can do to reduce the life's of users of Vecty and any other UI library is to look more into add solvers like cassowary into the mix, these allows using linear algebra to solve the space and position issues of relative elements, their arrangements etc. The only thing stopping me from investing in a full blown css framework for Go, is in trying to understand how to write a Cassowary constraint solver.

Technical Document Here

Read the technical documents but was left with a lesser idea on the process, guess I am not one of grasping to much words and rather a show me something similar in coding process type of guy :(

If any one has experience with writing constraint solvers, would glady appreciate the help and if possible work together on writing something for vecty, my own UI library and in general for Go.

influx6 commented Feb 25, 2016

I think one of the coolest thing we can do to reduce the life's of users of Vecty and any other UI library is to look more into add solvers like cassowary into the mix, these allows using linear algebra to solve the space and position issues of relative elements, their arrangements etc. The only thing stopping me from investing in a full blown css framework for Go, is in trying to understand how to write a Cassowary constraint solver.

Technical Document Here

Read the technical documents but was left with a lesser idea on the process, guess I am not one of grasping to much words and rather a show me something similar in coding process type of guy :(

If any one has experience with writing constraint solvers, would glady appreciate the help and if possible work together on writing something for vecty, my own UI library and in general for Go.

@slimsag

This comment has been minimized.

Show comment
Hide comment
@slimsag

slimsag Apr 12, 2016

Member

@influx6 I looked into the constraint solver's you are talking about. It could just be that I don't understand them entirely, but I'm generally leery of deviating too much away from CSS. Did I misunderstand your idea, though? I'm not sure.

I do think there are nice ways we could integrate CSS with components though (like e.g. CSS modules, for example, so that separate components cannot have styles collide by accident).

Member

slimsag commented Apr 12, 2016

@influx6 I looked into the constraint solver's you are talking about. It could just be that I don't understand them entirely, but I'm generally leery of deviating too much away from CSS. Did I misunderstand your idea, though? I'm not sure.

I do think there are nice ways we could integrate CSS with components though (like e.g. CSS modules, for example, so that separate components cannot have styles collide by accident).

@influx6

This comment has been minimized.

Show comment
Hide comment
@influx6

influx6 Apr 12, 2016

No not at all, the CSS solver was meant to provide the ability express elements side as relative constraints to each other which gets computed when the layout changes and produce appropriate cad values for the width, height, margins and padding or any numerical property you wish, as per modules yes, creating something modular would make sense overall

influx6 commented Apr 12, 2016

No not at all, the CSS solver was meant to provide the ability express elements side as relative constraints to each other which gets computed when the layout changes and produce appropriate cad values for the width, height, margins and padding or any numerical property you wish, as per modules yes, creating something modular would make sense overall

@joeblew99

This comment has been minimized.

Show comment
Hide comment
@joeblew99

joeblew99 Apr 29, 2016

There are some good solid CSS parses here:
https://github.com/tdewolff/minify

Might be useful, not what path the architecture design for handling CSS takes.

joeblew99 commented Apr 29, 2016

There are some good solid CSS parses here:
https://github.com/tdewolff/minify

Might be useful, not what path the architecture design for handling CSS takes.

@pyros2097

This comment has been minimized.

Show comment
Hide comment
@pyros2097

pyros2097 May 10, 2016

Will this help in implementing a CSS parser https://github.com/facebook/css-layout and there is this one also https://github.com/aymerick/douceur

pyros2097 commented May 10, 2016

Will this help in implementing a CSS parser https://github.com/facebook/css-layout and there is this one also https://github.com/aymerick/douceur

@slimsag slimsag modified the milestone: 1.0.0 Jan 7, 2017

@slimsag

This comment has been minimized.

Show comment
Hide comment
@slimsag

This comment has been minimized.

Show comment
Hide comment
@slimsag

slimsag Dec 4, 2017

Member

Worth noting that one thing we could do here is actually generate the CSS file inside Go, and just directly write it to the DOM:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);

Tradeoffs here for sure, but could be an interesting / useful approach to keeping styles next to components without introducing a secondary compiler next to gopherjs etc.

Member

slimsag commented Dec 4, 2017

Worth noting that one thing we could do here is actually generate the CSS file inside Go, and just directly write it to the DOM:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);

Tradeoffs here for sure, but could be an interesting / useful approach to keeping styles next to components without introducing a secondary compiler next to gopherjs etc.

@dmitshur

This comment has been minimized.

Show comment
Hide comment
@dmitshur

dmitshur Dec 4, 2017

Member

I’ve used such a technique to make one of my HTML components (that needed a style sheet for :hover properties) completely standalone. There are definitely tradeoffs, but it has served me wonderfully so far.

Member

dmitshur commented Dec 4, 2017

I’ve used such a technique to make one of my HTML components (that needed a style sheet for :hover properties) completely standalone. There are definitely tradeoffs, but it has served me wonderfully so far.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment