AM libraries/real-world examples #5

Open
geelen opened this Issue Sep 4, 2014 · 16 comments

Comments

Projects
None yet
@geelen
Contributor

geelen commented Sep 4, 2014

I'd love to link off to some AM libraries on the home page, but none are complete enough at the moment, and I think linking to in-progress stuff will confuse people, since this has all been developed so recently.

Here's what I already have:

  • https://github.com/benschwarz/am-grid

    Not useable yet. Predates a lot of the work on the spec and other examples, and so doesn't quite conform to what we've got now.
  • https://github.com/geelen/am-topcoat

    My port of Topcoat to AM. I really want to get this finished and use it to run performance tests. Still a work in progress now though.
  • https://github.com/geelen/glenmaddern.com

    My personal site's source. Uses traits & SCSS mixins really heavily to do fancy breakpoint stuff, which I should break into its own project, and makes the source hard to understand coming to it fresh. Also uses _ for a prefix which throws people.
  • https://github.com/amcss/amcss.github.io/tree/development

    The amcss website source. Pretty much a copy of my personal stuff, so has all the SCSS stuff, but doesn't really make use of it. Could be converted to simple CSS and serve as an example.

If you have more, please add them here. When we have one or two I'll change the AM homepage to link to them.

@geelen

This comment has been minimized.

Show comment
Hide comment
@geelen

geelen Sep 5, 2014

Contributor

Benny fixed up am-grid, and I hacked the AMCSS landing page styles to drop all the SASS magic, so they're on the page now.

Contributor

geelen commented Sep 5, 2014

Benny fixed up am-grid, and I hacked the AMCSS landing page styles to drop all the SASS magic, so they're on the page now.

@VinSpee

This comment has been minimized.

Show comment
Hide comment
@VinSpee

VinSpee Sep 5, 2014

Hi! I'm really interested in what you guys are doing here. I wrote a SUIT module for a material-design-like depth util.

I ported it to am, and I'd like to get some feedback before I go forth and convert some other SUIT utils etc. Thoughts? Also, how should we name modules going forward so they can be reused?

They look like this:

Another issue: I'm currently working on a react app, and am- prefixes are a dealbreaker. It may be wise to go data-am-.

VinSpee commented Sep 5, 2014

Hi! I'm really interested in what you guys are doing here. I wrote a SUIT module for a material-design-like depth util.

I ported it to am, and I'd like to get some feedback before I go forth and convert some other SUIT utils etc. Thoughts? Also, how should we name modules going forward so they can be reused?

They look like this:

Another issue: I'm currently working on a react app, and am- prefixes are a dealbreaker. It may be wise to go data-am-.

@pl-mnm

This comment has been minimized.

Show comment
Hide comment
@pl-mnm

pl-mnm Sep 6, 2014

Hi there. I'm really liking the idea behind all this, thanks everyone. For what it's worth, I wanted to give it a try and did a basic media object gist with amcss, it was very simple to write and everything looks really clean. Loving it so far.

What I'm wondering is when is it best to switch from a child element to a trait and vice-versa. In my gist, I sized the media element with a [am-layout~="width"] trait, but chose to size the media image with a [am-Media-Img~="width"] child element and value (if that makes sense). I guess ultimately it depends on project or personal preferences and could do both depending on the situation. In this case i figured that the width of the media element could be dependent on any context, but the width of the image was mostly going to be related to the media element directly, hence the child element.

pl-mnm commented Sep 6, 2014

Hi there. I'm really liking the idea behind all this, thanks everyone. For what it's worth, I wanted to give it a try and did a basic media object gist with amcss, it was very simple to write and everything looks really clean. Loving it so far.

What I'm wondering is when is it best to switch from a child element to a trait and vice-versa. In my gist, I sized the media element with a [am-layout~="width"] trait, but chose to size the media image with a [am-Media-Img~="width"] child element and value (if that makes sense). I guess ultimately it depends on project or personal preferences and could do both depending on the situation. In this case i figured that the width of the media element could be dependent on any context, but the width of the image was mostly going to be related to the media element directly, hence the child element.

@RVMendoza

This comment has been minimized.

Show comment
Hide comment
@RVMendoza

RVMendoza Sep 8, 2014

Yo! Y'all are so clever. It's been a trip implementing this so far!
Here's a module that lets you use the SuitCSS arrange component in AM CSS convention.
I use the arrange component a lot, so I thought it would be useful to everyone.

Yo! Y'all are so clever. It's been a trip implementing this so far!
Here's a module that lets you use the SuitCSS arrange component in AM CSS convention.
I use the arrange component a lot, so I thought it would be useful to everyone.

@benschwarz

This comment has been minimized.

Show comment
Hide comment
@benschwarz

benschwarz Sep 8, 2014

Member

Awesome work @RVMendoza, I've left some commentary on RVMendoza/am-arrange#1

Member

benschwarz commented Sep 8, 2014

Awesome work @RVMendoza, I've left some commentary on RVMendoza/am-arrange#1

@basham

This comment has been minimized.

Show comment
Hide comment
@basham

basham Sep 8, 2014

I use Less as my preprocessor. I've really enjoy the use of the parent selector to assist with simplifying how to write BEM-style class names. After some experimenting, I found a way to translate the same benefits of the class-based technique (not repeating the module name, variable and mixin scoping) to the AMCSS technique. Pretty happy with the results.

http://codepen.io/basham/pen/dyevq

basham commented Sep 8, 2014

I use Less as my preprocessor. I've really enjoy the use of the parent selector to assist with simplifying how to write BEM-style class names. After some experimenting, I found a way to translate the same benefits of the class-based technique (not repeating the module name, variable and mixin scoping) to the AMCSS technique. Pretty happy with the results.

http://codepen.io/basham/pen/dyevq

@indrekpaas

This comment has been minimized.

Show comment
Hide comment
@indrekpaas

indrekpaas Sep 12, 2014

A simple Sass mixin for generating amcss selectors on the fly: http://sassmeister.com/gist/49f466270618d4b8ee7e

A simple Sass mixin for generating amcss selectors on the fly: http://sassmeister.com/gist/49f466270618d4b8ee7e

@oliver-eifler

This comment has been minimized.

Show comment
Hide comment
@oliver-eifler

oliver-eifler Oct 3, 2014

First release of my am.js
a javascript library for using attributes and their values rather than classes for styling HTML elements.
Based on AMCSS Attribute Modules for CSS - Specification github.com/amcss/attribute-module-specification.
Works on all browsers which supports attribute and ~= selectors
You can find it here on git:
https://github.com/oliver-eifler/am.js.git
Comments are welcome ;)

First release of my am.js
a javascript library for using attributes and their values rather than classes for styling HTML elements.
Based on AMCSS Attribute Modules for CSS - Specification github.com/amcss/attribute-module-specification.
Works on all browsers which supports attribute and ~= selectors
You can find it here on git:
https://github.com/oliver-eifler/am.js.git
Comments are welcome ;)

@curtisblackwell

This comment has been minimized.

Show comment
Hide comment
@curtisblackwell

curtisblackwell Oct 4, 2014

@indrekpaas that's awesome. wish I had seen that before I started playing around with AMCSS a while back.

@indrekpaas that's awesome. wish I had seen that before I started playing around with AMCSS a while back.

@PayteR

This comment has been minimized.

Show comment
Hide comment
@PayteR

PayteR Dec 1, 2014

Hi guys. I like this whole idea, i want to spend some time on this an contribute, but im concerned, because there's nothing new in repository since 3 months ago, and here is last comment posted on 4 Oct. Why is this so? Are here some drawbacks, or it's just because no one knows about this or main people involved in this haven't time for it now?

PayteR commented Dec 1, 2014

Hi guys. I like this whole idea, i want to spend some time on this an contribute, but im concerned, because there's nothing new in repository since 3 months ago, and here is last comment posted on 4 Oct. Why is this so? Are here some drawbacks, or it's just because no one knows about this or main people involved in this haven't time for it now?

@geelen

This comment has been minimized.

Show comment
Hide comment
@geelen

geelen Dec 2, 2014

Contributor

Yeah, basically I got deep into a project for a client and neglected
everything else, including AM :) But https://coinjar.com (the marketing
page & the app itself) is now live and fully written in AM, and it's been
super awesome, so I've got a bunch more to contribute now things have
settled down there.

On Tue Dec 02 2014 at 2:04:12 AM Peter Payter Gašparík <
notifications@github.com> wrote:

Hi guys. I like this whole idea, i want to spend some time on this an
contribute, but im concerned, because there's nothing new in repository
since 3 months ago, and here is last comment posted on 4 Oct. Why is this
so? Are here some drawbacks, or it's just because no one knows about this
or main people involved in this haven't time for it now?


Reply to this email directly or view it on GitHub
#5 (comment)
.

Contributor

geelen commented Dec 2, 2014

Yeah, basically I got deep into a project for a client and neglected
everything else, including AM :) But https://coinjar.com (the marketing
page & the app itself) is now live and fully written in AM, and it's been
super awesome, so I've got a bunch more to contribute now things have
settled down there.

On Tue Dec 02 2014 at 2:04:12 AM Peter Payter Gašparík <
notifications@github.com> wrote:

Hi guys. I like this whole idea, i want to spend some time on this an
contribute, but im concerned, because there's nothing new in repository
since 3 months ago, and here is last comment posted on 4 Oct. Why is this
so? Are here some drawbacks, or it's just because no one knows about this
or main people involved in this haven't time for it now?


Reply to this email directly or view it on GitHub
#5 (comment)
.

@eltonmesquita

This comment has been minimized.

Show comment
Hide comment
@eltonmesquita

eltonmesquita Dec 2, 2014

Good to know @geelen. It's great to see AM in action in a real page. As expected there's no perceived performance lost using AM. BTW the markup looks great using it! ;D

Good to know @geelen. It's great to see AM in action in a real page. As expected there's no perceived performance lost using AM. BTW the markup looks great using it! ;D

@magicznyleszek

This comment has been minimized.

Show comment
Hide comment
@magicznyleszek

magicznyleszek Apr 10, 2015

I started using AMs about a year ago[1], and never turned back - all my websites use it. Now I'm building one huge app with AMs. I also created a simple compass-based boilerplate to jump-start every project.

The only problem I have right now is what prefix should I use. I keep using am-, but I'm not happy with it. I was thinking about using uie- or even i-, as "user interface element" or "interface" is making a lot more sense to me than prefixing an attribute with "attribute module" abbreviation. @geelen's idea to use "_" seems tempting...

[1] I'm not following all the rules: I treat traits and modules as same thing.

I started using AMs about a year ago[1], and never turned back - all my websites use it. Now I'm building one huge app with AMs. I also created a simple compass-based boilerplate to jump-start every project.

The only problem I have right now is what prefix should I use. I keep using am-, but I'm not happy with it. I was thinking about using uie- or even i-, as "user interface element" or "interface" is making a lot more sense to me than prefixing an attribute with "attribute module" abbreviation. @geelen's idea to use "_" seems tempting...

[1] I'm not following all the rules: I treat traits and modules as same thing.

@sistrall

This comment has been minimized.

Show comment
Hide comment
@sistrall

sistrall Jun 19, 2015

Hi!

Just released two Ruby library that allow to use AMCSS in Ruby on Rails projects:

They are a starting point and have basic functionality. The idea is to develop more library to easily use AMCSS approach in different Ruby context (Jekyll or Middleman websites, Lotus application...).

Hi!

Just released two Ruby library that allow to use AMCSS in Ruby on Rails projects:

They are a starting point and have basic functionality. The idea is to develop more library to easily use AMCSS approach in different Ruby context (Jekyll or Middleman websites, Lotus application...).

@geelen

This comment has been minimized.

Show comment
Hide comment
@geelen

geelen Jun 20, 2015

Contributor

@sistrall that's super awesome!!

Contributor

geelen commented Jun 20, 2015

@sistrall that's super awesome!!

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