Does CSS model the right problem?

[Duane Johnson]

Cascading Style Sheets are a way of selecting elements of a document and describing their properties.

At a high level, as a designer (be gentle as I pretend to be a designer), I want to precisely articulate certain requirements of the properties of a website, while playing with (i.e. allowing variability) in another set of properties.

For instance, it may be important to require that the contrast ratio between adjacent colors is high--whether for minimal legibility or for older eyes. Perhaps what the actual colors are will matter less, but it's also possible that the colors should adhere to various rules of Color Theory--triadic schemes, compound schemes, or analogous schemes for instance.

As another example, I may want to require that a certain amount of space exists between columns, or between major components such as a navbar and main block. The style of the elements doesn't matter as much as the relationship between or among elements.

Many times, when I'm developing a website, the concept of a CSS "class name" isn't really useful until development nears the end. The reason for this is that the structure of pages and knowledge about what styles are repeated and conserved among elements is being developed *simultaneously*.

I think if we were to extend the Elm-esque way of incremental and rewarding development into the world of CSS, we would need to take a step back from what CSS models and ask what we should be modeling.

Right now, I'm thinking that in an ideal world, I would be able to specify the important requirements of a website's styles, and then allow it to automatically generate the rest. As I go, I'd like to tweak the requirements and play with the autogenerated values until I arrive at a desirable structure and visually appealing website.

As I develop the HTML side of the website, I'd like Elm to automatically "constrain" the new HTML's styles to those of the existing requirements.

It sounds like what I want is a constraint solver.

Has there been any research into this area in other languages?

[Aaron VonderHaar]

You may be interested in looking at Auto Layout for Mac and iOS apps.  https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

It uses a system of linear equations to solve the defined layout constraints.

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Peter Damoc]

For progressive customization you could take a look at SemanticUI's 3 layer structure (Defaults -> Theme -> Site) 
http://semantic-ui.com/usage/theming.html

For constrains based layouts you could take a look at GSS 
http://gridstylesheets.org/

--

You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

There is NO FATE, we are the creators.
blog: http://damoc.ro/

[Duane Johnson]

On Mon, Sep 26, 2016 at 2:00 AM, Peter Damoc <pda...@gmail.com> wrote:

For progressive customization you could take a look at SemanticUI's 3 layer structure (Defaults -> Theme -> Site) 
http://semantic-ui.com/usage/theming.html

For constrains based layouts you could take a look at GSS 
http://gridstylesheets.org/

GSS is eye opening. Thanks, Peter.

[Rex van der Spuy]

So far the best solution I've seen for CSS is Elm's own Graphics.Element:

http://package.elm-lang.org/packages/elm-lang/core/3.0.0/Graphics-Element

A little more granularity, and integration with elm-html, and it would be killer.

[Duane Johnson]

I like Graphics.Element, but this is a show-stopper for responsive web design:

Each Element is a rectangle with a known width and height

This is one of the reasons GSS is appealing to me right now. Does your use case not require presentation on different screen sizes?

[Berry Groenendijk]

I was thinking or rather dreaming about this. CSS for font styling, etc. is just fine. But, CSS for positioning and layout is just way too complicated.

So, I was thinking. Elm has this great event handling system and can efficiently update the DOM. I thought about building a demo of a HTML layout that is responsive and where the responsiveness is handled by Elm. I was actually thinking about some kind of constraint language you could use right inside Elm. GSS or rather the underlying Cassowary library would be a great candidate.

It would be great if you could define your layout in a constraint base layout right from within Elm. Elm being a functional language would be great for this. This could potentially be the HTML alternative for the Graphics.layout library.

As said... I was just dreaming about it. I have neither the time nor the expertise to build something like this.

Op maandag 26 september 2016 16:56:44 UTC+2 schreef Duane Johnson:

[Duane Johnson]

This is quite impressive:

http://iamralpht.github.io/constraints/

It uses the Cassowary.js library that powers GSS, but adds the ability to interact with elements using touch (mouse movements, velocity, etc.)

Duane

--

[Berry Groenendijk]

Wow! Very impressive. 

Berry Groenendijk

Customer Developer - DOON.nu

You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/vgNARkyhW5Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.

[Franček Prijatelj]

Hi

Here is something about responsive design  with SVG:

https://madebymike.com.au//writing/svg-has-more-potential/

Franček

[Wouter In t Velt]

Gss and Slalom are very impressive indeed! Would be great if to use with Elm.
Thanks for sharing Peter and Duane!