Skip to content
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

AM libraries/real-world examples #5

geelen opened this issue Sep 4, 2014 · 16 comments

AM libraries/real-world examples #5

geelen opened this issue Sep 4, 2014 · 16 comments


Copy link

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:


    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.

    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.

    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.

    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.

Copy link
Contributor Author

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.

Copy link

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

Copy link

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.

Copy link

RVMendoza commented 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.

Copy link

benschwarz commented Sep 8, 2014

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

Copy link

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.

Copy link

indrekpaas commented Sep 12, 2014

A simple Sass mixin for generating amcss selectors on the fly:

Copy link

oliver-eifler commented 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
Works on all browsers which supports attribute and ~= selectors
You can find it here on git:
Comments are welcome ;)

Copy link

curtisblackwell commented Oct 4, 2014

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

Copy link

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?

Copy link
Contributor Author

geelen commented Dec 2, 2014

Yeah, basically I got deep into a project for a client and neglected
everything else, including AM :) But (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 <> 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)

Copy link

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

Copy link

magicznyleszek commented 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.

Copy link

sistrall commented Jun 19, 2015


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

Copy link
Contributor Author

geelen commented Jun 20, 2015

@sistrall that's super awesome!!

Copy link

KaelWD commented Jul 9, 2016

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

No branches or pull requests