aptoma-alf - npm Package Compare versions

Comparing version 1.5.2 to 1.5.3

bower.json

 {
   "name": "aptoma-alf",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "homepage": "https://github.com/aptoma/alf-dist",
@@ -5,0 +5,0 @@ "authors": [

CHANGELOG.md

@@ -0,1 +1,7 @@
+### 1.5.3 - 2015-07-01
+ * NEW: Add alf-block-is-first class name on the first block in the layout
+
+### 1.5.2 - 2015-04-20
+  * IMPROVED: Documentation for containers and figures
+
 ### 1.5.1 - 2015-04-09
@@ -2,0 +8,0 @@ * FIXED: Bug causing fullscreen to fire unintentionally in some cases

docs/container.md

@@ -1,6 +0,6 @@
-## Description
+## Containers
 
 Containers are elements used in [templates](Building templates) to contain [figures](figure).
 
-## Examples
+## Basic Example
 
@@ -28,1 +28,55 @@ Lets say that the article we're importing contains the following [figure](figure):
 ```
+
+## Mapping images
+
+When creating layouts with images, you will often need to work with a variety of image sizes and formats. As shown in the section on [figures](figures), we recommend mapping images using `{format}-{size}`.
+
+Let's assume the following article:
+
+```html
+<figure>
+    <div data-map="landscape-large">
+        <img width="600" height="400" data-src="http://url/to/image.jpg" data-src-2x="http://url/to/[e-mail]" />
+    </div>
+</figure>
+<figure>
+    <div data-map="4x3-large">
+        <img width="1024" height="768" data-src="http://url/to/image.jpg" data-src-2x="http://url/to/[e-mail]" />
+    </div>
+</figure>
+<figure>
+    <div data-map="portrait-large">
+        <img width="400" height="600" data-src="http://url/to/image.jpg" data-src-2x="http://url/to/[e-mail]" />
+    </div>
+</figure>
+```
+
+If you simply want to match any large image, you can use `*-large`:
+
+```html
+// Template
+<div class="alf-container" data-map="*-large"></div>
+
+// Output
+<div class="alf-container" data-map="*-large">
+	<div data-map="landscape-large">
+        <img width="1024" height="768" data-src="http://url/to/image.jpg" data-src-2x="http://url/to/[e-mail]" />
+    </div>
+</div>
+```
+
+This will match the first image we find, that has any value followed by `-large`. If you want a little more control, but still allow for a wider match, you can provide multiple values:
+
+```html
+// Template
+<div class="alf-container" data-map="4x3-large landscape-large *-large"></div>
+
+// Output
+<div class="alf-container" data-map="4x3-large landscape-large *-large">
+	<div data-map="4x3-large">
+        <img width="1024" height="768" data-src="http://url/to/image.jpg" data-src-2x="http://url/to/[e-mail]" />
+    </div>
+</div>
+```
+
+Here, the `4x3-large` image is picked, as it's first value in `data-map`. On the next page, the `landscape-large` would be picked, and finally, `portrait-large`.

docs/figure.md

@@ -1,2 +0,2 @@
-## Description
+## Figures
 
@@ -57,2 +57,3 @@ A **figure** is a way to group variations of the same element. E.g. the same image, but in large, medium and small sizes. Only **one** of these are ever in use at the same time.
 Examples:
+
  * `4x3-large`, `4x3-small`
@@ -59,0 +60,0 @@ * `16x9-large`, `16x9-small`

package.json

 {
   "name": "aptoma-alf",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Aptoma Layout Framework",
@@ -5,0 +5,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

478203

increased by0.5%

No dependency changes