diff --git a/README.md b/README.md
index ab17632..48f021d 100644
--- a/README.md
+++ b/README.md
@@ -34,13 +34,10 @@ To install:
#### Using the Tools
Take a look in the `src/` folder. In here you will find a set of tools, starting
-with `__tool`, from which to pick and choose to use for your package. Note that
-the contents of each file are wrapped with the id selector `#XMETER {}` to keep
-it encapsulated. Think of `#XMETER` as one huge object whose properties are
-the mixins. Or think of it as a namespace. Whatever.
+with `__tool`, from which to pick and choose to use for your package.
If you want to use a particular tool in your stylesheet, you will have to
-`@import (reference)` that tool, and then invoke it with `#XMETER`. For example,
+`@import (reference)` the stylesheet for that tool. For example,
if you plan to use the `.font-size-block()` mixin in your Less, you must include
```less
@@ -51,39 +48,28 @@ at the top of your stylesheet. Then when you want to “call” the mixin, do
```less
.my-selector {
- #XMETER .font-size-block(2.0; 1.5);
+ .font-size-block(2.0; 1.5);
}
```
-To use the xmeter variables and constants,
+To use the xmeter variables, import the `__settings` stylesheet.
```less
@import (reference) url('/node_modules/xmeter/src/__settings.less');
.my-selector {
- #XMETER .VARS(); // invokes the set of variables
- line-height: 2 * @xmeter_line_height;
-}
-.my-other-selector {
- #XMETER .CONSTS(); // invokes the set of constants
- width: @1o2;
+ line-height: 2 * @g-line_height;
}
```
-The difference between **variables** and **constants** is that values are reflected in
-the names of constants but not variables. For example, `@xmeter_line_height` so happens to be 1.5.
-This value may change in the future (though it probably won’t), but the variable name need not change.
-This merely indicates the line height has been changed.
-On the other hand, `@1o2` is a constant whose value is 50%. It would be silly to change this value
-for obvious reasons.
-
#### Using the Base
Also in the `src/` folder are a set of files starting with `_base`. These files,
-unlike tools, provide actual styles for actual elements. Also unlike tools, **these
-stylesheets are *not* meant to be cherrypicked**. They are compiled separately∗ and
+unlike tools, provide actual styles for actual elements. Also unlike tools,
+**these stylesheets are *not* meant to be cherrypicked**. They are compiled
+separately∗ and
concatenated together in the main file `xmeter.css`. If you’re developing a
-stylesheet that you want built off of xmeter, include
+stylesheet that you want built off of Xmeter, include
```less
@import url('/node_modules/xmeter/xmeter.css');
@@ -91,23 +77,22 @@ stylesheet that you want built off of xmeter, include
at the top of your file.
-This package also comes installed with a [test page](./test.html)
+This package also comes installed with a test page (`doc/test.html`)
that links to the main stylesheet.
∗The reason the stylesheets are compiled separately is to increase
-encapsulation. They still have access to global variables (such as `#XMETER`),
-but now local variables and mixins can be defined within the file without
+encapsulation: private variables and mixins can be defined within the file without
affecting other files.
### Deployment
(The Second Option)
-This option is for you if you don’t wanna develop with **xmeter**, you just
+This option is for you if you don’t wanna develop with **Xmeter**, you just
wanna use it on your site. It’s a great starting point that “normalizes”
unclassed HTML elements before any specific classes and styles get added on.
-See the [test page](./test.html) for a preview.
+See the test page (`doc/test.html`) for a preview.
To install:
@@ -138,11 +123,11 @@ vertical rhythm system. (For more information on vertical rhythm, see these arti
[24ways](http://24ways.org/2006/compose-to-a-vertical-rhythm/) and
[Smashing Magazine](http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/#tt-rhythm).)
-Features of this stylesheet include the following. See the test page (`./test.html`)
+Features of this stylesheet include the following. See the test page (`doc/test.html`)
for a demo.
- Vertical rhythm — every line on the page is exactly the same height
- (dubbed a "vertical rhythm unit" or "vru") regardless of font size, and
+ (dubbed a “vertical rhythm unit” or “vru”) regardless of font size, and
typographical elements (headings, paragraphs, figures, blockquotes, lists,
tables, etc.) are separated by integer multiples of that height.
- Font-size for `html` is set to `100%` to accommodate for user agent settings.
@@ -156,9 +141,13 @@ for a demo.
(style *does* depend on location).
- Line-height for all inline (text-level) elements is 0. This allows the
vertical rhythm to remain unaffected.
-- Variables include commonly used numeric and color values.
-- `.sprite()` mixin makes it easy to work with background image sprites.
- Fallback tools for browser discrepancies on CSS3 properties.
+- Module tools add styles to blocks (font-size, borders) without disrupting vertical rhythm
+- A few other modules to make your life easier:
+ - `.sprite()` sets background image sprites
+ - `.clearfix()` does exactly what it sounds like
+ - `.delimiters()` sets quotes and other things
+ - `.translucent()` **may be removed in the future**
- Minor, albeit prettier, style changes to some text-level elements from the browser default.
## Changelog
diff --git a/doc/include/_main-content.jade b/doc/include/_main-content.jade
new file mode 100644
index 0000000..80856f3
--- /dev/null
+++ b/doc/include/_main-content.jade
@@ -0,0 +1,368 @@
+mixin main-content(args)
+ - var main_heading = args.main_heading || ''
+ - var classnames = args.classnames || {}
+ - var appendages = args.appendages || []
+ - var appending = {}
+ - for (el of appendages) { appending[el] = true }
+ block
+ header
+ h1= main_heading
+ nav#table-contents
+ h2 Table of Contents
+ ol
+ li: a(href="#table-contents") Table of Contents
+ li: a(href="#headings-paragraphs") Headings & Paragraphs
+ li: a(href="#lists") Lists
+ li: a(href="#tables") Tables
+ li
+ a(href="#text-level-elements") Text-Level Elements
+ ol
+ li: a(href="#links") Links
+ li: a(href="#stress") Stress
+ li: a(href="#documentation") Documentation
+ li: a(href="#data") Data
+ li: a(href="#embedded-elements") Embedded Elements
+ li: a(href="#forms") Forms
+ li: a(href="#interactive-elements") Interactive Elements
+ section#headings-paragraphs
+ h2 Headings & Paragraphs
+ figure(class=classnames.figure)
+ h1 Heading 1 #[code(class=classnames.code) h1]
+ p.
+ Paragraph #[code(class=classnames.code) p]
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Aliquam sagittis suscipit nunc, a cursus libero euismod at.
+ Nulla placerat neque massa, quis interdum leo efficitur vel.
+ Donec feugiat varius arcu non volutpat.
+ Mauris eget mauris ut mauris auctor mattis id vel justo.
+ Nulla dictum arcu nec suscipit mollis.
+ Maecenas a iaculis nisl, ut pretium est. Nulla facilisi.
+ h2 Heading 2 #[code(class=classnames.code) h2]
+ p.
+ Paragraph #[code(class=classnames.code) p]
+ Suspendisse ut auctor enim.
+ Aliquam viverra enim vitae ante aliquet venenatis.
+ Sed vel nibh sit amet sapien fermentum mattis nec non arcu.
+ Praesent dapibus velit quis lectus tempus, ut ullamcorper nibh facilisis.
+ Aenean tincidunt ante risus, semper malesuada libero consectetur id.
+ Praesent vel ligula ut enim porttitor porta. Aenean eu ullamcorper mi.
+ Integer blandit est quam, eget mattis urna scelerisque quis.
+ Maecenas sapien sapien, ornare nec lobortis eget, tincidunt sed ligula.
+ Maecenas risus nibh, volutpat sed euismod non, semper eget neque.
+ Integer varius egestas risus, volutpat sagittis turpis convallis eget.
+ Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet.
+ In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem.
+ Sed luctus congue tortor a scelerisque.
+ h3 Heading 3 #[code(class=classnames.code) h3]
+ p.
+ Paragraph #[code(class=classnames.code) p]
+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+ Nunc sit amet scelerisque lectus. Cras cursus sed dui quis convallis.
+ Quisque id justo elit.
+ Fusce ut quam non sem efficitur accumsan sed id neque.
+ Mauris finibus dignissim gravida.
+ In dignissim mauris ac odio molestie volutpat.
+ Nulla tellus justo, finibus sed volutpat sed, tristique ac lacus.
+ Suspendisse sit amet fermentum sapien.
+ Aliquam luctus laoreet iaculis.
+ Proin lacinia orci vitae tellus pellentesque porttitor.
+ h4 Heading 4 #[code(class=classnames.code) h4]
+ p.
+ Paragraph #[code(class=classnames.code) p]
+ Aenean consectetur suscipit urna, non vehicula lacus blandit et.
+ Integer at lacus et diam tristique suscipit.
+ Ut cursus massa sit amet nisl convallis, elementum accumsan sapien mattis.
+ Vestibulum vitae magna ac tellus accumsan pharetra vulputate vitae erat.
+ Vestibulum est dui, elementum non sagittis ac, sagittis accumsan justo.
+ Donec at vestibulum diam. Nam et volutpat dolor, at pulvinar nisi.
+ Curabitur aliquam maximus nulla eu venenatis.
+ Nam aliquam lorem non felis dignissim dictum.
+ Pellentesque sagittis vehicula nisl non luctus.
+ Pellentesque eget ligula hendrerit, blandit enim consequat, dictum sem.
+ In quis lectus in lectus interdum laoreet eu quis quam.
+ Fusce auctor posuere purus, quis semper libero dignissim euismod.
+ Curabitur commodo mauris a sapien vulputate, eget pharetra urna facilisis.
+ h5 Heading 5 #[code(class=classnames.code) h5]
+ p.
+ Paragraph #[code(class=classnames.code) p]
+ Donec finibus ut lectus finibus pellentesque.
+ Nulla euismod feugiat nulla nec posuere.
+ Sed ac est id sem sagittis rhoncus eu ac neque.
+ Aliquam eu metus sagittis, porta turpis id, scelerisque magna.
+ Nulla venenatis elementum est, semper viverra felis tristique sit amet.
+ Mauris nec ipsum id orci porttitor auctor sed sit amet sem.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Etiam tellus leo, venenatis sit amet ipsum non, sagittis feugiat ante.
+ h6 Heading 6 #[code(class=classnames.code) h6]
+ p.
+ Paragraph #[code(class=classnames.code) p]
+ Donec vel dolor ut felis dapibus ultricies vitae a nibh.
+ Ut semper odio est, sed lacinia ligula gravida ut.
+ Vestibulum facilisis viverra pulvinar.
+ Suspendisse maximus nisl sit amet augue vulputate, vel porta nunc molestie.
+ Aliquam mauris diam, pharetra vel consectetur quis, rhoncus in risus.
+ Donec ut quam massa.
+ Vestibulum sapien justo, commodo a eros in, rhoncus interdum nisl.
+ Etiam a porta lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ figure(class=classnames.figure)
+ h1 Lorem Ipsum #[code(class=classnames.code) h1]
+ h2 Lorem Ipsum #[code(class=classnames.code) h2]
+ h3 Lorem Ipsum #[code(class=classnames.code) h3]
+ h4 Lorem Ipsum #[code(class=classnames.code) h4]
+ h5 Lorem Ipsum #[code(class=classnames.code) h5]
+ h6 Lorem Ipsum #[code(class=classnames.code) h6]
+ figure(class=classnames.figure)
+ address.
+ 12345 #[code(class=classnames.code) address] Ave #[code(class=classnames.code) br]#[br]
+ Washington, DC 00000 #[code(class=classnames.code) br]#[br]
+ United States of America
+ figure(class=classnames.figure)
+ pre.
+ Pellentesque #[code(class=classnames.code) pre] habitant() {
+ morbi.tristique = senectus;
+ et (netus = malesuada; fames < ac; turpis.egestas++) {
+ Nunc.sit += [amet, scelerisque][et];
+ Cras = {
+ lectus: cursus
+ , sed: dui
+ , quis: convallis(id () { justo Quisque.elit; })
+ };
+ }
+ }
+ figure(class=classnames.figure)
+ figure
+ | Aenean consectetur #[code(class=classnames.code) figure] suscipit urna, non vehicula lacus blandit et.
+ figcaption Integer at lacus et diam tristique #[code(class=classnames.code) figure] #[code(class=classnames.code) figcaption] suscipit.
+ figure(class=classnames.figure)
+ blockquote Donec #[code(class=classnames.code) blockquote] vel dolor ut felis dapibus ultricies vitae a nibh.
+ // figure(class=classnames.figure)
+ figcaption.
+ A horizontal rule #[code(class=classnames.code) hr] is shown below. I’m honestly not sure when
+ you would ever use this instead of a CSS border.
+ hr
+ if appending['headings-paragraphs']
+ +headings-paragraphs()
+ section#lists
+ h2 Lists
+ figure(class=classnames.figure)
+ figcaption Ordered List #[code(class=classnames.code) ol]
+ ol
+ li List item #[code(class=classnames.code) li]
+ li List item #[code(class=classnames.code) li]
+ ol
+ li Nested list item
+ li Nested list item
+ ol
+ li Another nested list item
+ li Another nested list item
+ figure(class=classnames.figure)
+ figcaption Unrdered List #[code(class=classnames.code) ul]
+ ul
+ li List item #[code(class=classnames.code) li]
+ li List item #[code(class=classnames.code) li]
+ ul
+ li Nested list item
+ li Nested list item
+ ul
+ li Another nested list item
+ li Another nested list item
+ figure(class=classnames.figure)
+ figcaption Dictionary List #[code(class=classnames.code) dl]
+ dl
+ dt key #[code(class=classnames.code) dt]
+ dd value #[code(class=classnames.code) dd]
+ dt
+ ul
+ li 1st key
+ li 2nd key
+ dd value
+ dt key
+ dd
+ ul
+ li 1st value
+ li 2nd value
+ if appending['lists']
+ +lists()
+ section#tables
+ h2 Tables
+ figure(class=classnames.figure)
+ table
+ caption #[code(class=classnames.code) table] #[code(class=classnames.code) caption]
+ thead
+ mixin tableheaderrows(rows, cols)
+ - for (var i = 0; i < rows; i++)
+ tr
+ - for (var j = 0; j < cols; j++)
+ th(scope="col") #[code(class=classnames.code) thead]er #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) th]eading #{j+1}
+ +tableheaderrows(1,3)
+ tfoot
+ mixin tablefooterrows(rows, cols)
+ - for (var i = 0; i < rows; i++)
+ tr
+ - for (var j = 0; j < cols; j++)
+ td #[code(class=classnames.code) tfoot]er #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) td]ata #{j+1}
+ +tablefooterrows(2,3)
+ tbody
+ mixin tablebodyrows(rows, cols)
+ - for (var i = 0; i < rows; i++)
+ tr
+ - for (var j = 0; j < cols; j++)
+ td #[code(class=classnames.code) tbody] #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) td]ata #{j+1}
+ +tablebodyrows(3,3)
+ if appending['tables']
+ +tables()
+ section#text-level-elements
+ h2 Text-Level Elements
+ section#links
+ h3 Links
+ figure(class=classnames.figure): ul
+ li: a a
+ li: a(href) a[href]
+ if appending['links__list']
+ +links__list()
+ section#stress
+ h3 Stress
+ figure(class=classnames.figure): ul
+ li: em emphasized text #[code(class=classnames.code) em]
+ li: strong important text #[code(class=classnames.code) strong]
+ li: i alternate voice/mood (scare quotes, mentioning words, foreign expressions) #[code(class=classnames.code) i]
+ li: mark relevant in some context #[code(class=classnames.code) mark]
+ li: u unarticulated annotation #[code(class=classnames.code) u]
+ li: small side comment #[code(class=classnames.code) small]
+ li: s text shown to be no longer relevant #[code(class=classnames.code) s]
+ if appending['stress__list']
+ +stress__list()
+ section#documentation
+ h3 Documentation
+ figure(class=classnames.figure): ul
+ li: ins content shown to be inserted into a document #[code(class=classnames.code) ins]
+ li: del content shown to be deleted from a document #[code(class=classnames.code) del]
+ li: dfn definining instance of a term #[code(class=classnames.code) dfn]
+ li: b keyword or technical term #[code(class=classnames.code) b]
+ li: abbr(title) abbreviation or acronym #[code(class=classnames.code) abbr[title]]
+ li: var variable #[code(class=classnames.code) var]
+ li: q quoted material #[code(class=classnames.code) q]
+ li: cite reference to a work, some part of a work, or the creator of a work #[code(class=classnames.code) cite]
+ li: sup superscript #[code(class=classnames.code) sup]
+ li: sub subscript #[code(class=classnames.code) sub]
+ if appending['documentation__list']
+ +documentation__list()
+ section#data
+ h3 Data
+ figure(class=classnames.figure): ul
+ li: time(datetime="Z") a specific date or time #[code(class=classnames.code) time]
+ li: data(value) generic machine-readable data #[code(class=classnames.code) data]
+ li: code a fragment of code #[code(class=classnames.code) code]
+ li: kbd user input #[code(class=classnames.code) kbd]
+ li: kbd: kbd a button or key on a physical device #[code(class=classnames.code) kbd > kbd]
+ li: samp sample computer output #[code(class=classnames.code) samp]
+ if appending['data__list']
+ +data__list()
+ if appending['text-level-elements']
+ +text-level-elements()
+ section#embedded-elements
+ h2 Embedded Elements
+ if appending['embedded-elements']
+ +embedded-elements()
+ section#forms
+ h2 Forms
+ form
+ figure(class=classnames.figure)
+ fieldset
+ legend Integer at lacus et diam tristique #[code(class=classnames.code) fieldset legend] suscipit.
+ | Aenean consectetur #[code(class=classnames.code) fieldset] suscipit urna, non vehicula lacus blandit et.
+ figure(class=classnames.figure)
+ fieldset
+ legend single line text inputs
+ input(type="text" placeholder="input type text")
+ input(type="email" placeholder="input type email")
+ input(type="password" placeholder="input type password")
+ input(type="search" placeholder="input type search")
+ input(type="tel" placeholder="input type tel")
+ input(type="url" placeholder="input type url")
+ figure(class=classnames.figure)
+ fieldset
+ legend date/time
+ input(type="datetime")
+ input(type="datetime-local")
+ input(type="date")
+ input(type="time")
+ input(type="week")
+ input(type="month")
+ figure(class=classnames.figure)
+ fieldset
+ legend without text input
+ input(type="color")
+ input(type="file")
+ input(type="hidden")
+ input(type="number" placeholder="input type number")
+ input(type="range")
+ figure(class=classnames.figure)
+ fieldset
+ legend check boxes
+ input(type="checkbox")
+ label select
+ label
+ input(type="checkbox")
+ | all
+ input(type="checkbox")
+ label applicable
+ figure(class=classnames.figure)
+ fieldset
+ legend radio buttons
+ input(type="radio" name="radiogroup1")
+ label select
+ label
+ input(type="radio" name="radiogroup1")
+ | only
+ input(type="radio" name="radiogroup1")
+ label one
+ figure(class=classnames.figure)
+ fieldset
+ legend drop-down list (select only one)
+ select
+ option option 1
+ optgroup(label="label for option 2")
+ option option 2a
+ option option 2b
+ option option 2c
+ option option 3
+ input(list="b" placeholder="select it or type it")
+ datalist#b
+ option option 1
+ //- optgroup not a valid child of datalist
+ option option 2
+ option option 3
+ figure(class=classnames.figure)
+ fieldset
+ legend drop-down list (select multiple)
+ select(multiple="")
+ option option 1
+ optgroup(label="label for option 2")
+ option option 2a
+ option option 2b
+ option option 2c
+ option option 3
+ figure(class=classnames.figure)
+ fieldset
+ legend buttons
+ input(type="button" value="button")
+ input(type="reset")
+ input(type="submit")
+ button(type="button") button
+ button(type="reset") reset
+ button(type="submit") submit
+ figure(class=classnames.figure)
+ fieldset
+ legend textarea
+ textarea
+ if appending['forms']
+ +forms()
+ section#interactive-elements
+ h2 Interactive Elements
+ figure(class=classnames.figure)
+ details
+ summary Integer at lacus et diam tristique #[code(class=classnames.code) details summary] suscipit.
+ | Aenean consectetur #[code(class=classnames.code) details] suscipit urna, non vehicula lacus blandit et.
+ if appending['interactive-elements']
+ +interactive-elements()
diff --git a/doc/styles/doc.less b/doc/styles/doc.less
new file mode 100644
index 0000000..2f11679
--- /dev/null
+++ b/doc/styles/doc.less
@@ -0,0 +1,39 @@
+@import (reference) url('../../src/__settings.less');
+@import (reference) url('../../src/__tool.module.borders.less');
+
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
+ xmeter
+\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+
+
+/*================================*\
+ doc.less
+\*================================*/
+
+
+// Stylesheet for Xmeter documentation files.
+
+
+body {
+ background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg');
+ background-size: 1px 24px;
+ background-repeat: repeat;
+ background-position: left bottom;
+}
+.x-c-Code {
+ padding: 1px 2px;
+ border-radius: 3px;
+ background-color: #f4f8f0;
+ color: #008080;
+}
+.x-c-Fig {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ padding: (0.5*@g-vru) 0.5rem;
+ .border-vert(all; 1px);
+ border-style: solid;
+ border-color: #e5eaef;
+ border-radius: 8px;
+ position: relative;
+ background: rgba(245, 250, 255, 0.5);
+}
diff --git a/doc/test.jade b/doc/test.jade
new file mode 100644
index 0000000..38578e4
--- /dev/null
+++ b/doc/test.jade
@@ -0,0 +1,23 @@
+doctype html
+html(lang="en")
+ - var project_name = 'Xmeter'
+ - var page_title = 'Base Typography'
+ head
+ title #{page_title} | #{project_name}
+ meta(charset="utf-8")
+ meta(name="description" content="A test of bare, unclassed elements.")
+ meta(name="viewport" content="width=device-width, initial-scale=1")
+ link(rel="stylesheet" href="../xmeter.min.css")
+ link(rel="stylesheet" href="styles/doc.css")
+ body
+ main
+ include include/_main-content.jade
+ +main-content({
+ main_heading: project_name + ' — ' + page_title
+ , classnames: {
+ figure: 'x-c-Fig'
+ , code : 'x-c-Code'
+ }
+ })
+ script.
+ document.querySelectorAll('#forms > form')[0].style.backgroundColor = '#fff'
diff --git a/package.json b/package.json
index ebf0980..766014c 100644
--- a/package.json
+++ b/package.json
@@ -1,24 +1,25 @@
{
"name": "xmeter",
- "version": "3.6.0",
+ "version": "4.0.0",
"description": "A default stylesheet with a set of tools that make designing with vertical rhythm easy.",
"main": "xmeter.css",
- "dependencies": {
- "normalize.css": "~3.0.3",
- "resetcss": "^1.0.2"
- },
+ "dependencies": {},
"devDependencies": {
"clean-css": "^3.4.5",
"jade": "^1.11.0",
"less": "^2.5.3",
- "lessc-each": "^1.1.0"
+ "lessc-each": "^1.1.0",
+ "normalize.css": "^3.0.3",
+ "resetcss": "^1.0.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
- "lessc": "lessc-each src/ build/ ; lessc xmeter.less xmeter.css",
+ "jade:all": "jade doc/test.jade",
+ "lessc:doc": "lessc doc/styles/doc.less doc/styles/doc.css",
+ "lessc:xmeter": "lessc-each src/ build/ ; lessc xmeter.less xmeter.css",
+ "lessc:all": "npm run lessc:doc ; npm run lessc:xmeter",
"minify": "cleancss xmeter.css -o xmeter.min.css",
- "jade:all": "jade -P {test,test-forms}.jade",
- "build": "npm run lessc ; npm run minify ; npm run jade:all"
+ "build": "npm run jade:all ; npm run lessc:all ; npm run minify"
},
"repository": {
"type": "git",
@@ -38,5 +39,5 @@
"bugs": {
"url": "https://github.com/chharvey/xmeter/issues"
},
- "homepage": "https://chharvey.github.io/xmeter/"
+ "homepage": "https://github.com/chharvey/xmeter/blob/gh-pages/README.md"
}
diff --git a/src/__settings.less b/src/__settings.less
index a076923..2d19c51 100644
--- a/src/__settings.less
+++ b/src/__settings.less
@@ -4,112 +4,26 @@
\*################################*/
-#XMETER {
- .VARS() {
- // vertical rhythm
- @1rem: 16px; // a shortcut variable used for fallbacks where rems aren’t supported
- // where are rems not supported?
- // - IE8 and below, and
- // - IE9 and IE10 on the `font` shorthand property and on pseudo-elements/classes
+// NOTE: the prefix `g-` on each variable stands for "global" because these variables
+// are globally (project-wide) accessible.
+// In each partial file, if need a private variable, use prefix `p-` for "private".
+// Parameters in mixins shall not use any prefixes.
- @xmeter_font_size: 100%; // defined by user agent
- @xmeter_font_size: @1rem; // fixes Chrome inheritance bug
- @xmeter_line_height: 1.5;
- @xmeter_vru_px: (@xmeter_line_height * @1rem); // fallback for @xmeter_vru, which is in rems
- @xmeter_vru: (@xmeter_line_height * 1rem);
+// vertical rhythm
+@g-1rem: 16px; // a shortcut variable used for fallbacks where rems aren’t supported
+// where are rems not supported?
+// - IE8 and below, and
+// - IE9 and IE10 on the `font` shorthand property and on pseudo-elements/classes
- @xmeter_font_size_h1: 32/16; // 2.000
- @xmeter_font_size_h2: 24/16; // 1.500
- @xmeter_font_size_h3: 20/16; // 1.250
- @xmeter_font_size_h4: 16/16; // 1.000
- @xmeter_font_size_h5: 14/16; // 0.875
- @xmeter_font_size_h6: 12/16; // 0.750
+@g-font_size: 100%; // defined by user agent
+@g-font_size: @g-1rem; // HACK fixes Chrome inheritance bug
+@g-line_height: 1.5;
+@g-vru_px: (@g-line_height * @g-1rem); // fallback for @g-vru, which is in rems
+@g-vru: (@g-line_height * 1rem);
- // TODO: remove these on next major release
- @h1_font_size: @xmeter_font_size_h1;
- @h2_font_size: @xmeter_font_size_h2;
- @h3_font_size: @xmeter_font_size_h3;
- @h4_font_size: @xmeter_font_size_h4;
- @h5_font_size: @xmeter_font_size_h5;
- @h6_font_size: @xmeter_font_size_h6;
- }
- .CONSTS() {
- // fractional percentages used for anything, usually widths
- // TODO remove all of these variables on next major release,
- // unless there is any reason to keep them.
- @1o1: (100% * (1/1)); @1o9: (100% * (1/9));
- @2o9: (100% * (2/9));
- @1o2: (100% * (1/2)); @3o9: (100% * (3/9));
- @2o2: (100% * (2/2)); @4o9: (100% * (4/9));
- @5o9: (100% * (5/9));
- @1o3: (100% * (1/3)); @6o9: (100% * (6/9));
- @2o3: (100% * (2/3)); @7o9: (100% * (7/9));
- @3o3: (100% * (3/3)); @8o9: (100% * (8/9));
- @9o9: (100% * (9/9));
- @1o4: (100% * (1/4));
- @2o4: (100% * (2/4)); @1o10: (100% * ( 1/10));
- @3o4: (100% * (3/4)); @2o10: (100% * ( 2/10));
- @4o4: (100% * (4/4)); @3o10: (100% * ( 3/10));
- @4o10: (100% * ( 4/10));
- @1o5: (100% * (1/5)); @5o10: (100% * ( 5/10));
- @2o5: (100% * (2/5)); @6o10: (100% * ( 6/10));
- @3o5: (100% * (3/5)); @7o10: (100% * ( 7/10));
- @4o5: (100% * (4/5)); @8o10: (100% * ( 8/10));
- @5o5: (100% * (5/5)); @9o10: (100% * ( 9/10));
- @10o10: (100% * (10/10));
- @1o6: (100% * (1/6));
- @2o6: (100% * (2/6)); @1o12: (100% * ( 1/12));
- @3o6: (100% * (3/6)); @2o12: (100% * ( 2/12));
- @4o6: (100% * (4/6)); @3o12: (100% * ( 3/12));
- @5o6: (100% * (5/6)); @4o12: (100% * ( 4/12));
- @6o6: (100% * (6/6)); @5o12: (100% * ( 5/12));
- @6o12: (100% * ( 6/12));
- @1o8: (100% * (1/8)); @7o12: (100% * ( 7/12));
- @2o8: (100% * (2/8)); @8o12: (100% * ( 8/12));
- @3o8: (100% * (3/8)); @9o12: (100% * ( 9/12));
- @4o8: (100% * (4/8)); @10o12: (100% * (10/12));
- @5o8: (100% * (5/8)); @11o12: (100% * (11/12));
- @6o8: (100% * (6/8)); @12o12: (100% * (12/12));
- @7o8: (100% * (7/8));
- @8o8: (100% * (8/8));
-
- // ---- Solarized Colors ----
- // Solarized Bases
- @solar_base03: #002b36;
- @solar_base02: #073642;
- @solar_base01: #586e75;
- @solar_base00: #657b83;
- @solar_base0: #839496;
- @solar_base1: #93a1a1;
- @solar_base2: #eee8d5;
- @solar_base3: #fdf6e3;
- // Solarized Accents
- @solar_red: #dc322f;
- @solar_orange: #cb4b16;
- @solar_yellow: #b58900;
- @solar_green: #859900;
- @solar_cyan: #2aa198;
- @solar_blue: #268bd2;
- @solar_violet: #6c71c4;
- @solar_magenta: #d33682;
- // ---- Lunarized Colors ----
- // Lunarized Bases -- Inverses of Solarized Bases
- @lunar_base03: spin(@solar_base03, 180); // #360b00
- @lunar_base02: spin(@solar_base02, 180); // #421307
- @lunar_base01: spin(@solar_base01, 180); // #755f58
- @lunar_base00: spin(@solar_base00, 180); // #836d65
- @lunar_base0: spin(@solar_base0, 180); // #968583
- @lunar_base1: spin(@solar_base1, 180); // #a19393
- @lunar_base2: spin(@solar_base2, 180); // #d5dbee
- @lunar_base3: spin(@solar_base3, 180); // #e3eafd
- // Lunarized Accents -- Complements of Solarized Accents
- @lunar_cyan: rgb(255-red(@solar_red ), 255-green(@solar_red ), 255-blue(@solar_red )); // #23cdd0
- @lunar_blue: rgb(255-red(@solar_orange ), 255-green(@solar_orange ), 255-blue(@solar_orange )); // #34b4e9
- @lunar_indigo: rgb(255-red(@solar_yellow ), 255-green(@solar_yellow ), 255-blue(@solar_yellow )); // #4a76ff
- @lunar_violet: rgb(255-red(@solar_green ), 255-green(@solar_green ), 255-blue(@solar_green )); // #7a66ff
- @lunar_red: rgb(255-red(@solar_cyan ), 255-green(@solar_cyan ), 255-blue(@solar_cyan )); // #d55e67
- @lunar_orange: rgb(255-red(@solar_blue ), 255-green(@solar_blue ), 255-blue(@solar_blue )); // #d9742d
- @lunar_yellow: rgb(255-red(@solar_violet ), 255-green(@solar_violet ), 255-blue(@solar_violet )); // #938e3b
- @lunar_green: rgb(255-red(@solar_magenta), 255-green(@solar_magenta), 255-blue(@solar_magenta)); // #2cc97d
- }
-}
+@g-font_size_h1: 32/16; // 2.000
+@g-font_size_h2: 24/16; // 1.500
+@g-font_size_h3: 20/16; // 1.250
+@g-font_size_h4: 16/16; // 1.000
+@g-font_size_h5: 14/16; // 0.875
+@g-font_size_h6: 12/16; // 0.750
diff --git a/src/__tool.fallback.box-sizing.less b/src/__tool.fallback.box-sizing.less
index 918f248..28907ea 100644
--- a/src/__tool.fallback.box-sizing.less
+++ b/src/__tool.fallback.box-sizing.less
@@ -4,20 +4,18 @@
\*################################*/
-#XMETER {
- // Alters the CSS box model used to calculate width and height.
- // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) for more info.
- //
- // @box - the way the box is sized
- // - content-box - (default) `width` and `height` properties measured include only the content
- // - border-box - `width` and `height` properties measured include padding and border as well as content
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2014-10-21
- .box-sizing(@box) {
- -webkit-box-sizing: @box;
- -moz-box-sizing: @box;
- box-sizing: @box;
- }
+// Alters the CSS box model used to calculate width and height.
+// See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) for more info.
+//
+// @box - the way the box is sized
+// - content-box - (default) `width` and `height` properties measured include only the content
+// - border-box - `width` and `height` properties measured include padding and border as well as content
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2014-10-21
+.box-sizing(@box) {
+ -webkit-box-sizing: @box;
+ -moz-box-sizing: @box;
+ box-sizing: @box;
}
diff --git a/src/__tool.fallback.column-count.less b/src/__tool.fallback.column-count.less
index ace9325..06793a9 100644
--- a/src/__tool.fallback.column-count.less
+++ b/src/__tool.fallback.column-count.less
@@ -4,19 +4,17 @@
\*################################*/
-#XMETER {
- // Sets the number of columns of text.
- // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count) for more info.
- //
- // @n - a positive integer indicating the number of columns, or
- // - auto (initial) - indicates the number of columns should be determined by the `column-width` property
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-10-23
- .column-count(@n) {
- -webkit-column-count: @n;
- -moz-column-count: @n;
- column-count: @n;
- }
+// Sets the number of columns of text.
+// See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count) for more info.
+//
+// @n - a positive integer indicating the number of columns, or
+// - auto (initial) - indicates the number of columns should be determined by the `column-width` property
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-10-23
+.column-count(@n) {
+ -webkit-column-count: @n;
+ -moz-column-count: @n;
+ column-count: @n;
}
diff --git a/src/__tool.fallback.column-width.less b/src/__tool.fallback.column-width.less
index 5322a25..3aa1f23 100644
--- a/src/__tool.fallback.column-width.less
+++ b/src/__tool.fallback.column-width.less
@@ -4,19 +4,17 @@
\*################################*/
-#XMETER {
- // Sets the width of columns of text.
- // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width) for more info.
- //
- // @n - a positive integer indicating the number of columns, or
- // - auto (initial) - indicates the width of columns should be determined by the `column-count` property
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2016-02-08
- .column-width(@n) {
- -webkit-column-width: @n;
- -moz-column-width: @n;
- column-width: @n;
- }
+// Sets the width of columns of text.
+// See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width) for more info.
+//
+// @n - a positive integer indicating the number of columns, or
+// - auto (initial) - indicates the width of columns should be determined by the `column-count` property
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2016-02-08
+.column-width(@n) {
+ -webkit-column-width: @n;
+ -moz-column-width: @n;
+ column-width: @n;
}
diff --git a/src/__tool.fallback.flexbox.less b/src/__tool.fallback.flexbox.less
index b4a8c35..4a47e13 100644
--- a/src/__tool.fallback.flexbox.less
+++ b/src/__tool.fallback.flexbox.less
@@ -10,187 +10,185 @@
///////////////////////////////////////////////////////////////////////////////
-#XMETER {
- // Table of Contents
- // - CONTAINERS
- // - ITEMS
-
-
- /*++++++++++++++++++++++++++++++++*\
- #CONTAINERS
- \*++++++++++++++++++++++++++++++++*/
- // Sets up a flexbox container.
- //
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-09-03
- .flexbox() {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- }
-
- // Determines the direction of the flow.
- //
- // @direction - The direction of flow.
- // - `row` (default) - left to right in `ltr`; right to left in `rtl`
- // - `column` - same as `row` but top to bottom
- // - `row-reverse` - right to left in `ltr`; left to right in `rtl`
- // - `column-reverse` - same as `row-reverse` but bottom to top
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-02-12
- .flex-direction(@direction) {
- -webkit-flex-direction: @direction;
- -moz-flex-direction: @direction;
- -ms-flex-direction: @direction;
- flex-direction: @direction;
- }
-
- // Determines whether boxes wrap to the next row or column.
- //
- // @wrap - how blocks will wrap
- // - `nowrap` (default) - single-line / left to right in `ltr`; right to left in `rtl`
- // - `wrap` - multi-line / left to right in `ltr`; right to left in `rtl`
- // - `wrap-reverse` - multi-line / right to left in `ltr`; left to right in `rtl`
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-02-12
- .flex-wrap(@wrap) {
- -webkit-flex-wrap: @wrap;
- -moz-flex-wrap: @wrap; // no support for Firefox 27 and older (28+ uses `flex-wrap`)
- -ms-flex-wrap: @wrap;
- flex-wrap: @wrap;
- }
-
- // Determines how content is justified along the main axis.
- //
- // @justify - how content is justified
- // - `flex-start` (default) - items are aligned left (in rows) or top (in columns)
- // - `flex-end` - items are aligned right (in rows) or bottom (in columns)
- // - `center` - items are pushed to middle
- // - `space-between` - extra space is distributed between items,
- // leaving them flush left/right
- // - `space-around` - extra space is distributed around items,
- // leaving margin on left/right.
- // Good for centering one item without using
- // `margin-left: auto; margin-right: auto;`!!!
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-10-12
- .flex-justify-content(@justify) {
- -webkit-justify-content: @justify;
- -moz-justify-content: @justify;
- -ms-justify-content: @justify;
- justify-content: @justify;
- }
-
- // Aligns a flex container’s lines when there is empty space in the cross-axis.
- // (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`)
- //
- // @align - how content is aligned
- // - `stretch` (default) - lines stretch to take up the remaining space
- // - `flex-start` - lines packed to the start of the container
- // - `flex-end` - lines packed to the end of the container
- // - `center` - lines packed to the center of the container
- // - `space-between` - extra space is distributed between lines,
- // leaving them flush top/bottom
- // - `space-around` - extra space is distributed around lines,
- // leaving margin on top/bottom.
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-09-03
- .flex-align-content(@align) {
- -webkit-align-content: @align;
- -moz-align-content: @align;
- -ms-align-content: @align;
- align-content: @align;
- }
-
- // Defines default behavior for aligining flex items along cross axis
- // (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`)
- //
- // @align - how items are aligned
- // - `stretch` (default) - stretch to fill the container
- // (still respect min-width/max-width)
- // - `flex-start` - cross-start margin edge of the items is placed on the cross-start line
- // - `flex-end` - cross-end margin edge of the items is placed on the cross-end line
- // - `center` - items are centered in the cross-axis
- // - `baseline` - items are aligned such as their baselines align
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-09-03
- .flex-align-items(@align) {
- -webkit-align-items: @align;
- -moz-align-items: @align;
- -ms-align-items: @align;
- align-items: @align;
- }
- //++++ #end CONTAINERS ++++//
-
-
- /*++++++++++++++++++++++++++++++++*\
- #ITEMS
- \*++++++++++++++++++++++++++++++++*/
- // Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis` properties (in that order).
- //
- // @values - none | [ ‹number:0› ‹number:1›? || ‹length:auto› ]
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-09-03
- .flex(@values) {
- -webkit-box-flex: @values;
- -moz-box-flex: @values;
- -webkit-flex: @values;
- -moz-flex: @values;
- -ms-flex: @values;
- flex: @values;
- }
-
- // Determines the order in which items appear in the flex container.
- //
- // @integer - ‹integer:0› the order in which the item appears in the flex container
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-09-03
- .flex-order(@integer) {
- -webkit-box-ordinal-group: @integer;
- -moz-box-ordinal-group: @integer;
- -ms-flex-order: @integer;
- -webkit-order: @integer;
- order: @integer;
- }
-
- // Overrides behavior of `align-items` for aligining one specific flex item along cross axis
- // (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`)
- //
- // @align - how the item is aligned
- // - `auto` (default) - value of parent’s `align-items` property
- // - `stretch` - stretch to fill the container
- // (still respect min-width/max-width)
- // - `flex-start` - cross-start margin edge of the items is placed on the cross-start line
- // - `flex-end` - cross-end margin edge of the items is placed on the cross-end line
- // - `center` - items are centered in the cross-axis
- // - `baseline` - items are aligned such as their baselines align
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-10-14
- .flex-align-self(@align) {
- -webkit-align-self: @align;
- -moz-align-self: @align;
- -ms-align-self: @align;
- align-self: @align;
- }
- //++++ #end ITEMS ++++//
+// Table of Contents
+// - CONTAINERS
+// - ITEMS
+
+
+//++++++++++++++++++++++++++++++++//
+// # CONTAINERS
+//++++++++++++++++++++++++++++++++//
+// Sets up a flexbox container.
+//
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-09-03
+.flexbox() {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
}
+
+// Determines the direction of the flow.
+//
+// @direction - The direction of flow.
+// - `row` (default) - left to right in `ltr`; right to left in `rtl`
+// - `column` - same as `row` but top to bottom
+// - `row-reverse` - right to left in `ltr`; left to right in `rtl`
+// - `column-reverse` - same as `row-reverse` but bottom to top
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-02-12
+.flex-direction(@direction) {
+ -webkit-flex-direction: @direction;
+ -moz-flex-direction: @direction;
+ -ms-flex-direction: @direction;
+ flex-direction: @direction;
+}
+
+// Determines whether boxes wrap to the next row or column.
+//
+// @wrap - how blocks will wrap
+// - `nowrap` (default) - single-line / left to right in `ltr`; right to left in `rtl`
+// - `wrap` - multi-line / left to right in `ltr`; right to left in `rtl`
+// - `wrap-reverse` - multi-line / right to left in `ltr`; left to right in `rtl`
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-02-12
+.flex-wrap(@wrap) {
+ -webkit-flex-wrap: @wrap;
+ -moz-flex-wrap: @wrap; // no support for Firefox 27 and older (28+ uses `flex-wrap`)
+ -ms-flex-wrap: @wrap;
+ flex-wrap: @wrap;
+}
+
+// Determines how content is justified along the main axis.
+//
+// @justify - how content is justified
+// - `flex-start` (default) - items are aligned left (in rows) or top (in columns)
+// - `flex-end` - items are aligned right (in rows) or bottom (in columns)
+// - `center` - items are pushed to middle
+// - `space-between` - extra space is distributed between items,
+// leaving them flush left/right
+// - `space-around` - extra space is distributed around items,
+// leaving margin on left/right.
+// Good for centering one item without using
+// `margin-left: auto; margin-right: auto;`!!!
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-10-12
+.flex-justify-content(@justify) {
+ -webkit-justify-content: @justify;
+ -moz-justify-content: @justify;
+ -ms-justify-content: @justify;
+ justify-content: @justify;
+}
+
+// Aligns a flex container’s lines when there is empty space in the cross-axis.
+// (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`)
+//
+// @align - how content is aligned
+// - `stretch` (default) - lines stretch to take up the remaining space
+// - `flex-start` - lines packed to the start of the container
+// - `flex-end` - lines packed to the end of the container
+// - `center` - lines packed to the center of the container
+// - `space-between` - extra space is distributed between lines,
+// leaving them flush top/bottom
+// - `space-around` - extra space is distributed around lines,
+// leaving margin on top/bottom.
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-09-03
+.flex-align-content(@align) {
+ -webkit-align-content: @align;
+ -moz-align-content: @align;
+ -ms-align-content: @align;
+ align-content: @align;
+}
+
+// Defines default behavior for aligining flex items along cross axis
+// (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`)
+//
+// @align - how items are aligned
+// - `stretch` (default) - stretch to fill the container
+// (still respect min-width/max-width)
+// - `flex-start` - cross-start margin edge of the items is placed on the cross-start line
+// - `flex-end` - cross-end margin edge of the items is placed on the cross-end line
+// - `center` - items are centered in the cross-axis
+// - `baseline` - items are aligned such as their baselines align
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-09-03
+.flex-align-items(@align) {
+ -webkit-align-items: @align;
+ -moz-align-items: @align;
+ -ms-align-items: @align;
+ align-items: @align;
+}
+//++++ end # CONTAINERS ++++//
+
+
+//++++++++++++++++++++++++++++++++//
+// # ITEMS
+//++++++++++++++++++++++++++++++++//
+// Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis` properties (in that order).
+//
+// @values - none | [ ‹number:0› ‹number:1›? || ‹length:auto› ]
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-09-03
+.flex(@values) {
+ -webkit-box-flex: @values;
+ -moz-box-flex: @values;
+ -webkit-flex: @values;
+ -moz-flex: @values;
+ -ms-flex: @values;
+ flex: @values;
+}
+
+// Determines the order in which items appear in the flex container.
+//
+// @integer - ‹integer:0› the order in which the item appears in the flex container
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-09-03
+.flex-order(@integer) {
+ -webkit-box-ordinal-group: @integer;
+ -moz-box-ordinal-group: @integer;
+ -ms-flex-order: @integer;
+ -webkit-order: @integer;
+ order: @integer;
+}
+
+// Overrides behavior of `align-items` for aligining one specific flex item along cross axis
+// (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`)
+//
+// @align - how the item is aligned
+// - `auto` (default) - value of parent’s `align-items` property
+// - `stretch` - stretch to fill the container
+// (still respect min-width/max-width)
+// - `flex-start` - cross-start margin edge of the items is placed on the cross-start line
+// - `flex-end` - cross-end margin edge of the items is placed on the cross-end line
+// - `center` - items are centered in the cross-axis
+// - `baseline` - items are aligned such as their baselines align
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-10-14
+.flex-align-self(@align) {
+ -webkit-align-self: @align;
+ -moz-align-self: @align;
+ -ms-align-self: @align;
+ align-self: @align;
+}
+//++++ end # ITEMS ++++//
diff --git a/src/__tool.fallback.gradient.less b/src/__tool.fallback.gradient.less
index 7efde03..1c76605 100644
--- a/src/__tool.fallback.gradient.less
+++ b/src/__tool.fallback.gradient.less
@@ -4,22 +4,20 @@
\*################################*/
-#XMETER {
- // Applies a linear gradient background on an Element.
- // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) for more info.
- // See [WPD](http://docs.webplatform.org/wiki/css/functions/linear-gradient) for more info.
- //
- // ... - any number of parameters
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2014-07-08
- .gradient(...) {
- background-image: -webkit-linear-gradient(@arguments);
- background-image: -moz-linear-gradient(@arguments);
- background-image: -ms-linear-gradient(@arguments);
- background-image: -o-linear-gradient(@arguments);
- background-image: linear-gradient(@arguments);
- background-image: -webkit-gradient(@arguments); // "Old Webkit"
- }
+// Applies a linear gradient background on an Element.
+// See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) for more info.
+// See [WPD](http://docs.webplatform.org/wiki/css/functions/linear-gradient) for more info.
+//
+// ... - any number of parameters
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2014-07-08
+.gradient(...) {
+ background-image: -webkit-linear-gradient(@arguments);
+ background-image: -moz-linear-gradient(@arguments);
+ background-image: -ms-linear-gradient(@arguments);
+ background-image: -o-linear-gradient(@arguments);
+ background-image: linear-gradient(@arguments);
+ background-image: -webkit-gradient(@arguments); // "Old Webkit"
}
diff --git a/src/__tool.fallback.rotate.less b/src/__tool.fallback.rotate.less
index e7c9378..834b661 100644
--- a/src/__tool.fallback.rotate.less
+++ b/src/__tool.fallback.rotate.less
@@ -4,19 +4,17 @@
\*################################*/
-#XMETER {
- // Use this tool to apply a rotation transformation to an Object.
- //
- // @rotation - the angle, in degrees, to rotate the Object
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2014-05-10
- .rotate(@rotation) {
- -webkit-transform: rotate(@rotation);
- -moz-transform: rotate(@rotation);
- -ms-transform: rotate(@rotation);
- -o-transform: rotate(@rotation);
- transform: rotate(@rotation);
- }
+// Use this tool to apply a rotation transformation to an Object.
+//
+// @rotation - the angle, in degrees, to rotate the Object
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2014-05-10
+.rotate(@rotation) {
+ -webkit-transform: rotate(@rotation);
+ -moz-transform: rotate(@rotation);
+ -ms-transform: rotate(@rotation);
+ -o-transform: rotate(@rotation);
+ transform: rotate(@rotation);
}
diff --git a/src/__tool.fallback.transition.less b/src/__tool.fallback.transition.less
index cc274d8..2477391 100644
--- a/src/__tool.fallback.transition.less
+++ b/src/__tool.fallback.transition.less
@@ -4,37 +4,35 @@
\*################################*/
-#XMETER {
- // Applies a transition timing effect on an Element.
- //
- // @props - the CSS property name(s). If more than one, they must be comma-separated
- // @dura - (optional: `0ms`) the length in time, in milliseconds, the transition is to be in effect
- // @func - (optional: `ease`) the timing-function. See `https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function`
- // @delay - (optional: `0ms`) the length in time, in milliseconds, the transition will wait before starting
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2014-06-17
- .transition(@props; @dura: 0ms; @func: ease; @delay: 0ms) {
- -webkit-transition-property: @props;
- -moz-transition-property: @props;
- -ms-transition-property: @props;
- -o-transition-property: @props;
- transition-property: @props;
- -webkit-transition-duration: @dura;
- -moz-transition-duration: @dura;
- -ms-transition-duration: @dura;
- -o-transition-duration: @dura;
- transition-duration: @dura;
- -webkit-transition-timing-function: @func;
- -moz-transition-timing-function: @func;
- -ms-transition-timing-function: @func;
- -o-transition-timing-function: @func;
- transition-timing-function: @func;
- -webkit-transition-delay: @delay;
- -moz-transition-delay: @delay;
- -ms-transition-delay: @delay;
- -o-transition-delay: @delay;
- transition-delay: @delay;
- }
+// Applies a transition timing effect on an Element.
+//
+// @props - the CSS property name(s). If more than one, they must be comma-separated
+// @dura - (optional: `0ms`) the length in time, in milliseconds, the transition is to be in effect
+// @func - (optional: `ease`) the timing-function. See `https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function`
+// @delay - (optional: `0ms`) the length in time, in milliseconds, the transition will wait before starting
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2014-06-17
+.transition(@props; @dura: 0ms; @func: ease; @delay: 0ms) {
+ -webkit-transition-property: @props;
+ -moz-transition-property: @props;
+ -ms-transition-property: @props;
+ -o-transition-property: @props;
+ transition-property: @props;
+ -webkit-transition-duration: @dura;
+ -moz-transition-duration: @dura;
+ -ms-transition-duration: @dura;
+ -o-transition-duration: @dura;
+ transition-duration: @dura;
+ -webkit-transition-timing-function: @func;
+ -moz-transition-timing-function: @func;
+ -ms-transition-timing-function: @func;
+ -o-transition-timing-function: @func;
+ transition-timing-function: @func;
+ -webkit-transition-delay: @delay;
+ -moz-transition-delay: @delay;
+ -ms-transition-delay: @delay;
+ -o-transition-delay: @delay;
+ transition-delay: @delay;
}
diff --git a/src/__tool.module.borders.less b/src/__tool.module.borders.less
index 987636f..d004911 100644
--- a/src/__tool.module.borders.less
+++ b/src/__tool.module.borders.less
@@ -5,43 +5,41 @@
@import (reference) url('__tool.module.spacing.less');
-#XMETER {
- // The following mixins adjust border widths for **BLOCK** Objects only! They will keep the
- // vertical rhythm intact when adding border widths (by slightly adjusting position and margins).
- // Do *not* use these mixins on INLINE Objects!
- //
- // Note: This mixin affects border width only (for structure). It does not affect cosmetics,
- // i.e., border style or color. To change these, you must include the `border-style` and
- // `border-color` properties after including this mixin.
- //
- // `.border-vert(top; ...)` - adjust the top border
- // `.border-vert(bottom; ...)` - adjust the bottom border
- // `.border-vert(topbot; ...)` - adjust both the top and bottom borders
- // `.border-vert(all; ...)` - adjust all four borders
- //
- // @width - (optional: `0`) value of `border-width`
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-05-11
- .border-vert(top; @width: 0) {
- border-top-width: @width;
- #XMETER .pull-this(@width);
- }
+// The following mixins adjust border widths for **BLOCK** Objects only! They will keep the
+// vertical rhythm intact when adding border widths (by slightly adjusting position and margins).
+// Do *not* use these mixins on INLINE Objects!
+//
+// Note: This mixin affects border width only (for structure). It does not affect cosmetics,
+// i.e., border style or color. To change these, you must include the `border-style` and
+// `border-color` properties after including this mixin.
+//
+// `.border-vert(top; ...)` - adjust the top border
+// `.border-vert(bottom; ...)` - adjust the bottom border
+// `.border-vert(topbot; ...)` - adjust both the top and bottom borders
+// `.border-vert(all; ...)` - adjust all four borders
+//
+// @width - (optional: `0`) value of `border-width`
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-05-11
+.border-vert(top; @width: 0) {
+ border-top-width: @width;
+ .pull-this(@width);
+}
- .border-vert(bottom; @width: 0) {
- border-bottom-width: @width;
- #XMETER .pull-this(@width);
- }
+.border-vert(bottom; @width: 0) {
+ border-bottom-width: @width;
+ .pull-this(@width);
+}
- .border-vert(topbot; @width: 0) {
- border-top-width: @width;
- border-bottom-width: @width;
- #XMETER .pull-this(2 * @width);
- }
+.border-vert(topbot; @width: 0) {
+ border-top-width: @width;
+ border-bottom-width: @width;
+ .pull-this(2 * @width);
+}
- .border-vert(all; @width: 0) {
- border-width: @width;
- #XMETER .pull-this(2 * @width);
- }
+.border-vert(all; @width: 0) {
+ border-width: @width;
+ .pull-this(2 * @width);
}
diff --git a/src/__tool.module.clearfix.less b/src/__tool.module.clearfix.less
index 68d73af..fab2021 100644
--- a/src/__tool.module.clearfix.less
+++ b/src/__tool.module.clearfix.less
@@ -4,20 +4,18 @@
\*################################*/
-#XMETER {
- // This tool is used on **containers of floats** (not on floats themselves).
- // It pushes subsequent content to the bottom of the container.
- //
- // ^author
- // : Chris Harevy
- // ^updated
- // : 2016-02-08
- .clearfix() {
- &::after {
- content: ' '; // older browsers do not support empty content ('')
- display: block;
- height: 0;
- clear: both;
- }
+// This tool is used on **containers of floats** (not on floats themselves).
+// It pushes subsequent content to the bottom of the container.
+//
+// ^author
+// : Chris Harevy
+// ^updated
+// : 2016-02-08
+.clearfix() {
+ &::after {
+ content: ' '; // older browsers do not support empty content ('')
+ display: block;
+ height: 0;
+ clear: both;
}
}
diff --git a/src/__tool.module.delims.less b/src/__tool.module.delims.less
index 29c36e1..f889820 100644
--- a/src/__tool.module.delims.less
+++ b/src/__tool.module.delims.less
@@ -4,32 +4,30 @@
\*################################*/
-#XMETER {
- // This tool adds opening and closing punctuation marks surrounding an Object. The
- // punctuation marks are given by the `quotes` property.
- //
- // @left - the character for the left delimiter
- // @right - the character for the right delimiter
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2014-10-11
- .delimiters(@left; @right) {
- quotes: @left @right;
- &::before { content: open-quote; }
- &::after { content: close-quote; }
- }
+// This tool adds opening and closing punctuation marks surrounding an Object. The
+// punctuation marks are given by the `quotes` property.
+//
+// @left - the character for the left delimiter
+// @right - the character for the right delimiter
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2014-10-11
+.delimiters(@left; @right) {
+ quotes: @left @right;
+ &::before { content: open-quote; }
+ &::after { content: close-quote; }
+}
- .parens() { .delimiters('('; ')'); }
- .brackets() { .delimiters('['; ']'); }
- .braces() { .delimiters('{'; '}'); }
- .angles() { .delimiters('<'; '>'); } // '\003c' '\003e' // < >
+.parens() { .delimiters('('; ')'); }
+.brackets() { .delimiters('['; ']'); }
+.braces() { .delimiters('{'; '}'); }
+.angles() { .delimiters('<'; '>'); } // '\003c' '\003e' // < >
- .apos() { .delimiters('\''; '\''); } // '\0027' '\0027' // ' '
- .quot() { .delimiters('\"'; '\"'); } // '\0022' '\0022' // " "
+.apos() { .delimiters('\''; '\''); } // '\0027' '\0027' // ' '
+.quot() { .delimiters('\"'; '\"'); } // '\0022' '\0022' // " "
- .quotes-single() { .delimiters('\2018'; '\2019'); } // '‘' '’' // ‘ ’
- .quotes-double() { .delimiters('\201c'; '\201d'); } // '“' '”' // “ ”
- .guillemets-single() { .delimiters('\2039'; '\203a'); } // '‹' '›' // ‹ ›
- .guillemets-double() { .delimiters('\00ab'; '\00bb'); } // '«' '»' // « »
-}
+.quotes-single() { .delimiters('\2018'; '\2019'); } // '‘' '’' // ‘ ’
+.quotes-double() { .delimiters('\201c'; '\201d'); } // '“' '”' // “ ”
+.guillemets-single() { .delimiters('\2039'; '\203a'); } // '‹' '›' // ‹ ›
+.guillemets-double() { .delimiters('\00ab'; '\00bb'); } // '«' '»' // « »
diff --git a/src/__tool.module.fontsize.less b/src/__tool.module.fontsize.less
index 00d1a9f..c8422fb 100644
--- a/src/__tool.module.fontsize.less
+++ b/src/__tool.module.fontsize.less
@@ -5,25 +5,21 @@
@import (reference) url('__settings.less');
-#XMETER {
- // This Mixin sets `font-size` and `line-height` such that
- // `font-size` * `line-height` = one vertical rhythm unit.
- // Use this on elements with `display: block;` or `display: inline-block;` or anything
- // that will affect vertical rhythm.
- //
- // ^params
- // @ratio - the ratio of the new font size to `@fontsize_base`, i.e., the number of 'rem's
- // @line_height_orig - (default: @xmeter_line_height) the `line-height` of the parent element
- // @lines - (default: 1) the number of vrus each line of text will take up. should be a whole number to satisfy vertical rhythm.
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2016-01-08
- #XMETER .VARS();
- .font-size-block(@ratio; @line_height_orig: @xmeter_line_height; @lines: 1) {
- #XMETER .VARS();
- font-size: (@ratio * @1rem); // legacy browsers (see __settings for more info)
- font-size: (@ratio * 1rem);
- line-height: ((@line_height_orig / @ratio) * @lines);
- }
+// This Mixin sets `font-size` and `line-height` such that
+// `font-size` * `line-height` = one vertical rhythm unit.
+// Use this on elements with `display: block;` or `display: inline-block;` or anything
+// that will affect vertical rhythm.
+//
+// ^params
+// @ratio - the ratio of the new font size to `@fontsize_base`, i.e., the number of 'rem's
+// @line_height_orig - (default: @g-line_height) the `line-height` of the parent element
+// @lines - (default: 1) the number of vrus each line of text will take up. should be a whole number to satisfy vertical rhythm.
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2016-01-08
+.font-size-block(@ratio; @line_height_orig: @g-line_height; @lines: 1) {
+ font-size: (@ratio * @g-1rem); // legacy browsers (see __settings for more info)
+ font-size: (@ratio * 1rem);
+ line-height: ((@line_height_orig / @ratio) * @lines);
}
diff --git a/src/__tool.module.spacing.less b/src/__tool.module.spacing.less
index cc2a40f..d008e4c 100644
--- a/src/__tool.module.spacing.less
+++ b/src/__tool.module.spacing.less
@@ -4,50 +4,48 @@
\*################################*/
-#XMETER {
- // Provides [top|bottom] spacing of any given amount.
- // They do *NOT* automatically multiply by a vertical rhythm unit; you have to do that before
- // giving an argument.
- // The reason these methods exist is to make your life easier so that you don’t have to remember
- // whether padding/margin goes on top/bottom. Also, changing it can be done in one step.
- //
- // Usage:
- // Correct vertical rhythm is achieved by positioning elements up and down the page.
- // By default, elements may have a top spacing and bottom spacing, but sometimes this has to be
- // adjusted because adding a [top|bottom] border offsets the rhythm.
- //
- // 1. To push the current element down the page, use `.push-this()`
- // 2. To push subsequent elements down the page, use `.push-next()`
- // 3. To pull the current element, along with subsequent elements, up
- // (due to inadvertent pushing of top/bottom border, etc.) use `.pull-this()`
- //
- // @space - the amout of spacing to insert or remove, in any unit given (px, rems, etc.) as a positive value
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-03-18
- .push-this(@space) {
- padding-top: @space;
- }
- .push-next(@space) {
- margin-bottom: @space;
- }
- .pull-this(@space) {
- margin-top: -@space;
- }
+// Provides [top|bottom] spacing of any given amount.
+// They do *NOT* automatically multiply by a vertical rhythm unit; you have to do that before
+// giving an argument.
+// The reason these methods exist is to make your life easier so that you don’t have to remember
+// whether padding/margin goes on top/bottom. Also, changing it can be done in one step.
+//
+// Usage:
+// Correct vertical rhythm is achieved by positioning elements up and down the page.
+// By default, elements may have a top spacing and bottom spacing, but sometimes this has to be
+// adjusted because adding a [top|bottom] border offsets the rhythm.
+//
+// 1. To push the current element down the page, use `.push-this()`
+// 2. To push subsequent elements down the page, use `.push-next()`
+// 3. To pull the current element, along with subsequent elements, up
+// (due to inadvertent pushing of top/bottom border, etc.) use `.pull-this()`
+//
+// @space - the amout of spacing to insert or remove, in any unit given (px, rems, etc.) as a positive value
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-03-18
+.push-this(@space) {
+ padding-top: @space;
+}
+.push-next(@space) {
+ margin-bottom: @space;
+}
+.pull-this(@space) {
+ margin-top: -@space;
+}
- // Higher-level concepts for spacing.
- // The default top spacing is `.push-this()` and the default bottom spacing is `.push-next()`.
- //
- // @space - the amout of spacing to insert or remove, in any unit given (px, rems, etc.) as a positive value
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2015-03-18
- .spacing-top(@space) {
- .push-this(@space);
- }
- .spacing-bottom(@space) {
- .push-next(@space);
- }
+// Higher-level concepts for spacing.
+// The default top spacing is `.push-this()` and the default bottom spacing is `.push-next()`.
+//
+// @space - the amout of spacing to insert or remove, in any unit given (px, rems, etc.) as a positive value
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-03-18
+.spacing-top(@space) {
+ .push-this(@space);
+}
+.spacing-bottom(@space) {
+ .push-next(@space);
}
diff --git a/src/__tool.module.sprite.less b/src/__tool.module.sprite.less
index dab6fac..f6cea5a 100644
--- a/src/__tool.module.sprite.less
+++ b/src/__tool.module.sprite.less
@@ -4,27 +4,25 @@
\*################################*/
-#XMETER {
- // Sets the background position of an Object’s background sprite image.
- //
- // @{[horizontal|vertcial]} - whether the sprite’s images are linearly horizontally or vertically ordered.
- // @position - the position of the sprite’s image to be used, starting at 1. must be a positive integer.
- // @iconsize - the horizontal (x) size of the sprite’s image. in pixels.
- // @iconpadd - the padding between images in the sprite’s image. in pixels.
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2016-01-19
- .sprite(horizontal; @position; @iconsize; @iconpadd) when (@position > 1) {
- background-position: ((@position - 1) * -(@iconsize + @iconpadd)) 0;
- }
- .sprite(horizontal; @position; @iconsize; @iconpadd) when (@position = 1) {
- background-position: 0 0;
- }
- .sprite(vertical; @position; @iconsize; @iconpadd) when (@position > 1) {
- background-position: 0 ((@position - 1) * -(@iconsize + @iconpadd));
- }
- .sprite(vertical; @position; @iconsize; @iconpadd) when (@position = 1) {
- background-position: 0 0;
- }
+// Sets the background position of an Object’s background sprite image.
+//
+// @{[horizontal|vertcial]} - whether the sprite’s images are linearly horizontally or vertically ordered.
+// @position - the position of the sprite’s image to be used, starting at 1. must be a positive integer.
+// @iconsize - the horizontal (x) size of the sprite’s image. in pixels.
+// @iconpadd - the padding between images in the sprite’s image. in pixels.
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2016-01-19
+.sprite(horizontal; @position; @iconsize; @iconpadd) when (@position > 1) {
+ background-position: ((@position - 1) * -(@iconsize + @iconpadd)) 0;
+}
+.sprite(horizontal; @position; @iconsize; @iconpadd) when (@position = 1) {
+ background-position: 0 0;
+}
+.sprite(vertical; @position; @iconsize; @iconpadd) when (@position > 1) {
+ background-position: 0 ((@position - 1) * -(@iconsize + @iconpadd));
+}
+.sprite(vertical; @position; @iconsize; @iconpadd) when (@position = 1) {
+ background-position: 0 0;
}
diff --git a/src/__tool.module.translucent.less b/src/__tool.module.translucent.less
index 7ab91b2..810cba9 100644
--- a/src/__tool.module.translucent.less
+++ b/src/__tool.module.translucent.less
@@ -4,15 +4,14 @@
\*################################*/
-#XMETER {
- // Makes an object slightly transparent, but it becomes opaque upon `:hover`.
- //
- // ^author
- // : Chris Harvey
- // ^updated
- // : 2014-10-07
- .translucent() {
- opacity: 0.5;
- &:hover { opacity: 1; }
- }
+// Makes an object slightly transparent, but it becomes opaque upon `:hover`.
+// NOTE THIS MIXIN IS NOW DEPRECATED
+//
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2014-10-07
+.translucent() {
+ opacity: 0.5;
+ &:hover { opacity: 1; }
}
diff --git a/src/_base.forms.less b/src/_base.forms.less
index 34e32d5..8d28ba0 100644
--- a/src/_base.forms.less
+++ b/src/_base.forms.less
@@ -8,8 +8,8 @@
@import (reference) url('__tool.module.fontsize.less');
-@color_gray_fb: #c0c0c0; // fallback
-@color_gray: fadeout(#000, 75%);
+@p-color_gray_fb: #c0c0c0; // fallback
+@p-color_gray: fadeout(#000, 75%);
// consistent borders for all
fieldset,
@@ -17,10 +17,10 @@ input,
select,
textarea,
button {
- #XMETER .border-vert(all; 1px);
+ .border-vert(all; 1px);
border-style: solid;
- border-color: @color_gray_fb;
- border-color: @color_gray;
+ border-color: @p-color_gray_fb;
+ border-color: @p-color_gray;
}
fieldset {
@@ -38,26 +38,24 @@ button {
// small font size for textual inputs
input:not([type="button"]):not([type="reset"]):not([type="submit"]),
textarea {
- #XMETER .VARS();
- #XMETER .font-size-block(@xmeter_font_size_h6);
+ .font-size-block(@g-font_size_h6);
}
textarea {
width: 30rem;
- #XMETER .VARS();
- height: 6 * @xmeter_vru;
- line-height: @xmeter_line_height; // override browser-default (simply looks better)
+ height: 6 * @g-vru;
+ line-height: @g-line_height; // override browser-default (simply looks better)
}
input[type="button"],
input[type="reset"],
input[type="submit"],
button {
- background-color: @color_gray_fb;
- background-color: @color_gray;
+ background-color: @p-color_gray_fb;
+ background-color: @p-color_gray;
}
// Override content-box in Normalize (* in base.generic isn’t specific enough)
input[type="search"] {
- #XMETER .box-sizing(border-box);
+ .box-sizing(border-box);
}
diff --git a/src/_base.generic.less b/src/_base.generic.less
index 23b916a..1e4a4c3 100644
--- a/src/_base.generic.less
+++ b/src/_base.generic.less
@@ -11,46 +11,65 @@
&,
&::before,
&::after {
- #XMETER .box-sizing(border-box);
+ .box-sizing(border-box);
border: 0 solid; // reset browser default border
- content: ''; content: none; // fallback
+ content: ' '; // fallback
+ content: ''; // fallback
+ content: none;
@media print {
- background: transparent;
- box-shadow: none;
- text-shadow: none;
+ background: transparent !important;
+ box-shadow: none !important;
+ text-shadow: none !important;
}
}
}
// [1] addresses support for `rem` units (otherwise these would be in `body` selector)
html {
- #XMETER .VARS();
- font-size: @xmeter_font_size; // [1]
- line-height: @xmeter_line_height; // [1]
+ font-size: @g-font_size; // [1]
+ line-height: @g-line_height; // [1]
}
// Vertical spacing between typographical blocks
h1, h2, h3, h4, h5, h6,
-p, figure, blockquote, pre,
+p, pre, figure, blockquote,
ol, ul, dl,
table,
fieldset {
- #XMETER .VARS();
- #XMETER .spacing-bottom(@xmeter_vru);
+ .spacing-bottom(@g-vru);
}
li, dt, dd {
> ol, > ul, > dl {
- #XMETER .spacing-bottom(0); // undo default spacing-bottom for nested lists
+ .spacing-bottom(0); // undo default spacing-bottom for nested lists
}
}
// Font sizes for text-level elements should be in units of `em` instead of `rem` because
// they should scale with their parents.
// Also, inline elements should not affect vertical rhythm, thus line-heights are zero.
-span, a, br,
-em, strong, i, mark, u, small, s,
-dfn, b, var, q, cite, sup, sub,
-abbr, data, time, code, kbd, samp {
+span, br,
+em, strong, i, mark, u, small,
+dfn, b, abbr, var, q, cite, sup, sub,
+data, time, code, kbd, samp {
display: inline;
line-height: 0;
}
+
+// Elements with a transparent content model
+// should inherit their display and line-height, except
+// if they are inside an element containing
+// only text and/or other inline elements.
+// This behavior may be overrided with classes/inline styles.
+a, s, ins, del {
+ display: inherit;
+ line-height: inherit;
+ h1 > &, h2 > &, h3 > &, h4 > &, h5 > &, h6 > &,
+ p > &, pre > &,
+ figure > &, figcaption > &, blockquote > &,
+ li > &, dt > &, dd > &,
+ caption > &, th > &, td > &,
+ legend > &, summary > & {
+ display: inline;
+ line-height: 0;
+ }
+}
diff --git a/src/_base.grouping.paras.less b/src/_base.grouping.paras.less
index 4c0b7eb..5e64df0 100644
--- a/src/_base.grouping.paras.less
+++ b/src/_base.grouping.paras.less
@@ -4,13 +4,14 @@
\*################################*/
-figure, blockquote, pre {
- // margin-left: 1rem;
- // margin-right: 1rem;
-}
-
p {
}
+pre {
+ // makes block code look pretty
+ text-align: left;
+ text-indent: 0;
+ white-space: pre;
+}
figure {
// undo Normalize
margin-top: 0;
@@ -19,24 +20,5 @@ figure {
}
figcaption {
}
-// A `blockquote` represents material taken directly from another source. Typically,
-// block quotations are used when the original source has more than 40 words and/or contains
-// paragraph breaks. In either of these cases, the `blockquote` should contain child `p` Elements
-// that correspond to the source (or not have any children `p` Elements if the source does not).
-//
-//
-// In a normal block quote, the credit to the source of the quoted work should be indicated by
-// a `blockquote > footer > cite`.
-//
-// ^author
-// : Chris Harvey
-// ^updated
-// : 2015-02-17
blockquote {
}
-pre {
- // makes block code look pretty
- text-align: left;
- text-indent: 0;
- white-space: pre;
-}
diff --git a/src/_base.grouping.tables.less b/src/_base.grouping.tables.less
index b3c9f11..3b8cc2b 100644
--- a/src/_base.grouping.tables.less
+++ b/src/_base.grouping.tables.less
@@ -16,11 +16,11 @@ tfoot {
}
thead {
}
+tfoot {
+}
tbody {
vertical-align: top; // for data alignment
}
-tfoot {
-}
tr {
}
th {
diff --git a/src/_base.interactive.less b/src/_base.interactive.less
new file mode 100644
index 0000000..049da55
--- /dev/null
+++ b/src/_base.interactive.less
@@ -0,0 +1,4 @@
+
+/*################################*\
+ xmeter | _base.interactive.less
+\*################################*/
diff --git a/src/_base.sections.less b/src/_base.sections.less
index 24c1b06..ff7fd56 100644
--- a/src/_base.sections.less
+++ b/src/_base.sections.less
@@ -10,9 +10,6 @@
body {
}
main {
- // @media screen {
- // margin: 0 1rem;
- // }
}
section {
}
@@ -32,17 +29,16 @@ footer {
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
-h1 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h1); }
-h2 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h2); }
-h3 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h3); }
-h4 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h4); }
-h5 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h5); }
-h6 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h6); }
+h1 { .font-size-block(@g-font_size_h1); }
+h2 { .font-size-block(@g-font_size_h2); }
+h3 { .font-size-block(@g-font_size_h3); }
+h4 { .font-size-block(@g-font_size_h4); }
+h5 { .font-size-block(@g-font_size_h5); }
+h6 { .font-size-block(@g-font_size_h6); }
h1 {
margin-top: 0; // undo Normalize
- #XMETER .VARS();
- #XMETER .spacing-top(@xmeter_vru);
+ .spacing-top(@g-vru);
}
hr {
diff --git a/src/_base.text.data.less b/src/_base.text.data.less
index 7ceacb3..e19d964 100644
--- a/src/_base.text.data.less
+++ b/src/_base.text.data.less
@@ -4,12 +4,6 @@
\*################################*/
-abbr {
- &[title] {
- cursor: help;
- border-bottom: 0; // undo Normalize
- }
-}
data {
}
time {
diff --git a/src/_base.text.doctext.less b/src/_base.text.doctext.less
index 8f1e668..53be7e4 100644
--- a/src/_base.text.doctext.less
+++ b/src/_base.text.doctext.less
@@ -51,6 +51,22 @@ dfn {
b {
font-weight: 700;
}
+// An abbreviation or acronym.
+// The `[title]` attribute should contain the expanded term.
+// ```
+// U.S.A.
+// ```
+//
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-03-07
+abbr {
+ &[title] {
+ cursor: help;
+ border-bottom: 0; // undo Normalize
+ }
+}
// A placeholder for some textual element. Could be a filename, etc.
// This does *not* represent a variable in a `code`, e.g., the following HTML would be incorrect:
// ```
@@ -80,7 +96,7 @@ var {
// ^updated
// : 2014-11-05
q {
- #XMETER .quotes-double(); // fallback for `initial`
+ .quotes-double(); // fallback for `initial`
quotes: initial;
}
// Represents a placeholder reference to a name or title of a heading, section, figure,
diff --git a/src/_base.text.less b/src/_base.text.less
index 6387cea..07d2f65 100644
--- a/src/_base.text.less
+++ b/src/_base.text.less
@@ -6,7 +6,6 @@
// RECOMMENDATION:
// Do not use `br` to indicate line breaks, use CSS instead.
-// One exception: MAY use `address > br` to indicate line breaks (by convention), but
-// PREFERRED method is to use `address > ol` and use CSS to remove item markers
+// One exception: MAY use `address > br` to indicate line breaks (by convention)
br {
}
diff --git a/src/_base.text.stress.less b/src/_base.text.stress.less
index 81492c1..64cc721 100644
--- a/src/_base.text.stress.less
+++ b/src/_base.text.stress.less
@@ -75,5 +75,5 @@ small {
// : 2015-02-10
s {
text-decoration: line-through;
- color: #e00;
+ color: #b00;
}
diff --git a/test-forms.html b/test-forms.html
deleted file mode 100644
index 148bb9c..0000000
--- a/test-forms.html
+++ /dev/null
@@ -1,120 +0,0 @@
-
-
-
-
-
- xmeter.css Test — Forms
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/test-forms.jade b/test-forms.jade
deleted file mode 100644
index 0228400..0000000
--- a/test-forms.jade
+++ /dev/null
@@ -1,117 +0,0 @@
-doctype html
-html(lang="en", xmlns="http://www.w3.org/1999/xhtml")
- head
- meta(charset="UTF-8")
- meta(name="description", content="A test of bare, unclassed elements.")
- title xmeter.css Test — Forms
- link(rel="stylesheet", href="xmeter.css")
- body.
-
-
-
diff --git a/test.html b/test.html
deleted file mode 100644
index 81356b6..0000000
--- a/test.html
+++ /dev/null
@@ -1,286 +0,0 @@
-
-
-
-
-
- xmeter.css Test
-
-
-
- This is the body element. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines.
-
- This is a section element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
-
-
- This is an article element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
-
-
-
-
- This is the main element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
-
-
- This is a header element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
-
-
-
Heading 1
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aliquam sagittis suscipit nunc, a cursus libero euismod at.
- Nulla placerat neque massa, quis interdum leo efficitur vel.
- Donec feugiat varius arcu non volutpat.
- Mauris eget mauris ut mauris auctor mattis id vel justo.
- Nulla dictum arcu nec suscipit mollis.
- Maecenas a iaculis nisl, ut pretium est. Nulla facilisi.
-
-
Heading 2
-
- Suspendisse ut auctor enim.
- Aliquam viverra enim vitae ante aliquet venenatis.
- Sed vel nibh sit amet sapien fermentum mattis nec non arcu.
- Praesent dapibus velit quis lectus tempus, ut ullamcorper nibh facilisis.
- Aenean tincidunt ante risus, semper malesuada libero consectetur id.
- Praesent vel ligula ut enim porttitor porta. Aenean eu ullamcorper mi.
- Integer blandit est quam, eget mattis urna scelerisque quis.
- Maecenas sapien sapien, ornare nec lobortis eget, tincidunt sed ligula.
- Maecenas risus nibh, volutpat sed euismod non, semper eget neque.
- Integer varius egestas risus, volutpat sagittis turpis convallis eget.
- Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet.
- In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem.
- Sed luctus congue tortor a scelerisque.
-
-
Heading 3
-
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Nunc sit amet scelerisque lectus. Cras cursus sed dui quis convallis.
- Quisque id justo elit.
- Fusce ut quam non sem efficitur accumsan sed id neque.
- Mauris finibus dignissim gravida.
- In dignissim mauris ac odio molestie volutpat.
- Nulla tellus justo, finibus sed volutpat sed, tristique ac lacus.
- Suspendisse sit amet fermentum sapien.
- Aliquam luctus laoreet iaculis.
- Proin lacinia orci vitae tellus pellentesque porttitor.
-
-
Heading 4
-
- Aenean consectetur suscipit urna, non vehicula lacus blandit et.
- Integer at lacus et diam tristique suscipit.
- Ut cursus massa sit amet nisl convallis, elementum accumsan sapien mattis.
- Vestibulum vitae magna ac tellus accumsan pharetra vulputate vitae erat.
- Vestibulum est dui, elementum non sagittis ac, sagittis accumsan justo.
- Donec at vestibulum diam. Nam et volutpat dolor, at pulvinar nisi.
- Curabitur aliquam maximus nulla eu venenatis.
- Nam aliquam lorem non felis dignissim dictum.
- Pellentesque sagittis vehicula nisl non luctus.
- Pellentesque eget ligula hendrerit, blandit enim consequat, dictum sem.
- In quis lectus in lectus interdum laoreet eu quis quam.
- Fusce auctor posuere purus, quis semper libero dignissim euismod.
- Curabitur commodo mauris a sapien vulputate, eget pharetra urna facilisis.
-
-
Heading 5
-
- Donec finibus ut lectus finibus pellentesque.
- Nulla euismod feugiat nulla nec posuere.
- Sed ac est id sem sagittis rhoncus eu ac neque.
- Aliquam eu metus sagittis, porta turpis id, scelerisque magna.
- Nulla venenatis elementum est, semper viverra felis tristique sit amet.
- Mauris nec ipsum id orci porttitor auctor sed sit amet sem.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Etiam tellus leo, venenatis sit amet ipsum non, sagittis feugiat ante.
-
-
Heading 6
-
- Donec vel dolor ut felis dapibus ultricies vitae a nibh.
- Ut semper odio est, sed lacinia ligula gravida ut.
- Vestibulum facilisis viverra pulvinar.
- Suspendisse maximus nisl sit amet augue vulputate, vel porta nunc molestie.
- Aliquam mauris diam, pharetra vel consectetur quis, rhoncus in risus.
- Donec ut quam massa.
- Vestibulum sapien justo, commodo a eros in, rhoncus interdum nisl.
- Etiam a porta lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-
-
This is an hgroup element. It contains only headings:
-
Heading 1
-
Heading 2
-
Heading 3
-
Heading 4
-
Heading 5
-
Heading 6
-
-
- This is an address element.
- Line breaks are conventionally indicated by br elements,
- but ol elements are preferred:
- (remove styling if need be)
-
-
12345 United Ave
-
Washington, DC 00000
-
- The following is an hr element:
-
-
-
- This is a div.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
-
-
- This is a p element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
-
- This is a figure.
- This is a figcaption within the same figure.
-
-
This is a blockquote.
-
This is a pre element. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text.
-
-
li within an ol
-
li within the same ol
-
li within the same ol
-
-
-
li within a ul
-
li within the same ul
-
li within the same ul
-
-
-
dt within a dl
-
dd within the same dl
-
another dt within the same dl
-
another dd within the same dl
-
-
-
table caption
-
-
-
-
thead th |
-
| thead th
-
-
-
thead td |
-
| thead td
-
-
-
-
-
tfoot th |
-
| tfoot th
-
-
-
tfoot td |
-
| tfoot td
-
-
-
-
-
tbody th |
-
| tbody th
-
-
-
tbody td |
-
| tbody td
-
-
-
-
a br is below:
a a[href] em strong i
- mark
- u small
- s ins
- del
- dfn b
- var
- q
- cite sup sub abbr abbr[title]
- data
- code kbd kbd > kbd samp
-
-
\ No newline at end of file
diff --git a/test.jade b/test.jade
deleted file mode 100644
index 91e6911..0000000
--- a/test.jade
+++ /dev/null
@@ -1,269 +0,0 @@
-doctype html
-html(lang="en", xmlns="http://www.w3.org/1999/xhtml")
- head
- meta(charset="UTF-8")
- meta(name="description", content="A test of bare, unclassed elements.")
- title xmeter.css Test
- link(rel="stylesheet", href="xmeter.css")
- //- link(rel="stylesheet", href="xmeter.min.css")
- style.
- body {
- background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg');
- background-size: 1px 24px;
- background-repeat: repeat;
- background-position: left bottom;
- }
- p[lang="la"] {
- font-style:italic;
- font-family:serif;
- }
- body This is the body element. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines.
- section.
- This is a section element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- article.
- This is an article element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- aside.
- This is an aside element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- nav.
- This is a nav element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- main.
- This is the main element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- header.
- This is a header element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- footer.
- This is a footer element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- h1 Heading 1
- p(lang="la").
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aliquam sagittis suscipit nunc, a cursus libero euismod at.
- Nulla placerat neque massa, quis interdum leo efficitur vel.
- Donec feugiat varius arcu non volutpat.
- Mauris eget mauris ut mauris auctor mattis id vel justo.
- Nulla dictum arcu nec suscipit mollis.
- Maecenas a iaculis nisl, ut pretium est. Nulla facilisi.
- h2 Heading 2
- p(lang="la").
- Suspendisse ut auctor enim.
- Aliquam viverra enim vitae ante aliquet venenatis.
- Sed vel nibh sit amet sapien fermentum mattis nec non arcu.
- Praesent dapibus velit quis lectus tempus, ut ullamcorper nibh facilisis.
- Aenean tincidunt ante risus, semper malesuada libero consectetur id.
- Praesent vel ligula ut enim porttitor porta. Aenean eu ullamcorper mi.
- Integer blandit est quam, eget mattis urna scelerisque quis.
- Maecenas sapien sapien, ornare nec lobortis eget, tincidunt sed ligula.
- Maecenas risus nibh, volutpat sed euismod non, semper eget neque.
- Integer varius egestas risus, volutpat sagittis turpis convallis eget.
- Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet.
- In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem.
- Sed luctus congue tortor a scelerisque.
- h3 Heading 3
- p(lang="la").
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Nunc sit amet scelerisque lectus. Cras cursus sed dui quis convallis.
- Quisque id justo elit.
- Fusce ut quam non sem efficitur accumsan sed id neque.
- Mauris finibus dignissim gravida.
- In dignissim mauris ac odio molestie volutpat.
- Nulla tellus justo, finibus sed volutpat sed, tristique ac lacus.
- Suspendisse sit amet fermentum sapien.
- Aliquam luctus laoreet iaculis.
- Proin lacinia orci vitae tellus pellentesque porttitor.
- h4 Heading 4
- p(lang="la").
- Aenean consectetur suscipit urna, non vehicula lacus blandit et.
- Integer at lacus et diam tristique suscipit.
- Ut cursus massa sit amet nisl convallis, elementum accumsan sapien mattis.
- Vestibulum vitae magna ac tellus accumsan pharetra vulputate vitae erat.
- Vestibulum est dui, elementum non sagittis ac, sagittis accumsan justo.
- Donec at vestibulum diam. Nam et volutpat dolor, at pulvinar nisi.
- Curabitur aliquam maximus nulla eu venenatis.
- Nam aliquam lorem non felis dignissim dictum.
- Pellentesque sagittis vehicula nisl non luctus.
- Pellentesque eget ligula hendrerit, blandit enim consequat, dictum sem.
- In quis lectus in lectus interdum laoreet eu quis quam.
- Fusce auctor posuere purus, quis semper libero dignissim euismod.
- Curabitur commodo mauris a sapien vulputate, eget pharetra urna facilisis.
- h5 Heading 5
- p(lang="la").
- Donec finibus ut lectus finibus pellentesque.
- Nulla euismod feugiat nulla nec posuere.
- Sed ac est id sem sagittis rhoncus eu ac neque.
- Aliquam eu metus sagittis, porta turpis id, scelerisque magna.
- Nulla venenatis elementum est, semper viverra felis tristique sit amet.
- Mauris nec ipsum id orci porttitor auctor sed sit amet sem.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Etiam tellus leo, venenatis sit amet ipsum non, sagittis feugiat ante.
- h6 Heading 6
- p(lang="la").
- Donec vel dolor ut felis dapibus ultricies vitae a nibh.
- Ut semper odio est, sed lacinia ligula gravida ut.
- Vestibulum facilisis viverra pulvinar.
- Suspendisse maximus nisl sit amet augue vulputate, vel porta nunc molestie.
- Aliquam mauris diam, pharetra vel consectetur quis, rhoncus in risus.
- Donec ut quam massa.
- Vestibulum sapien justo, commodo a eros in, rhoncus interdum nisl.
- Etiam a porta lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- hgroup
- h4 This is an hgroup element. It contains only headings:
- h1 Heading 1
- h2 Heading 2
- h3 Heading 3
- h4 Heading 4
- h5 Heading 5
- h6 Heading 6
- address.
- This is an address element.
- Line breaks are conventionally indicated by br elements,
- but ol elements are preferred:
- (remove styling if need be)
-
-
12345 United Ave
-
Washington, DC 00000
-
- The following is an hr element:
- hr
- div.
- This is a div.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- p.
- This is a p element.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- It runs across multiple lines.
- figure This is a figure.
- figcaption This is a figcaption within the same figure.
- blockquote This is a blockquote.
- pre This is a pre element. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text.
- ol
- li li within an ol
- li li within the same ol
- li li within the same ol
- ul
- li li within a ul
- li li within the same ul
- li li within the same ul
- dl
- dt dt within a dl
- dd dd within the same dl
- dt another dt within the same dl
- dd another dd within the same dl
- table
- caption table caption
- // note: thead and tfoot should be marked up before tbody
- thead
- tr
- th thead th |
- th | thead th
- tr
- td thead td |
- td | thead td
- tfoot
- tr
- th tfoot th |
- th | tfoot th
- tr
- td tfoot td |
- td | tfoot td
- tbody
- tr
- th tbody th |
- th | tbody th
- tr
- td tbody td |
- td | tbody td
- div a br is below:
- br
- a a
- a(href="www") a[href]
- em em
- strong strong
- i i
- mark mark
- u u
- small small
- s s
- ins ins
- del del
- dfn dfn
- b b
- var var
- q q
- cite cite
- sup sup
- sub sub
- abbr abbr
- abbr(title="www") abbr[title]
- data data
- time time
- code code
- kbd kbd
- kbd: kbd kbd > kbd
- samp samp
diff --git a/xmeter.css b/xmeter.css
index 40eb4d0..aec7302 100644
--- a/xmeter.css
+++ b/xmeter.css
@@ -1,9 +1,9 @@
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
xmeter
- Version: 3.6.0
+ Version: 4.0.0
Licence: MIT
Repo : https://github.com/chharvey/xmeter.git
- Home : https://chharvey.github.io/xmeter/
+ Home : https://github.com/chharvey/xmeter/blob/gh-pages/README.md
Author : https://chharvey.github.io/
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
@@ -539,22 +539,23 @@ th {
* CONTENTS
*
* reset.css (above).............strips all elements of all browser-default styles
- * normalize.css (above).........imported inline from https://github.com/necolas/normalize.css
+ * normalize.css (above).........(@necolas) addresses browser discrepancies
*
* BASE
* generic.......................styles that apply to `html` and very far-reaching groups of elements
* sections......................secioning content and section-related elements
* grouping......................grouping content
* ....paras.........................paragraphs, block-level textual elements
- * ....lists.........................ordered, unordered, association
+ * ....lists.........................ordered, unordered, dictionary
* ....tables........................tables
* text..........................text-level and inline elements
* ....links.........................inline hyperlinks
- * ....stress........................text outstanding from surrounding prose (e.g., and )
- * ....doctext.......................documentation elements (e.g., and )
- * ....data..........................machine- or human-readable data (e.g.,