AM libraries/real-world examples

[geelen]

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]

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]

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]

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]

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]

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

[basham]

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

[oliver-eifler]

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]

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

[PayteR]

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]

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]

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]

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]

Hi!

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

• https://github.com/sistrall/amcss
• https://github.com/sistrall/amcss-rails

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]

@sistrall that's super awesome!!

[KaelWD]

@indrekpaas I modified your mixin a bit to let you declare multiple selectors at once, as well as change the prefix.