+ Typography
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
+
- Heading <h1> 5.0rem (50px)
- Heading <h2> 4.2rem (42px)
- Heading <h3> 3.6rem (36px)
- Heading <h4> 3.0rem (30px)
- Heading <h5> 2.4rem (24px)
- Heading <h6> 1.5rem (15px)
+
+
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+
+ Heading <h1> 5.0rem (50px)
+ Heading <h2> 4.2rem (42px)
+ Heading <h3> 3.6rem (36px)
+ Heading <h4> 3.0rem (30px)
+ Heading <h5> 2.4rem (24px)
+ Heading <h6> 1.5rem (15px)
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+Obcaecati error a, quas fugit hic, accusantium autem necessitatibus praesentium placeat, iusto et soluta expedita! Quisquam repellendus voluptatem, tempora iste culpa fuga, !
Quisquam nobis, ad. Iusto, repudiandae. Autem ipsa blanditiis, quae, fugit nobis perspiciatis in beatae vitae numquam illo, architecto hic dolor molestiae aliquid
.
See more examples of typography here.
Blockquotes
-
- -+Yeah!! Milligram is amazing.
-
+
+
+ Yeah!! Milligram is amazing.
+
+ ++Yeah!! Milligram is amazing.
+
See more examples of blockquotes here.
Buttons
- Default Button
-
-
+
-
+
+
+ Default Button
+ Outlined Button
+ Clear Button
+ Default Button
+ Outlined Button
+ Clear Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ See more examples of buttons here.
- Unordered list item 1
- Unordered list item 2 +
-
+
-
+
- Unordered list item 1 +
- Unordered list item 2 +
-
+
-
+
- Unordered list item 1 +
- Unordered list item 2 +
+
+ - Unordered list item 3 +
- Unordered list item 4
- Ordered list item 1
- Ordered list item 2 +
-
+
-
+
- Ordered list item 1 +
- Ordered list item 2 +
-
+
-
+
- Ordered list item 1 +
- Ordered list item 2 +
+
+ - Ordered list item 3 +
- Ordered list item 4
- Description list item 1
- Description list item 1.1 +
- Description list item 1.2 +
- Description list item 1.3 +
- Description list item 2 +
- Description list item 2.1 +
- Description list item 3 +
- Description list item 3.1
See more examples of lists here.
Forms
-
- See more examples of tables here.
Grids
-
@@ -151,25 +544,18 @@
-
-
diff --git a/test/visual/backstop.config.js b/test/visual/backstop.config.js
index 53a10c8..26d024c 100644
--- a/test/visual/backstop.config.js
+++ b/test/visual/backstop.config.js
@@ -1,32 +1,118 @@
module.exports = {
viewports: [
- { name: 'phone_v', width: 320, height: 480 },
- { name: 'phone_h', width: 480, height: 320 },
- { name: 'tablet_v', width: 768, height: 1024 },
- { name: 'tablet_h', width: 1024, height: 768 },
+ { name: 'phone', width: 320, height: 480 },
+ { name: 'tablet', width: 768, height: 1024 },
{ name: 'laptop', width: 1280, height: 800 },
{ name: 'desktop', width: 1920, height: 1080 }
],
scenarios: [{
- label: 'Milligram | A minimalist CSS framework.',
- url: 'http://localhost:3000',
- hideSelectors: [],
- removeSelectors: ['.__bs_notify__'],
- selectors: ['body'],
- readyEvent: null,
- delay: 500,
- misMatchThreshold: 0.1,
- onBeforeScript: 'onBefore.js',
- onReadyScript: 'onReady.js'
- }],
+ label: 'Typography',
+ url: 'http://localhost:3000',
+ hideSelectors: [],
+ removeSelectors: ['#__bs_notify__'],
+ selectors: ['#typography'],
+ readyEvent: null,
+ delay: 500,
+ misMatchThreshold: 0.1,
+ onBeforeScript: 'onBefore.js',
+ onReadyScript: 'onReady.js'
+ },{
+ label: 'Blockquotes',
+ url: 'http://localhost:3000',
+ hideSelectors: [],
+ removeSelectors: ['#__bs_notify__'],
+ selectors: ['#blockquotes'],
+ readyEvent: null,
+ delay: 500,
+ misMatchThreshold: 0.1,
+ onBeforeScript: 'onBefore.js',
+ onReadyScript: 'onReady.js'
+ }, {
+ label: 'Buttons',
+ url: 'http://localhost:3000',
+ hideSelectors: [],
+ removeSelectors: ['#__bs_notify__'],
+ selectors: ['#buttons'],
+ readyEvent: null,
+ delay: 500,
+ misMatchThreshold: 0.1,
+ onBeforeScript: 'onBefore.js',
+ onReadyScript: 'onReady.js'
+ }, {
+ label: 'Lists',
+ url: 'http://localhost:3000',
+ hideSelectors: [],
+ removeSelectors: ['#__bs_notify__'],
+ selectors: ['#lists'],
+ readyEvent: null,
+ delay: 500,
+ misMatchThreshold: 0.1,
+ onBeforeScript: 'onBefore.js',
+ onReadyScript: 'onReady.js'
+ }, {
+ label: 'Forms',
+ url: 'http://localhost:3000',
+ hideSelectors: [],
+ removeSelectors: ['#__bs_notify__'],
+ selectors: ['#forms'],
+ readyEvent: null,
+ delay: 500,
+ misMatchThreshold: 0.1,
+ onBeforeScript: 'onBefore.js',
+ onReadyScript: 'onReady.js'
+ }, {
+ label: 'Tables',
+ url: 'http://localhost:3000',
+ hideSelectors: [],
+ removeSelectors: ['#__bs_notify__'],
+ selectors: ['#tables'],
+ readyEvent: null,
+ delay: 500,
+ misMatchThreshold: 0.1,
+ onBeforeScript: 'onBefore.js',
+ onReadyScript: 'onReady.js'
+ }, {
+ label: 'Grids',
+ url: 'http://localhost:3000',
+ hideSelectors: [],
+ removeSelectors: ['#__bs_notify__'],
+ selectors: ['#grids'],
+ readyEvent: null,
+ delay: 500,
+ misMatchThreshold: 0.1,
+ onBeforeScript: 'onBefore.js',
+ onReadyScript: 'onReady.js'
+ }, {
+ label: 'Codes',
+ url: 'http://localhost:3000',
+ hideSelectors: [],
+ removeSelectors: ['#__bs_notify__'],
+ selectors: ['#codes'],
+ readyEvent: null,
+ delay: 500,
+ misMatchThreshold: 0.1,
+ onBeforeScript: 'onBefore.js',
+ onReadyScript: 'onReady.js'
+ }, {
+ label: 'Utilities',
+ url: 'http://localhost:3000',
+ hideSelectors: [],
+ removeSelectors: ['#__bs_notify__'],
+ selectors: ['#utilities'],
+ readyEvent: null,
+ delay: 500,
+ misMatchThreshold: 0.1,
+ onBeforeScript: 'onBefore.js',
+ onReadyScript: 'onReady.js'
+ }],
paths: {
bitmaps_reference: '../../test/visual/reference',
bitmaps_test: '.tmp',
casper_scripts: '../../test/visual/fixtures',
compare_data: '.tmp/compare.json'
},
- engine: 'slimerjs',
- report: ['browser'],
+ engine: 'phantomjs',
+ report: ['browser', 'CLI'],
casperFlags: [],
debug: false,
port: 3002
diff --git a/test/visual/reference/0_0_body_0_phone_v.png b/test/visual/reference/0_0_body_0_phone_v.png
deleted file mode 100644
index 3524754..0000000
Binary files a/test/visual/reference/0_0_body_0_phone_v.png and /dev/null differ
diff --git a/test/visual/reference/0_0_body_1_phone_h.png b/test/visual/reference/0_0_body_1_phone_h.png
deleted file mode 100644
index 1a5df18..0000000
Binary files a/test/visual/reference/0_0_body_1_phone_h.png and /dev/null differ
diff --git a/test/visual/reference/0_0_body_2_tablet_v.png b/test/visual/reference/0_0_body_2_tablet_v.png
deleted file mode 100644
index b41ae45..0000000
Binary files a/test/visual/reference/0_0_body_2_tablet_v.png and /dev/null differ
diff --git a/test/visual/reference/0_0_body_3_tablet_h.png b/test/visual/reference/0_0_body_3_tablet_h.png
deleted file mode 100644
index e1cfd36..0000000
Binary files a/test/visual/reference/0_0_body_3_tablet_h.png and /dev/null differ
diff --git a/test/visual/reference/0_0_body_4_laptop.png b/test/visual/reference/0_0_body_4_laptop.png
deleted file mode 100644
index accf48d..0000000
Binary files a/test/visual/reference/0_0_body_4_laptop.png and /dev/null differ
diff --git a/test/visual/reference/0_0_body_5_desktop.png b/test/visual/reference/0_0_body_5_desktop.png
deleted file mode 100644
index 4a646d8..0000000
Binary files a/test/visual/reference/0_0_body_5_desktop.png and /dev/null differ
diff --git a/test/visual/reference/0_0_typography_0_phone.png b/test/visual/reference/0_0_typography_0_phone.png
new file mode 100644
index 0000000..f2119a2
Binary files /dev/null and b/test/visual/reference/0_0_typography_0_phone.png differ
diff --git a/test/visual/reference/0_0_typography_1_tablet.png b/test/visual/reference/0_0_typography_1_tablet.png
new file mode 100644
index 0000000..aa784a6
Binary files /dev/null and b/test/visual/reference/0_0_typography_1_tablet.png differ
diff --git a/test/visual/reference/0_0_typography_2_laptop.png b/test/visual/reference/0_0_typography_2_laptop.png
new file mode 100644
index 0000000..b54267c
Binary files /dev/null and b/test/visual/reference/0_0_typography_2_laptop.png differ
diff --git a/test/visual/reference/0_0_typography_3_desktop.png b/test/visual/reference/0_0_typography_3_desktop.png
new file mode 100644
index 0000000..b54267c
Binary files /dev/null and b/test/visual/reference/0_0_typography_3_desktop.png differ
diff --git a/test/visual/reference/1_0_blockquotes_0_phone.png b/test/visual/reference/1_0_blockquotes_0_phone.png
new file mode 100644
index 0000000..393a793
Binary files /dev/null and b/test/visual/reference/1_0_blockquotes_0_phone.png differ
diff --git a/test/visual/reference/1_0_blockquotes_1_tablet.png b/test/visual/reference/1_0_blockquotes_1_tablet.png
new file mode 100644
index 0000000..4d8bfb4
Binary files /dev/null and b/test/visual/reference/1_0_blockquotes_1_tablet.png differ
diff --git a/test/visual/reference/1_0_blockquotes_2_laptop.png b/test/visual/reference/1_0_blockquotes_2_laptop.png
new file mode 100644
index 0000000..165f18f
Binary files /dev/null and b/test/visual/reference/1_0_blockquotes_2_laptop.png differ
diff --git a/test/visual/reference/1_0_blockquotes_3_desktop.png b/test/visual/reference/1_0_blockquotes_3_desktop.png
new file mode 100644
index 0000000..165f18f
Binary files /dev/null and b/test/visual/reference/1_0_blockquotes_3_desktop.png differ
diff --git a/test/visual/reference/2_0_buttons_0_phone.png b/test/visual/reference/2_0_buttons_0_phone.png
new file mode 100644
index 0000000..8bce393
Binary files /dev/null and b/test/visual/reference/2_0_buttons_0_phone.png differ
diff --git a/test/visual/reference/2_0_buttons_1_tablet.png b/test/visual/reference/2_0_buttons_1_tablet.png
new file mode 100644
index 0000000..8d9b2e3
Binary files /dev/null and b/test/visual/reference/2_0_buttons_1_tablet.png differ
diff --git a/test/visual/reference/2_0_buttons_2_laptop.png b/test/visual/reference/2_0_buttons_2_laptop.png
new file mode 100644
index 0000000..67cedba
Binary files /dev/null and b/test/visual/reference/2_0_buttons_2_laptop.png differ
diff --git a/test/visual/reference/2_0_buttons_3_desktop.png b/test/visual/reference/2_0_buttons_3_desktop.png
new file mode 100644
index 0000000..67cedba
Binary files /dev/null and b/test/visual/reference/2_0_buttons_3_desktop.png differ
diff --git a/test/visual/reference/3_0_lists_0_phone.png b/test/visual/reference/3_0_lists_0_phone.png
new file mode 100644
index 0000000..f5b63a5
Binary files /dev/null and b/test/visual/reference/3_0_lists_0_phone.png differ
diff --git a/test/visual/reference/3_0_lists_1_tablet.png b/test/visual/reference/3_0_lists_1_tablet.png
new file mode 100644
index 0000000..49ad581
Binary files /dev/null and b/test/visual/reference/3_0_lists_1_tablet.png differ
diff --git a/test/visual/reference/3_0_lists_2_laptop.png b/test/visual/reference/3_0_lists_2_laptop.png
new file mode 100644
index 0000000..f986a2b
Binary files /dev/null and b/test/visual/reference/3_0_lists_2_laptop.png differ
diff --git a/test/visual/reference/3_0_lists_3_desktop.png b/test/visual/reference/3_0_lists_3_desktop.png
new file mode 100644
index 0000000..f986a2b
Binary files /dev/null and b/test/visual/reference/3_0_lists_3_desktop.png differ
diff --git a/test/visual/reference/4_0_forms_0_phone.png b/test/visual/reference/4_0_forms_0_phone.png
new file mode 100644
index 0000000..b3b943c
Binary files /dev/null and b/test/visual/reference/4_0_forms_0_phone.png differ
diff --git a/test/visual/reference/4_0_forms_1_tablet.png b/test/visual/reference/4_0_forms_1_tablet.png
new file mode 100644
index 0000000..6655f47
Binary files /dev/null and b/test/visual/reference/4_0_forms_1_tablet.png differ
diff --git a/test/visual/reference/4_0_forms_2_laptop.png b/test/visual/reference/4_0_forms_2_laptop.png
new file mode 100644
index 0000000..9a0f4ed
Binary files /dev/null and b/test/visual/reference/4_0_forms_2_laptop.png differ
diff --git a/test/visual/reference/4_0_forms_3_desktop.png b/test/visual/reference/4_0_forms_3_desktop.png
new file mode 100644
index 0000000..9a0f4ed
Binary files /dev/null and b/test/visual/reference/4_0_forms_3_desktop.png differ
diff --git a/test/visual/reference/5_0_tables_0_phone.png b/test/visual/reference/5_0_tables_0_phone.png
new file mode 100644
index 0000000..5d585da
Binary files /dev/null and b/test/visual/reference/5_0_tables_0_phone.png differ
diff --git a/test/visual/reference/5_0_tables_1_tablet.png b/test/visual/reference/5_0_tables_1_tablet.png
new file mode 100644
index 0000000..c1916a0
Binary files /dev/null and b/test/visual/reference/5_0_tables_1_tablet.png differ
diff --git a/test/visual/reference/5_0_tables_2_laptop.png b/test/visual/reference/5_0_tables_2_laptop.png
new file mode 100644
index 0000000..bf10688
Binary files /dev/null and b/test/visual/reference/5_0_tables_2_laptop.png differ
diff --git a/test/visual/reference/5_0_tables_3_desktop.png b/test/visual/reference/5_0_tables_3_desktop.png
new file mode 100644
index 0000000..bf10688
Binary files /dev/null and b/test/visual/reference/5_0_tables_3_desktop.png differ
diff --git a/test/visual/reference/6_0_grids_0_phone.png b/test/visual/reference/6_0_grids_0_phone.png
new file mode 100644
index 0000000..ae2804e
Binary files /dev/null and b/test/visual/reference/6_0_grids_0_phone.png differ
diff --git a/test/visual/reference/6_0_grids_1_tablet.png b/test/visual/reference/6_0_grids_1_tablet.png
new file mode 100644
index 0000000..27c1ece
Binary files /dev/null and b/test/visual/reference/6_0_grids_1_tablet.png differ
diff --git a/test/visual/reference/6_0_grids_2_laptop.png b/test/visual/reference/6_0_grids_2_laptop.png
new file mode 100644
index 0000000..edf6518
Binary files /dev/null and b/test/visual/reference/6_0_grids_2_laptop.png differ
diff --git a/test/visual/reference/6_0_grids_3_desktop.png b/test/visual/reference/6_0_grids_3_desktop.png
new file mode 100644
index 0000000..edf6518
Binary files /dev/null and b/test/visual/reference/6_0_grids_3_desktop.png differ
diff --git a/test/visual/reference/7_0_codes_0_phone.png b/test/visual/reference/7_0_codes_0_phone.png
new file mode 100644
index 0000000..932233b
Binary files /dev/null and b/test/visual/reference/7_0_codes_0_phone.png differ
diff --git a/test/visual/reference/7_0_codes_1_tablet.png b/test/visual/reference/7_0_codes_1_tablet.png
new file mode 100644
index 0000000..fd82b02
Binary files /dev/null and b/test/visual/reference/7_0_codes_1_tablet.png differ
diff --git a/test/visual/reference/7_0_codes_2_laptop.png b/test/visual/reference/7_0_codes_2_laptop.png
new file mode 100644
index 0000000..9626e1a
Binary files /dev/null and b/test/visual/reference/7_0_codes_2_laptop.png differ
diff --git a/test/visual/reference/7_0_codes_3_desktop.png b/test/visual/reference/7_0_codes_3_desktop.png
new file mode 100644
index 0000000..9626e1a
Binary files /dev/null and b/test/visual/reference/7_0_codes_3_desktop.png differ
diff --git a/test/visual/reference/8_0_utilities_0_phone.png b/test/visual/reference/8_0_utilities_0_phone.png
new file mode 100644
index 0000000..c40e3b1
Binary files /dev/null and b/test/visual/reference/8_0_utilities_0_phone.png differ
diff --git a/test/visual/reference/8_0_utilities_1_tablet.png b/test/visual/reference/8_0_utilities_1_tablet.png
new file mode 100644
index 0000000..82e388c
Binary files /dev/null and b/test/visual/reference/8_0_utilities_1_tablet.png differ
diff --git a/test/visual/reference/8_0_utilities_2_laptop.png b/test/visual/reference/8_0_utilities_2_laptop.png
new file mode 100644
index 0000000..59519b2
Binary files /dev/null and b/test/visual/reference/8_0_utilities_2_laptop.png differ
diff --git a/test/visual/reference/8_0_utilities_3_desktop.png b/test/visual/reference/8_0_utilities_3_desktop.png
new file mode 100644
index 0000000..59519b2
Binary files /dev/null and b/test/visual/reference/8_0_utilities_3_desktop.png differ
-
-
-
- .column
- .column
- .column
- .column
-
-
+ .column
- .column-50.column-offset-25
-
+
+ 100%
+
+
+ 10%
+ 90%
+
+
+ 20%
+ 80%
+
+
+ 25%
+ 75%
+
+
+ 33%
+ 67%
+
+
+ 40%
+ 60%
+
+
+ 50%
+ 50%
+
+
+ 60%
+ 40%
+
+
+ 67%
+ 33%
+
+
+ 75%
+ 25%
+
+
+ 80%
+ 20%
+
+
+ 90%
+ 10%
+
+
+ 100%
+
+
+ 90%
+ 10%
+
+
+ 80%
+ 20%
+
+
+ 75%
+ 25%
+
+
+ 67%
+ 33%
+
+
+ 60%
+ 40%
+
+
+ 50%
+ 50%
+
+
+ 40%
+ 60%
+
+
+ 33%
+ 67%
+
+
+ 25%
+ 75%
+
+
+ 20%
+ 80%
+
+
+ 10%
+ 90%
+
+
+ 100%
+
+
+ 50%
+ 50%
+
+
+ 33.3%
+ 33.3%
+ 33.3%
+
+
+ 25%
+ 25%
+ 25%
+ 25%
+
+
+ 20%
+ 20%
+ 20%
+ 20%
+ 20%
+
+
+ 16.6%
+ 16.6%
+ 16.6%
+ 16.6%
+ 16.6%
+ 16.6%
+
+
+ 14.28%
+ 14.28%
+ 14.28%
+ 14.28%
+ 14.28%
+ 14.28%
+ 14.28%
+
+
+ 12.5%
+ 12.5%
+ 12.5%
+ 12.5%
+ 12.5%
+ 12.5%
+ 12.5%
+ 12.5%
+
+
+ 11.11%
+ 11.11%
+ 11.11%
+ 11.11%
+ 11.11%
+ 11.11%
+ 11.11%
+ 11.11%
+ 11.11%
+
+
+ 10%
+ 10%
+ 10%
+ 10%
+ 10%
+ 10%
+ 10%
+ 10%
+ 10%
+ 10%
+
+
+ 9.09%
+ 9.09%
+ 9.09%
+ 9.09%
+ 9.09%
+ 9.09%
+ 9.09%
+ 9.09%
+ 9.09%
+ 9.09%
+ 9.09%
+
+
+ 8.3%
+ 8.3%
+ 8.3%
+ 8.3%
+ 8.3%
+ 8.3%
+ 8.3%
+ 8.3%
+ 8.3%
+ 8.3%
+ 8.3%
+ 8.3%
+
+
+ 50%
+
+
+ 50%
+
+
+ 25%
+
+
+ 25%
+
+
+ 25%
+
+
+ 25%
+ 25%
+
+
+ 25%
+ 25%
+
+
+ 25%
+ 50%
+
+
+ 50%
+ 25%
+
+
+ 25%
+ 25%
+
+
75%
See more examples of grids here.
.milligram {
color: #9b4dca;
-}
-See more examples of codes here.
Utilities
- 
+ 
-
- Float to left
-
-
+ Float to right
-See more examples of utilities here.