-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
52 lines (52 loc) · 9.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>AMCSS - Attribute Modules for CSS</title><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimal-ui"><meta name="breakpoint" content="small" media="(max-width: 520px)"><meta name="breakpoint" content="medium" media="(min-width: 521px) and (max-width: 900px)"><meta name="breakpoint" content="large" media="(min-width: 901px)"><script type="text/javascript">
!function(a,b){"use strict";var c={breakpoints:{},_isTicking:!1,_debounceLastTime:0,_namedEvents:{},_eventMatchCache:{},_globalEvents:[],onBreakpointChange:function(){var a=Array.prototype.slice.call(arguments),b=a.pop(),d=a.pop();"undefined"==typeof d?c._globalEvents.push(b):(c._namedEvents[d]=[]).push(b),k()}},d=function(c){/in/.test(b.readyState)?a.setTimeout(function(){d(c)},9):c()},e=function(a,b){var c=a.className.split(" "),d=c.indexOf(b);d>-1&&(c.splice(d,1),a.className=c.join(" "))},f=function(a,b){-1===a.className.indexOf(b)&&(a.className=""!==a.className?a.className+" "+b:b)},g=function(a,c){var d="breakpoint-"+c,g=b.documentElement;a?f(g,d):e(g,d)},h=function(a){c._globalEvents.forEach(function(b){"function"==typeof b&&b(a)})},i=function(){c._isTicking||j(k),c._isTicking=!0},j=function(b,d){if(!a.requestAnimationFrame){var e=(new Date).getTime(),f=Math.max(0,16-(e-c._debounceLastTime)),g=a.setTimeout(function(){b(e+f)},f);return c._debounceLastTime=e+f,g}a.requestAnimationFrame(b,d)},k=function(){c._isTicking=!1;var b=[];for(var d in c.breakpoints){var e=c.breakpoints[d],f=a.matchMedia(e).matches;if(c._namedEvents[d]&&c._eventMatchCache[d]!==f){c._eventMatchCache[d]=f;for(var i=0;i<c._namedEvents[d].length;i++){var j=c._namedEvents[d][i];"function"==typeof j&&j(f)}}f&&b.push(d),g(f,d)}0!==b.length&&h(b)},l=function(){for(var a=b.getElementsByTagName("meta"),d=0;d<a.length;d++)if("breakpoint"===a[d].name){var e=a[d].getAttribute("content"),f=a[d].getAttribute("media");c.breakpoints[e]=f}},m=function(){l(),k()},n=function(){l(),k(),a.addEventListener("resize",i)};"undefined"!=typeof module&&module.exports?module.exports=c:a.metaQuery=c,m(),d(n)}(window,document);</script><link rel="stylesheet" href="/styles/main.css"></head><body><header am-HomepageHero="am-HomepageHero"><h1>AMCSS</h1><h2><span>Attribute Modules</span> for CSS</h2></header><main><section am-Example="am-Example"><p>Attribute Modules (AM) is a technique for using HTML <strong>attributes</strong> and their <strong>values</strong> rather than classes for styling elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS.</p>
<p>It's not a framework or a library, it's a style that better describes the components you're building. For an introduction to how AM was developed, see the <a href="http://glenmaddern.com/articles/introducing-am-css">original blog post</a> by Glen Maddern. The <a href="https://github.com/amcss/attribute-module-specification/">specification itself</a> is available on GitHub.</p>
</section><section am-Example="am-Example"><h3><strong>Example:</strong> Bootstrap Buttons</h3><p>Buttons are one of the strongest use-cases for AM. Here we've converted some of Bootstrap's button markup as an example.</p>
<pre><code><span am-Code="comment"><!-- Large primary button -->
</span><a <span am-Code="removed">class="btn btn-primary btn-lg"</span>>Large primary button</a>
<a <span am-Code="added">am-Button="primary large"</span>>Large primary button</a>
<span am-Code="comment">
<!-- Default button -->
</span><a <span am-Code="removed">class="btn btn-default"</span>>Default button</a>
<a <span am-Code="added">am-Button</span>>Default button</a>
<span am-Code="comment">
<!-- Small info button -->
</span><a <span am-Code="removed">class="btn btn-info btn-sm"</span>>Small info button</a>
<a <span am-Code="added">am-Button="info small"</span>>Small info button</a>
<span am-Code="comment">
<!-- Extra-small danger button -->
</span><a <span am-Code="removed">class="btn btn-danger btn-xs"</span>>Extra-small danger button</a>
<a <span am-Code="added">am-Button="danger extra-small"</span>>Extra-small danger button</a></code></pre><p>The original Bootstrap markup is heavily convention-based: all buttons require a <code>btn</code> class <em>and</em> a specific button class prefixed by <code>btn-</code>. It results in cluttered, repetitive markup.</p>
<p>The AM version, in contrast, uses the attribute <code>am-Button</code> as an identifier, and allows straightforward, natural, additive modifiers, e.g. <code>large</code>, <code>primary</code>, etc.</p>
<p>The CSS changes are quite straightforward:</p>
<pre><code><span am-Code="removed">.btn</span> <span am-Code="added">[am-Button]</span> { <span am-Code="comment">/* Default button styles */</span> }
<span am-Code="removed">.btn-primary</span> <span am-Code="added">[am-Button~="primary"]</span> { <span am-Code="comment">/* Primary colours */</span> }
<span am-Code="removed">.btn-large</span> <span am-Code="added">[am-Button~="large"]</span> { <span am-Code="comment">/* Large sizing */</span> }
</code></pre></section><section am-Example="am-Example"><h3><strong>Example:</strong> Flexbox Grid</h3><p>Using a grid system is commonplace and <a href="http://flexboxgrid.com/">Flexbox Grid</a> is one we're particularly fond of. Here we've converted some example markup into an AM style.</p>
<pre><code><div <span am-Code="removed">class="row reverse"</span> <span am-Code="added">am-Grid-Row="reverse"</span>>
<div <span am-Code="removed">class="column-12--hand column-8--lap"</span> <span am-Code="added">am-Grid-Col="12 lap:8"</span>
<div <span am-Code="removed">class="box"</span> <span am-Code="added">am-Demo="box"</span>>Responsive</div>
</div>
</div></code></pre><p>The original markup shares some problems with all class-based grid systems. Because grid classes are used so frequently, it uses relatively <em>bare</em> css classes like <code>row</code> & <code>reverse</code>, but because columns need to be responsive, it eschews a global <code>col</code> class and instead defines <code>col-<em>breakpoint</em>-<em>number</em></code> classes.</p>
<p>The AM markup, on the other hand, defines <code>am-Grid-Row</code> and <code>am-Grid-Column</code> modules, and since each of those define a namespace we can be free to use values of our choosing. These values can make use of a wider range of characters than is convenient with classes, so we can use a <code><em>breakpoint</em>:<em>number</em></code> syntax, which is easier to understand at a glance. We can also adopt a mobile-first apporach by omitting the <code>hand</code> breakpoint.</p>
</section><section am-Example="am-Example"><h3><strong>Example:</strong> Traits</h3><p>While AM can be used as a drop-in for BEM-style class naming, you can also consider a module defining a more general <em>namespace</em> for grouping related styles. Similar to utility classes in Suit CSS, these can be thought of as reusable style <strong>traits</strong>, that can be applied on or within components.</p>
<pre><code><div <span am-Code="removed">class="u-posAbsoluteCenter"</span> <span am-Code="added">am-position="absolute center"</span>>
<div <span am-Code="removed">class="u-textTruncate u-textCenter"</span> <span am-Code="added">am-text="truncate center"</span>>
Very centered text.
</div>
</div></code></pre><p>Here, we're able to make use of the fact that values for <code>am-position</code> and <code>am-text</code> operate in <em>different namespaces</em>, so we can use the value <code>center</code> in both places without worrying about naming clashes.</p>
</section><section am-Example="am-Example"><h2>Built with AM</h2><ul>
<li><strong><a href="https://github.com/benschwarz/am-grid">am-Grid</a></strong><br>
An AM grid system, inspired by Flexbox Grid. <a href="https://github.com/benschwarz/am-grid/blob/master/src/grid.css">View source</a>.</li>
<li><strong><a href="https://github.com/amcss/amcss.github.io/tree/development">amcss.github.io</a></strong><br>
A simple example of components in AM, broken up into <a href="https://github.com/amcss/amcss.github.io/tree/development/src/styles/modules">four simple modules</a>.</li>
</ul>
</section><section am-Example="am-Example"><h2>Call for feedback</h2><p>We'd love to hear suggestions for inclusions to the AM specification, by adding <a href="https://github.com/amcss/attribute-module-specification/issues">an issue to our tracker</a> or contributing to an existing discussion. If you create an AM-style CSS library or framework, please <a href="https://github.com/amcss/attribute-module-specification/issues/5">let us know</a>.</p>
</section></main><footer am-Contributors="am-Contributors"><h3>Developed by</h3><ol><li><a href="https://twitter.com/glenmaddern" target="_blank"><img src="/images/glen.jpg"/>Glen Maddern</a></li><li><a href="https://twitter.com/benschwarz" target="_blank"><img src="/images/ben.jpg"/>Ben Schwarz</a></li></ol><h3>With thanks to</h3><ul><li>Ben Smithett</li><li>Florent Verschelde</li><li>Robbie Manson</li></ul></footer><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-32408977-7', 'auto');
ga('send', 'pageview');</script><script>[].forEach.call(document.querySelectorAll('[am-Example] a[href^=http]'), function(el) {
el.setAttribute('target', '_blank');
})</script></body></html>