[elm-discuss] Re: The Style Elements Library: a different approach to styling

[Kadzuya OKAMOTO]

Thanks. I'm looking forward to your article and the new version of the 
library :)

On Tuesday, January 3, 2017 at 6:08:28 AM UTC+9, Matthew Griffith wrote:
>
> Hello!
>
> Essentially there are some things I'd like to do that I wouldn't be able 
> to express in elm-css (With this being said, elm-css is super-awesome, and 
> this style-elements library is still experimental).  I'm writing an article 
> that goes more into detail but here's a general overview.  
>
> First, this library is both about providing a better interface to CSS and 
> sometimes _removing_ parts that generally only exist to cause trouble.  If 
> this is just a collection of mixins for elm-css, then the library can't 
> really "remove" a property.
>
> Secondly, there's a new version of this library in the works that has a 
> different approach to how we bind a style to an html element.  That may 
> seem like there's only one way to do it (via classes), but I have an 
> interesting approach to try out.  I'm hoping to have something working by 
> mid-January to show what I mean.
>
> Thirdly, I'm planning a sweet integration with elm-style-animation 
>  that can only be done 
> if I, as a library, have complete control over if a style is rendered 
> inline or as a stylesheet.  Actually the plan is to dynamically switch 
> between the two based on what the user wants.
>
> I really appreciate the interest :)
>
>
>
>
>
> On Monday, January 2, 2017 at 2:58:03 PM UTC-5, Kadzuya OKAMOTO wrote:
>>
>> Awesome! I completely agree with the policy to simplify CSS.
>>
>> I guess the policy may be also realized by providing a set of functions 
>> in a manner of `rtfeldman/elm-css`'s `Mixin`s.
>> What is the dominant benefits of making another library rather than 
>> providing set of `rtfeldman/elm-css` `Mixin`s?
>>
>>
>> On Thursday, October 27, 2016 at 10:20:14 PM UTC+9, Matthew Griffith 
>> wrote:
>>>
>>>
>>> It's easy to write valid CSS that is still broken and frustrating. What 
>>> if we could make frustrating CSS styles not expressible?
>>>
>>> I've been working on an experimental style library for making styles 
>>> that are harder to break and easier to use.
>>>
>>> There is also support for flow/flexbox style layouts, animations, 
>>> transitions, and media queries.
>>>
>>> It takes a different approach on attaching styles to html nodes. Instead 
>>> of using classes and ids, you create collections of styled html elements to 
>>> pull from to build your view (with support for classList style variations 
>>> that can be turned on/off).  
>>>
>>> Let me know your thoughts!
>>>
>>> Note:  I haven't published this on elm-package yet as I wanted to see if 
>>> there was any feedback that might alter what 1.0 looks like.
>>>
>>> The Style Elements library 
>>> 
>>>
>>> Simple Example 
>>> 
>>>
>>> Complex Example 
>>> 
>>>
>>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: The Style Elements Library: a different approach to styling

[Matthew Griffith]

Hello!

Essentially there are some things I'd like to do that I wouldn't be able to 
express in elm-css (With this being said, elm-css is super-awesome, and 
this style-elements library is still experimental).  I'm writing an article 
that goes more into detail but here's a general overview.  

First, this library is both about providing a better interface to CSS and 
sometimes _removing_ parts that generally only exist to cause trouble.  If 
this is just a collection of mixins for elm-css, then the library can't 
really "remove" a property.

Secondly, there's a new version of this library in the works that has a 
different approach to how we bind a style to an html element.  That may 
seem like there's only one way to do it (via classes), but I have an 
interesting approach to try out.  I'm hoping to have something working by 
mid-January to show what I mean.

Thirdly, I'm planning a sweet integration with elm-style-animation 
 that can only be done 
if I, as a library, have complete control over if a style is rendered 
inline or as a stylesheet.  Actually the plan is to dynamically switch 
between the two based on what the user wants.

I really appreciate the interest :)





On Monday, January 2, 2017 at 2:58:03 PM UTC-5, Kadzuya OKAMOTO wrote:
>
> Awesome! I completely agree with the policy to simplify CSS.
>
> I guess the policy may be also realized by providing a set of functions in 
> a manner of `rtfeldman/elm-css`'s `Mixin`s.
> What is the dominant benefits of making another library rather than 
> providing set of `rtfeldman/elm-css` `Mixin`s?
>
>
> On Thursday, October 27, 2016 at 10:20:14 PM UTC+9, Matthew Griffith wrote:
>>
>>
>> It's easy to write valid CSS that is still broken and frustrating. What 
>> if we could make frustrating CSS styles not expressible?
>>
>> I've been working on an experimental style library for making styles that 
>> are harder to break and easier to use.
>>
>> There is also support for flow/flexbox style layouts, animations, 
>> transitions, and media queries.
>>
>> It takes a different approach on attaching styles to html nodes. Instead 
>> of using classes and ids, you create collections of styled html elements to 
>> pull from to build your view (with support for classList style variations 
>> that can be turned on/off).  
>>
>> Let me know your thoughts!
>>
>> Note:  I haven't published this on elm-package yet as I wanted to see if 
>> there was any feedback that might alter what 1.0 looks like.
>>
>> The Style Elements library 
>>
>> Simple Example 
>> 
>>
>> Complex Example 
>> 
>>
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: The Style Elements Library: a different approach to styling

[Matthew Griffith]

Hey Lourens,

Sounds reasonable, I'll put it on the list of properties to consider for a
future release.  If you run into any other properties you tend to use often
but the lib doesn't support, add a note to this issue.


Vendor prefixing doesn't currently happen but is planned.  In the meantime,
you can set it using `Style.property "user-select" "none"` and setting the
vendor prefixes in the same way: Style.property "-webkit-user-select"
"none".

-Matt

On Sat, Dec 31, 2016 at 10:21 AM, Lourens Rolograaf 
wrote:

> Hi Matt,
>
> For using a div as if it were a button, I would like to make the
> caption-text un-selectable when there is any mousemovement during click.
> This could be done with vendor-prefixed `user-select: none` according
> https://stackoverflow.com/questions/826782/how-to-disable-text-selection-
> highlighting-using-css
> Any chance of this feature in Style-elements-lib?
>
> Thx
> Lawrence
>
> Op maandag 31 oktober 2016 16:04:24 UTC+1 schreef Matthew Griffith:
>
>> Yeah, this library is more about smart styling in elm rather than
>> interfacing with polymer.  Since we can do mixins in elm, native mixins
>> probably won't be supported :/
>>
>> I have thought that you could make a polymer or mdl type library in pure
>> elm using the style-elements library, though it would just cover the
>> styling/animation portion, not full behavior type stuff.
>>
>> You've probably seen the thread discussing elm and polymer, the result of
>> that discussion might fit your needs more closely once they finish.
>>
>>
>>
>>
>>
>> On Monday, October 31, 2016 at 9:40:37 AM UTC-4, Ed Ilyin wrote:
>>>
>>> yeah, but to use polymer elements, native css mixins are required :(
>>>
>>> Il giorno lun 31 ott 2016 alle ore 14:51 Matthew Griffith <
>>> mdg.gr...@gmail.com> ha scritto:
>>>
 No, it won't render as a native css mixin, it just gives you the
 functionality of a mixin in your elm code.



 On Monday, October 31, 2016 at 7:55:38 AM UTC-4, Ed Ilyin wrote:

> Will it render native CSS mixin?
>
> Actually I can't figure out how to create native CSS mixins even using
> elm-css module.
>
> Il giorno lun 31 ott 2016 alle ore 13:49 Matthew Griffith <
> mdg.gr...@gmail.com> ha scritto:
>
>> You can create a mixin as a function.
>>
>>
>>
>> myMixin : Style.Model -> Style.Model
>> myMixin style =
>> { style
>> | visibility = hidden
>> }
>>
>> myMixinColor : Style.Model -> Style.Model
>> myMixinColor style =
>> { style
>> | colors = palette.blue
>> }
>>
>>
>> dropDown : List (Html.Attribute a) -> List (Element a) -> Element a
>> dropDown =
>> element
>> ({ base
>> | width = px 300
>> , padding = all 20
>> , spacing = topBottom 40
>>  }
>> |> myMixin
>> |> myMixinColor
>> )
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> On Monday, October 31, 2016 at 5:16:43 AM UTC-4, Ed Ilyin wrote:
>>
>>> I'm actively using Polymer Paper Elements. And they accept mixings
>>> like this:
>>> ```css
>>>   paper-dropdown-menu {
>>> --paper-input-container-input: {
>>>   color: white;
>>> }
>>> --paper-input-container-underline: {
>>>   display: none;
>>> }
>>> --paper-dropdown-menu-icon: {
>>>   color: white;
>>> }
>>> --paper-input-container-focus-color: white;
>>>   }
>>> ```
>>> how to do the same using style-elements library?
>>>
>>> Il giorno ven 28 ott 2016 alle ore 19:34 Matthew Griffith <
>>> mdg.gr...@gmail.com> ha scritto:
>>>
>> So, taking a look at it, direct support for keyed will be super easy
 and will absolutely show up in v1.1.0.

 And I believe I have a way to directly support lazy as well, though
 I want to try it out before confirming completely.




 On Friday, October 28, 2016 at 12:28:17 PM UTC-4, Mark Hamburg
 wrote:

> On Oct 28, 2016, at 7:28 AM, Matthew Griffith 
> wrote:
>
> 2.  You can use Keyed and Lazy on a parent element (the one
> created by *Style.Elements.build*).  You could use
> *Style.Elements.build* in a child view and then use 
> *Style.Elements.html
> *to integrate it into the main view, using keyed or lazy in the
> process.   That feels a bit roundabout and I believe there could be a
> better way.  I'll just have to give it some thought as to how it'd 
> work :).
>
>
>
> Keyed as it turns out is central to 

Re: [elm-discuss] Re: The Style Elements Library: a different approach to styling

[Lourens Rolograaf]

Hi Matt,

For using a div as if it were a button, I would like to make the 
caption-text un-selectable when there is any mousemovement during click. 
This could be done with vendor-prefixed `user-select: none` according 
https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css
Any chance of this feature in Style-elements-lib?

Thx
Lawrence

Op maandag 31 oktober 2016 16:04:24 UTC+1 schreef Matthew Griffith:
>
> Yeah, this library is more about smart styling in elm rather than 
> interfacing with polymer.  Since we can do mixins in elm, native mixins 
> probably won't be supported :/
>
> I have thought that you could make a polymer or mdl type library in pure 
> elm using the style-elements library, though it would just cover the 
> styling/animation portion, not full behavior type stuff.
>
> You've probably seen the thread discussing elm and polymer, the result of 
> that discussion might fit your needs more closely once they finish.
>
>
>
>
>
> On Monday, October 31, 2016 at 9:40:37 AM UTC-4, Ed Ilyin wrote:
>>
>> yeah, but to use polymer elements, native css mixins are required :(
>>
>> Il giorno lun 31 ott 2016 alle ore 14:51 Matthew Griffith <
>> mdg.gr...@gmail.com> ha scritto:
>>
>>> No, it won't render as a native css mixin, it just gives you the 
>>> functionality of a mixin in your elm code.
>>>
>>>
>>>
>>> On Monday, October 31, 2016 at 7:55:38 AM UTC-4, Ed Ilyin wrote:
>>>
 Will it render native CSS mixin?

 Actually I can't figure out how to create native CSS mixins even using 
 elm-css module.

 Il giorno lun 31 ott 2016 alle ore 13:49 Matthew Griffith <
 mdg.gr...@gmail.com> ha scritto:

> You can create a mixin as a function.
>
>
>
> myMixin : Style.Model -> Style.Model
> myMixin style =
> { style
> | visibility = hidden
> }
>
> myMixinColor : Style.Model -> Style.Model
> myMixinColor style =
> { style
> | colors = palette.blue
> }
>
>
> dropDown : List (Html.Attribute a) -> List (Element a) -> Element a
> dropDown =
> element
> ({ base
> | width = px 300
> , padding = all 20
> , spacing = topBottom 40
>  }
> |> myMixin
> |> myMixinColor
> )
>
>
>
>
>
>
>
>
>
>
> On Monday, October 31, 2016 at 5:16:43 AM UTC-4, Ed Ilyin wrote:
>
>> I'm actively using Polymer Paper Elements. And they accept mixings 
>> like this:
>> ```css
>>   paper-dropdown-menu {
>> --paper-input-container-input: {
>>   color: white;
>> }
>> --paper-input-container-underline: {
>>   display: none;
>> }
>> --paper-dropdown-menu-icon: {
>>   color: white;
>> }
>> --paper-input-container-focus-color: white;
>>   }
>> ```
>> how to do the same using style-elements library?
>>
>> Il giorno ven 28 ott 2016 alle ore 19:34 Matthew Griffith <
>> mdg.gr...@gmail.com> ha scritto:
>>
> So, taking a look at it, direct support for keyed will be super easy 
>>> and will absolutely show up in v1.1.0.
>>>
>>> And I believe I have a way to directly support lazy as well, though 
>>> I want to try it out before confirming completely.
>>>
>>>
>>>
>>>
>>> On Friday, October 28, 2016 at 12:28:17 PM UTC-4, Mark Hamburg wrote:
>>>
 On Oct 28, 2016, at 7:28 AM, Matthew Griffith  
 wrote:

 2.  You can use Keyed and Lazy on a parent element (the one created 
 by *Style.Elements.build*).  You could use *Style.Elements.build* in 
 a child view and then use *Style.Elements.html *to integrate it 
 into the main view, using keyed or lazy in the process.   That feels a 
 bit 
 roundabout and I believe there could be a better way.  I'll just have 
 to 
 give it some thought as to how it'd work :).   


 Keyed as it turns out is central to getting stateful DOM elements 
 to behave reliably.

 But I'm looking forward to trying this library out.

 Mark

 -- 
>>> 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...@googlegroups.com.
>>
>>
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>> -- 
> 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 

Re: [elm-discuss] Re: The Style Elements Library: a different approach to styling

[Matthew Griffith]

Yeah, this library is more about smart styling in elm rather than 
interfacing with polymer.  Since we can do mixins in elm, native mixins 
probably won't be supported :/

I have thought that you could make a polymer or mdl type library in pure 
elm using the style-elements library, though it would just cover the 
styling/animation portion, not full behavior type stuff.

You've probably seen the thread discussing elm and polymer, the result of 
that discussion might fit your needs more closely once they finish.





On Monday, October 31, 2016 at 9:40:37 AM UTC-4, Ed Ilyin wrote:
>
> yeah, but to use polymer elements, native css mixins are required :(
>
> Il giorno lun 31 ott 2016 alle ore 14:51 Matthew Griffith <
> mdg.gr...@gmail.com > ha scritto:
>
>> No, it won't render as a native css mixin, it just gives you the 
>> functionality of a mixin in your elm code.
>>
>>
>>
>> On Monday, October 31, 2016 at 7:55:38 AM UTC-4, Ed Ilyin wrote:
>>
>>> Will it render native CSS mixin?
>>>
>>> Actually I can't figure out how to create native CSS mixins even using 
>>> elm-css module.
>>>
>>> Il giorno lun 31 ott 2016 alle ore 13:49 Matthew Griffith <
>>> mdg.gr...@gmail.com> ha scritto:
>>>
 You can create a mixin as a function.



 myMixin : Style.Model -> Style.Model
 myMixin style =
 { style
 | visibility = hidden
 }

 myMixinColor : Style.Model -> Style.Model
 myMixinColor style =
 { style
 | colors = palette.blue
 }


 dropDown : List (Html.Attribute a) -> List (Element a) -> Element a
 dropDown =
 element
 ({ base
 | width = px 300
 , padding = all 20
 , spacing = topBottom 40
  }
 |> myMixin
 |> myMixinColor
 )










 On Monday, October 31, 2016 at 5:16:43 AM UTC-4, Ed Ilyin wrote:

> I'm actively using Polymer Paper Elements. And they accept mixings 
> like this:
> ```css
>   paper-dropdown-menu {
> --paper-input-container-input: {
>   color: white;
> }
> --paper-input-container-underline: {
>   display: none;
> }
> --paper-dropdown-menu-icon: {
>   color: white;
> }
> --paper-input-container-focus-color: white;
>   }
> ```
> how to do the same using style-elements library?
>
> Il giorno ven 28 ott 2016 alle ore 19:34 Matthew Griffith <
> mdg.gr...@gmail.com> ha scritto:
>
 So, taking a look at it, direct support for keyed will be super easy 
>> and will absolutely show up in v1.1.0.
>>
>> And I believe I have a way to directly support lazy as well, though I 
>> want to try it out before confirming completely.
>>
>>
>>
>>
>> On Friday, October 28, 2016 at 12:28:17 PM UTC-4, Mark Hamburg wrote:
>>
>>> On Oct 28, 2016, at 7:28 AM, Matthew Griffith  
>>> wrote:
>>>
>>> 2.  You can use Keyed and Lazy on a parent element (the one created 
>>> by *Style.Elements.build*).  You could use *Style.Elements.build* in 
>>> a child view and then use *Style.Elements.html *to integrate it 
>>> into the main view, using keyed or lazy in the process.   That feels a 
>>> bit 
>>> roundabout and I believe there could be a better way.  I'll just have 
>>> to 
>>> give it some thought as to how it'd work :).   
>>>
>>>
>>> Keyed as it turns out is central to getting stateful DOM elements to 
>>> behave reliably.
>>>
>>> But I'm looking forward to trying this library out.
>>>
>>> Mark
>>>
>>> -- 
>> 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...@googlegroups.com.
>
>
>> For more options, visit https://groups.google.com/d/optout.
>>
> -- 
 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...@googlegroups.com.
 For more options, visit https://groups.google.com/d/optout.

>>> -- 
>> 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...@googlegroups.com .
>> For more options, visit https://groups.google.com/d/optout.
>>
>

-- 
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 

Re: [elm-discuss] Re: The Style Elements Library: a different approach to styling

[Ed Ilyin]

Will it render native CSS mixin?

Actually I can't figure out how to create native CSS mixins even using
elm-css module.

Il giorno lun 31 ott 2016 alle ore 13:49 Matthew Griffith <
mdg.griff...@gmail.com> ha scritto:

> You can create a mixin as a function.
>
>
>
> myMixin : Style.Model -> Style.Model
> myMixin style =
> { style
> | visibility = hidden
> }
>
> myMixinColor : Style.Model -> Style.Model
> myMixinColor style =
> { style
> | colors = palette.blue
> }
>
>
> dropDown : List (Html.Attribute a) -> List (Element a) -> Element a
> dropDown =
> element
> ({ base
> | width = px 300
> , padding = all 20
> , spacing = topBottom 40
>  }
> |> myMixin
> |> myMixinColor
> )
>
>
>
>
>
>
>
>
>
>
> On Monday, October 31, 2016 at 5:16:43 AM UTC-4, Ed Ilyin wrote:
>
> I'm actively using Polymer Paper Elements. And they accept mixings like
> this:
> ```css
>   paper-dropdown-menu {
> --paper-input-container-input: {
>   color: white;
> }
> --paper-input-container-underline: {
>   display: none;
> }
> --paper-dropdown-menu-icon: {
>   color: white;
> }
> --paper-input-container-focus-color: white;
>   }
> ```
> how to do the same using style-elements library?
>
> Il giorno ven 28 ott 2016 alle ore 19:34 Matthew Griffith <
> mdg.gr...@gmail.com> ha scritto:
>
> So, taking a look at it, direct support for keyed will be super easy and
> will absolutely show up in v1.1.0.
>
> And I believe I have a way to directly support lazy as well, though I want
> to try it out before confirming completely.
>
>
>
>
> On Friday, October 28, 2016 at 12:28:17 PM UTC-4, Mark Hamburg wrote:
>
> On Oct 28, 2016, at 7:28 AM, Matthew Griffith  wrote:
>
> 2.  You can use Keyed and Lazy on a parent element (the one created by
> *Style.Elements.build*).  You could use *Style.Elements.build* in a child
> view and then use *Style.Elements.html *to integrate it into the main
> view, using keyed or lazy in the process.   That feels a bit roundabout and
> I believe there could be a better way.  I'll just have to give it some
> thought as to how it'd work :).
>
>
> Keyed as it turns out is central to getting stateful DOM elements to
> behave reliably.
>
> But I'm looking forward to trying this library out.
>
> Mark
>
> --
> 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...@googlegroups.com.
>
>
> For more options, visit https://groups.google.com/d/optout.
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: The Style Elements Library: a different approach to styling

[Matthew Griffith]

You can create a mixin as a function.



myMixin : Style.Model -> Style.Model
myMixin style =
{ style
| visibility = hidden
}

myMixinColor : Style.Model -> Style.Model
myMixinColor style =
{ style
| colors = palette.blue
}


dropDown : List (Html.Attribute a) -> List (Element a) -> Element a
dropDown =
element
({ base
| width = px 300
, padding = all 20
, spacing = topBottom 40
 }
|> myMixin
|> myMixinColor
)










On Monday, October 31, 2016 at 5:16:43 AM UTC-4, Ed Ilyin wrote:
>
> I'm actively using Polymer Paper Elements. And they accept mixings like 
> this:
> ```css
>   paper-dropdown-menu {
> --paper-input-container-input: {
>   color: white;
> }
> --paper-input-container-underline: {
>   display: none;
> }
> --paper-dropdown-menu-icon: {
>   color: white;
> }
> --paper-input-container-focus-color: white;
>   }
> ```
> how to do the same using style-elements library?
>
> Il giorno ven 28 ott 2016 alle ore 19:34 Matthew Griffith <
> mdg.gr...@gmail.com > ha scritto:
>
>> So, taking a look at it, direct support for keyed will be super easy and 
>> will absolutely show up in v1.1.0.
>>
>> And I believe I have a way to directly support lazy as well, though I 
>> want to try it out before confirming completely.
>>
>>
>>
>>
>> On Friday, October 28, 2016 at 12:28:17 PM UTC-4, Mark Hamburg wrote:
>>
>>> On Oct 28, 2016, at 7:28 AM, Matthew Griffith  
>>> wrote:
>>>
>>> 2.  You can use Keyed and Lazy on a parent element (the one created by 
>>> *Style.Elements.build*).  You could use *Style.Elements.build* in a 
>>> child view and then use *Style.Elements.html *to integrate it into the 
>>> main view, using keyed or lazy in the process.   That feels a bit 
>>> roundabout and I believe there could be a better way.  I'll just have to 
>>> give it some thought as to how it'd work :).   
>>>
>>>
>>> Keyed as it turns out is central to getting stateful DOM elements to 
>>> behave reliably.
>>>
>>> But I'm looking forward to trying this library out.
>>>
>>> Mark
>>>
>>> -- 
>> 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...@googlegroups.com .
>> For more options, visit https://groups.google.com/d/optout.
>>
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: The Style Elements Library: a different approach to styling

[Ed Ilyin]

I'm actively using Polymer Paper Elements. And they accept mixings like
this:
```css
  paper-dropdown-menu {
--paper-input-container-input: {
  color: white;
}
--paper-input-container-underline: {
  display: none;
}
--paper-dropdown-menu-icon: {
  color: white;
}
--paper-input-container-focus-color: white;
  }
```
how to do the same using style-elements library?

Il giorno ven 28 ott 2016 alle ore 19:34 Matthew Griffith <
mdg.griff...@gmail.com> ha scritto:

> So, taking a look at it, direct support for keyed will be super easy and
> will absolutely show up in v1.1.0.
>
> And I believe I have a way to directly support lazy as well, though I want
> to try it out before confirming completely.
>
>
>
>
> On Friday, October 28, 2016 at 12:28:17 PM UTC-4, Mark Hamburg wrote:
>
> On Oct 28, 2016, at 7:28 AM, Matthew Griffith  wrote:
>
> 2.  You can use Keyed and Lazy on a parent element (the one created by
> *Style.Elements.build*).  You could use *Style.Elements.build* in a child
> view and then use *Style.Elements.html *to integrate it into the main
> view, using keyed or lazy in the process.   That feels a bit roundabout and
> I believe there could be a better way.  I'll just have to give it some
> thought as to how it'd work :).
>
>
> Keyed as it turns out is central to getting stateful DOM elements to
> behave reliably.
>
> But I'm looking forward to trying this library out.
>
> Mark
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: The Style Elements Library: a different approach to styling

[Mark Hamburg]

On Oct 28, 2016, at 7:28 AM, Matthew Griffith  wrote:
> 
> 2.  You can use Keyed and Lazy on a parent element (the one created by 
> Style.Elements.build).  You could use Style.Elements.build in a child view 
> and then use Style.Elements.html to integrate it into the main view, using 
> keyed or lazy in the process.   That feels a bit roundabout and I believe 
> there could be a better way.  I'll just have to give it some thought as to 
> how it'd work :).   

Keyed as it turns out is central to getting stateful DOM elements to behave 
reliably.

But I'm looking forward to trying this library out.

Mark

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: The Style Elements Library: a different approach to styling

[Matthew Griffith]

Great to hear and thanks! :)

1.  What you want to use here is *Style.Elements.optional*.  It functions a 
lot like *Html.Attributes.classList* if you've worked with that at all,  it 
allows you to define variations that you can switch on and off.  There's an 
example of it in the complex example 
.

2.  You can use Keyed and Lazy on a parent element (the one created by 
*Style.Elements.build*).  You could use *Style.Elements.build* in a child 
view and then use *Style.Elements.html *to integrate it into the main view, 
using keyed or lazy in the process.   That feels a bit roundabout and I 
believe there could be a better way.  I'll just have to give it some 
thought as to how it'd work :).   



On Friday, October 28, 2016 at 9:54:55 AM UTC-4, Ed Ilyin wrote:
>
> I have started to use this library - for me it is perfect that I do not 
> have to generate css file anymore.
> Great work Matthew! :)
> Of course I have first questions:
> 1. For example, user taps on menu item. To show that item is selected I 
> have to replace element with different color element correct? How it is 
> from the performance point of view? Or I have to add Bool parameter to 
> element which contols color and text weight? What is the best practice?
> 2. What about Keyed and Lazy elements? Is it ok to use them with this lib?
>
> Il giorno ven 28 ott 2016 alle ore 14:58 Matthew Griffith <
> mdg.gr...@gmail.com > ha scritto:
>
>>
>> I'll have to think about it a bit to see if this could use the work from 
>> elm-css.  The two libraries have very different approaches, though it might 
>> be possible.  Or maybe this library will grow to have additional 
>> type-checking some other way.
>>
>> It is now published! 
>> http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
>>
>>
>>
>>
>>
>> On Friday, October 28, 2016 at 2:46:51 AM UTC-4, Ed Ilyin wrote:
>>
>>> And, clould you please, publish it, so we can try it easly and follow 
>>> updates.
>>>
>>> Il giorno ven 28 ott 2016 alle ore 06:54 Ed Ilyin  
>>> ha scritto:
>>>
>> Is it possible to blend it together with Richard Feldman's work elm-css 
 where all properties are type checked?

 Il giorno gio 27 ott 2016 alle ore 23:54 Matthew Griffith <
 mdg.gr...@gmail.com> ha scritto:

>>> Thanks!  Feedback would be fantastic.  
>
> Yes, the compiler should help quite a bit here, however styling is 
> tough because it has quite a few "gotchas", so its hard to know 100%.
>
> Also, this library is mostly concerned with a small set  of css 
> properties(~15-20) that cause the most trouble.  Beyond that you're free 
> to 
> add whatever you need.  Of course, that means those additional style 
> properties you add are not type checked, they're just strings.
>
>
>
>
>
>
>
>
>
>
>
>
> On Thursday, October 27, 2016 at 4:16:22 PM UTC-4, Fed Reggiardo wrote:
>>
>> Looks great!!  Nice work.  Im getting ready to style a new website, 
>> will try it out, and send some feedback. Quick question, will the 
>> compiler 
>> catch any errors on this?
>>
>> thx!
>>
> -- 
> 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...@googlegroups.com.


> For more options, visit https://groups.google.com/d/optout.
>
 -- 
>> 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...@googlegroups.com .
>> For more options, visit https://groups.google.com/d/optout.
>>
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: The Style Elements Library: a different approach to styling

[Ed Ilyin]

I have started to use this library - for me it is perfect that I do not
have to generate css file anymore.
Great work Matthew! :)
Of course I have first questions:
1. For example, user taps on menu item. To show that item is selected I
have to replace element with different color element correct? How it is
from the performance point of view? Or I have to add Bool parameter to
element which contols color and text weight? What is the best practice?
2. What about Keyed and Lazy elements? Is it ok to use them with this lib?

Il giorno ven 28 ott 2016 alle ore 14:58 Matthew Griffith <
mdg.griff...@gmail.com> ha scritto:

>
> I'll have to think about it a bit to see if this could use the work from
> elm-css.  The two libraries have very different approaches, though it might
> be possible.  Or maybe this library will grow to have additional
> type-checking some other way.
>
> It is now published!
> http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
>
>
>
>
>
> On Friday, October 28, 2016 at 2:46:51 AM UTC-4, Ed Ilyin wrote:
>
> And, clould you please, publish it, so we can try it easly and follow
> updates.
>
> Il giorno ven 28 ott 2016 alle ore 06:54 Ed Ilyin 
> ha scritto:
>
> Is it possible to blend it together with Richard Feldman's work elm-css
> where all properties are type checked?
>
> Il giorno gio 27 ott 2016 alle ore 23:54 Matthew Griffith <
> mdg.gr...@gmail.com> ha scritto:
>
> Thanks!  Feedback would be fantastic.
>
> Yes, the compiler should help quite a bit here, however styling is tough
> because it has quite a few "gotchas", so its hard to know 100%.
>
> Also, this library is mostly concerned with a small set  of css
> properties(~15-20) that cause the most trouble.  Beyond that you're free to
> add whatever you need.  Of course, that means those additional style
> properties you add are not type checked, they're just strings.
>
>
>
>
>
>
>
>
>
>
>
>
> On Thursday, October 27, 2016 at 4:16:22 PM UTC-4, Fed Reggiardo wrote:
>
> Looks great!!  Nice work.  Im getting ready to style a new website, will
> try it out, and send some feedback. Quick question, will the compiler catch
> any errors on this?
>
> thx!
>
> --
> 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...@googlegroups.com.
>
>
> For more options, visit https://groups.google.com/d/optout.
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: The Style Elements Library: a different approach to styling

[Matthew Griffith]

I'll have to think about it a bit to see if this could use the work from 
elm-css.  The two libraries have very different approaches, though it might 
be possible.  Or maybe this library will grow to have additional 
type-checking some other way.

It is now 
published! http://package.elm-lang.org/packages/mdgriffith/style-elements/latest





On Friday, October 28, 2016 at 2:46:51 AM UTC-4, Ed Ilyin wrote:
>
> And, clould you please, publish it, so we can try it easly and follow 
> updates.
>
> Il giorno ven 28 ott 2016 alle ore 06:54 Ed Ilyin  > ha scritto:
>
>> Is it possible to blend it together with Richard Feldman's work elm-css 
>> where all properties are type checked?
>>
>> Il giorno gio 27 ott 2016 alle ore 23:54 Matthew Griffith <
>> mdg.gr...@gmail.com > ha scritto:
>>
>>> Thanks!  Feedback would be fantastic.  
>>>
>>> Yes, the compiler should help quite a bit here, however styling is tough 
>>> because it has quite a few "gotchas", so its hard to know 100%.
>>>
>>> Also, this library is mostly concerned with a small set  of css 
>>> properties(~15-20) that cause the most trouble.  Beyond that you're free to 
>>> add whatever you need.  Of course, that means those additional style 
>>> properties you add are not type checked, they're just strings.
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> On Thursday, October 27, 2016 at 4:16:22 PM UTC-4, Fed Reggiardo wrote:

 Looks great!!  Nice work.  Im getting ready to style a new website, 
 will try it out, and send some feedback. Quick question, will the compiler 
 catch any errors on this?

 thx!

>>> -- 
>>> 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...@googlegroups.com .
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: The Style Elements Library: a different approach to styling

[Matthew Griffith]

Thanks!  Feedback would be fantastic.  

Yes, the compiler should help quite a bit here, however styling is tough 
because it has quite a few "gotchas", so its hard to know 100%.

Also, this library is mostly concerned with a small set  of css 
properties(~15-20) that cause the most trouble.  Beyond that you're free to 
add whatever you need.  Of course, that means those additional style 
properties you add are not type checked, they're just strings.












On Thursday, October 27, 2016 at 4:16:22 PM UTC-4, Fed Reggiardo wrote:
>
> Looks great!!  Nice work.  Im getting ready to style a new website, will 
> try it out, and send some feedback. Quick question, will the compiler catch 
> any errors on this?
>
> thx!
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: The Style Elements Library: a different approach to styling

[Zinggi]

Wow, this looks awesome!
I'm definitely gonna try that on my next project.
This might actually make css great again ;)

On Thursday, 27 October 2016 15:20:14 UTC+2, Matthew Griffith wrote:
>
>
> It's easy to write valid CSS that is still broken and frustrating. What if 
> we could make frustrating CSS styles not expressible?
>
> I've been working on an experimental style library for making styles that 
> are harder to break and easier to use.
>
> There is also support for flow/flexbox style layouts, animations, 
> transitions, and media queries.
>
> It takes a different approach on attaching styles to html nodes. Instead 
> of using classes and ids, you create collections of styled html elements to 
> pull from to build your view (with support for classList style variations 
> that can be turned on/off).  
>
> Let me know your thoughts!
>
> Note:  I haven't published this on elm-package yet as I wanted to see if 
> there was any feedback that might alter what 1.0 looks like.
>
> The Style Elements library 
>
> Simple Example 
> 
>
> Complex Example 
> 
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.