From 48cf8b91a15d72c7fb6419242fb56ea9204faca0 Mon Sep 17 00:00:00 2001 From: Rob Date: Wed, 17 Jul 2019 18:10:31 +0100 Subject: [PATCH] Add more styleguides --- README.md | 6 +- build/markdown/specimen.html | 911 ++++++++++++++++++++++++++++ build/markdown/styleguide.html | 1016 ++++++++++++++++++++++++++++++++ package-lock.json | 2 +- package.json | 5 +- source/markdown/specimen.md | 199 +------ source/markdown/styleguide.md | 175 ++++++ 7 files changed, 2130 insertions(+), 184 deletions(-) create mode 100644 build/markdown/specimen.html create mode 100644 build/markdown/styleguide.html create mode 100644 source/markdown/styleguide.md diff --git a/README.md b/README.md index 46acadc..48d101b 100644 --- a/README.md +++ b/README.md @@ -97,8 +97,10 @@ Print First is 99% standard CSS. I've added [`.less`](http://lesscss.org) files ## Styleguide -1. [Intro to Markdown and writing styleguide](./source/markdown/speciman.md) -2. [Sane stylesheets for css](https://github.com/badlydrawnrob/ecss) +1. [Intro to Markdown and writing styleguide](./build/markdown/styleguide.md) +2. [Writing in context](./build/markdown/speciman.md) +3. [A look at the components](./build/markdown/partials.md) +4. [Sane stylesheets for css](https://github.com/badlydrawnrob/ecss) diff --git a/build/markdown/specimen.html b/build/markdown/specimen.html new file mode 100644 index 0000000..0ca7013 --- /dev/null +++ b/build/markdown/specimen.html @@ -0,0 +1,911 @@ + + + + + + specimen + + + + + + + + +
+

Print First CSS: Specimen

+ +

A look at how real-world writing might work together • @badlydrawnrob

+ +

H1

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus accumsan lectus, non imperdiet purus condimentum sit amet. Aenean dapibus aliquam rhoncus. Nulla ut tortor vulputate, bibendum mauris nec, finibus lacus.

+ +

H2

+ +

Etiam a justo placerat, bibendum diam vitae, semper odio. Pellentesque cursus auctor augue, vel consectetur urna sagittis vel. Duis condimentum, tortor a placerat efficitur, nisi est eleifend nunc, ac lobortis quam est vel quam.

+
    +
  1. Pellentesque fermentum
    2. +
  2. Cras ut elit et dolor porttitor fermentum
    3. +
  3. non blandit mi ipsum at libero
    4. +
+

H3

+ +

Integer facilisis eros et risus consequat lobortis. Cras vel dignissim enim, ut laoreet dui.

+ +

H4

+ +

Nulla sit amet enim blandit, imperdiet lorem ac, lobortis orci. Aenean mollis dui tortor, eget consectetur mauris congue nec. Aenean iaculis ut quam eget non blandit mi ipsum at libero hendrerit. Vestibulum in lacus sed turpis sodales congue in et risus. Sed vitae pharetra neque. Sed nisi ligula, tempus ac massa at, volutpat sagittis massa. Praesent placerat congue velit, at tincidunt neque accumsan sit amet.

+
+

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae … Ut vestibulum libero eu mi sodales tincidunt. Aenean id eleifend lacus. Proin vehicula sapien convallis, dictum justo id, eleifend nibh [phasellus mattis enim eu nisi maximus] (Dignissim, 2018, pg. 36, mauris rutrum)

+
+
H5
+ +

Sed nisi ligula, tempus ac massa at, volutpat sagittis massa. Praesent placerat congue velit, at tincidunt neque accumsan sit amet.

+
# code block
+print('3 backticks or')
+print('indent 4 spaces')
+

Here is an example of inline code var = 1, Keyboard controls ⌘ + V and a sample Does not compute, press: Y to continue

+
H6
+ +

Aliquam feugiat velit sed nisl tempor lobortis.

+ +

Cras convallis, lectus vel ultricies vestibulum, est sapien faucibus purus, non blandit mi ipsum at libero. Cras bibendum dolor eget justo aliquet, sit amet mollis libero volutpat. Vivamus et elementum lacus, eget feugiat ex. Nulla facilisi.

+
# code block
+print('3 backticks or')
+print('indent 4 spaces')
+
# code block
+print('3 backticks or')
+print('indent 4 spaces')
+ +
+ + \ No newline at end of file diff --git a/build/markdown/styleguide.html b/build/markdown/styleguide.html new file mode 100644 index 0000000..afd41af --- /dev/null +++ b/build/markdown/styleguide.html @@ -0,0 +1,1016 @@ + + + + + + styleguide + + + + + + + + +
+

Print First CSS: Styleguide

+ +

A brief intro to Markdown and how to write • @badlydrawnrob

+ + + + + + +

CommonMark

+ +

Headers

+
# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+Alternatively, for H1 and H2, an underline-ish style:
+
+Alt-H1
+======
+
+Alt-H2
+------
+ +

Emphasis

+
Emphasis, aka italics, with *asterisks* or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or __underscores__.
+
+Combined emphasis with **asterisks and _underscores_**.
+ +

Lists

+
1. One
+2. Two
+3. Three
+
+- Lists
+- Lists
+- Lists
+    + Can also use
+    * These characters
+ + +
[Link](http://a.com)
+ +

Images

+
![Image](http://url/a.png)
+ +

Blockquotes

+
> I don't think that you have any insight whatsoever into your <mark>capacity for good</mark> ... [My notes on the original quote or 'sic' spelling mistake] until you have some well-developed <i>insight into your capacity</i> for evil. <cite>(Jordan Peterson, pg.148, my italics)</cite>
+ +

Code

+
`Inline code` with backticks
+ +

Inline code with backticks

+ +

Blocks of code are surrounded by lines of 3 backticks:

+
```python
+# code block
+print('3 backticks or')
+print('indent 4 spaces')
+```
+ +

Tables

+ +

You can optionally add pipes | either side of table

+
size | material     | color
+---- | ------------ | ------------
+9    | leather      | brown
+10   | hemp canvas  | natural
+11   | glass        | transparent
+ +

 Horizontal rules

+ +

Use sparingly

+
---
+***
+ +

HTML elements supported

+ +

It can be a little confusing when to use each specific tag, so as a rough guide:

+ +

Highlighting importance

+ + + +

Highlighting presentation

+ +
    +
  1. b: Bring attention to + +
      +
    • Presentational: indicate keywords or highlighted passages
      • +
    • Don’t use when: indicating stressed importance within a sentence. Use strong instead
      • +
    2. +
  2. i: Offset from normal text + +
      +
    • Technical details, foreign language phrases, a characters thoughts, names [possibly], places [possibly]
      • +
    • Don’t use when: indication stress that changes the tone of the sentence. Use em instead
      • +
    3. +
  3. mark: Highlighted for reference or notation + +
      +
    • A q or blockquote to comment or reference a passage
      • +
    • In context app use (i.e. search term)
      • +
    4. +
  4. s, del, ins: Changes in relevance, or an edited passage
    5. +
  5. span: Visually change for decoration purposes with css
    6. +
+ +

Highlighting technical elements

+ +
    +
  1. abbr: Abbreviation or acronym
    2. +
  2. kbd: Denotes textual user input from a keyboard
    3. +
  3. Potentially useful: + +
    4. +
+ +
+ + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 69c81cd..5e9784d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "print-first-css", - "version": "3.0.0-beta.3", + "version": "3.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 61a919c..466f499 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "print-first-css", - "version": "3.0.0-beta.3", + "version": "3.0.0", "description": "A simple starting point for typographic css projects", "main": "style/main.less", "scripts": { @@ -8,7 +8,6 @@ "css": "npx lessc source/style/main.less ./build/style/print-first.css", "css-markdown": "npx lessc source/style/markdown.less ./build/style/print-first-markdown.css", "styleguide": "pandoc --template=./source/pandoc/template.html -c ../style/print-first-markdown.css ./source/markdown/partials/*md ./source/markdown/partials/00-metadata.yaml -s -o ./build/markdown/partials.html", - "prebuild": "mkdir -p build/ build/style build/markdown", "build": "npm run css && npm run css-markdown", "postbuild": "echo Print First CSS: successfully compiled!" @@ -28,4 +27,4 @@ "less": "^3.9.0", "normalize.css": "^8.0.1" } -} \ No newline at end of file +} diff --git a/source/markdown/specimen.md b/source/markdown/specimen.md index 4aba424..f778b7d 100644 --- a/source/markdown/specimen.md +++ b/source/markdown/specimen.md @@ -1,165 +1,59 @@ --- -Title: Print First CSS: Specimen -Author: Rob McDonald -Comment: An overview of Markdown syntax supported - along with look and feel -CSS: ../../stylus/print-first-markdown.css +title: Print First CSS: Specimen +subtitle: A look at how real-world writing might work together +author: @badlydrawnrob +Marked Style: print-first-markdown --- # [%title] +[%subtitle] • [%author] -## Contents -1. [CommonMark](#CommonMark) -2. [Preview](#preview) -3. [HTML elements supported](#htmlelementssupported) -## CommonMark -### Headers - -```text # H1 -## H2 -### H3 -#### H4 -##### H5 -###### H6 - -Alternatively, for H1 and H2, an underline-ish style: - -Alt-H1 -====== - -Alt-H2 ------- -``` - -### Emphasis - -```text -Emphasis, aka italics, with *asterisks* or _underscores_. - -Strong emphasis, aka bold, with **asterisks** or __underscores__. - -Combined emphasis with **asterisks and _underscores_**. -``` - - -### Lists - -```text -1. One -2. Two -3. Three - -- Lists -- Lists -- Lists - + Can also use - * These characters -``` - - -### Links - -```text -[Link](http://a.com) -``` - - -### Images - -```text -![Image](http://url/a.png) -``` - - -### Blockquotes - -```text -> I don't think that you have any insight whatsoever into your capacity for good ... [My notes on the original quote or 'sic' spelling mistake] until you have some well-developed insight into your capacity for evil. (Jordan Peterson, pg.148, my italics) -``` - - -### Code - -```text -`Inline code` with backticks -``` - -`Inline code` with backticks - -Blocks of code are surrounded by lines of 3 backticks: - -````text -```python -# code block -print('3 backticks or') -print('indent 4 spaces') -``` -```` - - -### Tables -You can optionally add pipes `|` either side of table +Lorem ipsum dolor _sit amet_, consectetur **adipiscing elit**. Proin tempus accumsan lectus, non imperdiet purus condimentum sit amet. Aenean dapibus aliquam rhoncus. Nulla ut **tortor vulputate, _bibendum mauris_ nec**, finibus lacus. -```text -size | material | color ----- | ------------ | ------------ -9 | leather | brown -10 | hemp canvas | natural -11 | glass | transparent -``` -### Horizontal rules -Use sparingly +## H2 -```text ---- -*** -``` +Etiam a justo placerat, bibendum diam vitae, semper odio. [Pellentesque cursus](#) auctor augue, vel consectetur urna sagittis vel. Duis condimentum, tortor a placerat efficitur, nisi est eleifend nunc, ac lobortis quam est vel quam. +<<[partials/02-lists-ol.md] -## Preview +### H3 -In context, with additional html5 tags [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr), +Integer facilisis eros et risus consequat lobortis. Cras vel dignissim enim, ut laoreet dui. -# H1 +<<[partials/03-lists-ul.md] -Lorem ipsum dolor _sit amet_, consectetur **adipiscing elit**. Proin tempus accumsan lectus, non imperdiet purus condimentum sit amet. Aenean dapibus aliquam rhoncus. Nulla ut **tortor vulputate, _bibendum mauris_ nec**, finibus lacus. -## H2 -Etiam a justo placerat, bibendum diam vitae, semper odio. [Pellentesque cursus](#) auctor augue, vel consectetur urna sagittis vel. Duis condimentum, tortor a placerat efficitur, nisi est eleifend nunc, ac lobortis quam est vel quam. - -{{partials/lists-ol.md}} -### H3 +#### H4 -Integer facilisis eros et risus consequat lobortis. Cras vel dignissim enim, ut laoreet dui. +Nulla sit amet enim blandit, `imperdiet lorem` ac, lobortis orci. Aenean mollis dui tortor, eget consectetur mauris congue nec. [Aenean iaculis ut quam eget](#) non blandit mi ipsum at libero hendrerit. Vestibulum in lacus sed turpis sodales congue in et risus. Sed vitae pharetra neque. Sed nisi ligula, tempus ac massa at, volutpat sagittis massa. Praesent placerat congue velit, at tincidunt neque accumsan sit amet. -{{partials/lists-ul.md}} +<<[partials/05-blockquote.md] -#### H4 -Nulla sit amet enim blandit, `imperdiet lorem` ac, lobortis orci. Aenean mollis dui tortor, eget consectetur mauris congue nec. [Aenean iaculis ut quam eget](#) non blandit mi ipsum at libero hendrerit. Vestibulum in lacus sed turpis sodales congue in et risus. Sed vitae pharetra neque. Sed nisi ligula, tempus ac massa at, volutpat sagittis massa. Praesent placerat congue velit, at tincidunt neque accumsan sit amet. -{{partials/blockquote.md}} ##### H5 Sed nisi ligula, tempus ac massa at, `volutpat sagittis` massa. Praesent placerat congue velit, at tincidunt neque accumsan sit amet. -{{partials/pre.md}} -{{partials/code.md}} +<<[partials/07-pre.md] +<<[partials/06-code.md] + + ###### H6 @@ -169,56 +63,5 @@ Aliquam feugiat velit sed nisl tempor lobortis. Cras convallis, lectus vel ultricies vestibulum, est sapien faucibus purus, non blandit mi ipsum at libero. Cras bibendum dolor eget justo aliquet, sit amet mollis libero volutpat. Vivamus et elementum lacus, eget feugiat ex. Nulla facilisi. -{{partials/pre.md}} -{{partials/pre.md}} - - - - - - -## HTML elements supported - -It can be a little confusing when to use each specific tag, so as a rough guide: - -### Highlighting importance - -- `strong`: [Strong importance, seriousness or urgency](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) - - Does not change the meaning of the sentence -- `em`: Stressed, emphasis on a word or sentence - - Changes the meaning of the sentence (Cats _are_ cute) - - A _comparison_ can also be called _compare_ -- `q`: Inline quotations ([some examples](https://academiccoachingandwriting.org/academic-writing/resources/citations)) -- `blockquote`: Long-form quotations (some examples [here](https://academiccoachingandwriting.org/academic-writing/resources/citations) and [here](https://library.leeds.ac.uk/info/1402/referencing/50/leeds_harvard_style/4)) - - Should probably be [_limited_ to lines of text `> 3`](https://writingcommons.org/format/apa/675-block-quotations-apa) — and do they have to be indented? - - `blockquote` > `mark`: - - Highlight interesting parts of original text - - `blockquote` > `i`: - - Character thoughts, replaced/inserted text -- `cite`: [A book, research paper, essay or reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite) - - To reference the source material - - Can be used within a paragraph or a `blockquote` - -### Highlighting presentation - -1. `b`: [Bring attention to](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) - - Presentational: indicate keywords or highlighted passages - - Don't use when: indicating stressed importance within a sentence. Use `strong` instead -2. `i`: [Offset from normal text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) - - Technical details, foreign language phrases, a characters thoughts, names [possibly], places [possibly] - - Don't use when: indication stress that changes the tone of the sentence. Use `em` instead -3. `mark`: [Highlighted for reference or notation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) - - A `q` or `blockquote` to comment or reference a passage - - In context app use (i.e. search term) -4. `s`, `del`, `ins`: [Changes in relevance, or an edited passage](http://html5doctor.com/ins-del-s/) -5. `span`: Visually change for decoration purposes with css - - -### Highlighting technical elements - -1. `abbr`: [Abbreviation or acronym](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr) -2. `kbd`: [ Denotes textual user input from a keyboard](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd) -3. **Potentially useful:** - - `samp`: [Output from computer program](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp) - - Can be used with `kbd` to denote instructions - - `details`: [Expanding item blocks](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) +<<[partials/07-pre.md] +<<[partials/07-pre.md] \ No newline at end of file diff --git a/source/markdown/styleguide.md b/source/markdown/styleguide.md new file mode 100644 index 0000000..f1fa313 --- /dev/null +++ b/source/markdown/styleguide.md @@ -0,0 +1,175 @@ +--- +title: Print First CSS: Styleguide +subtitle: A brief intro to Markdown and how to write +author: @badlydrawnrob +Marked Style: print-first-markdown +--- + + +# [%title] +[%subtitle] • [%author] + + + + + + +## CommonMark + + +### Headers + +```text +# H1 +## H2 +### H3 +#### H4 +##### H5 +###### H6 + +Alternatively, for H1 and H2, an underline-ish style: + +Alt-H1 +====== + +Alt-H2 +------ +``` + + +### Emphasis + +```text +Emphasis, aka italics, with *asterisks* or _underscores_. + +Strong emphasis, aka bold, with **asterisks** or __underscores__. + +Combined emphasis with **asterisks and _underscores_**. +``` + + +### Lists + +```text +1. One +2. Two +3. Three + +- Lists +- Lists +- Lists + + Can also use + * These characters +``` + + +### Links + +```text +[Link](http://a.com) +``` + + +### Images + +```text +![Image](http://url/a.png) +``` + + +### Blockquotes + +```text +> I don't think that you have any insight whatsoever into your capacity for good ... [My notes on the original quote or 'sic' spelling mistake] until you have some well-developed insight into your capacity for evil. (Jordan Peterson, pg.148, my italics) +``` + + +### Code + +```text +`Inline code` with backticks +``` + +`Inline code` with backticks + +Blocks of code are surrounded by lines of 3 backticks: + +````text +```python +# code block +print('3 backticks or') +print('indent 4 spaces') +``` +```` + + +### Tables + +You can optionally add pipes `|` either side of table + +```text +size | material | color +---- | ------------ | ------------ +9 | leather | brown +10 | hemp canvas | natural +11 | glass | transparent +``` + + +### Horizontal rules + +Use sparingly + +```text +--- +*** +``` + + + + +## HTML elements supported + +It can be a little confusing when to use each specific tag, so as a rough guide: + +### Highlighting importance + +- `strong`: [Strong importance, seriousness or urgency](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) + - Does not change the meaning of the sentence +- `em`: Stressed, emphasis on a word or sentence + - Changes the meaning of the sentence (Cats _are_ cute) + - A _comparison_ can also be called _compare_ +- `q`: Inline quotations ([some examples](https://academiccoachingandwriting.org/academic-writing/resources/citations)) +- `blockquote`: Long-form quotations (some examples [here](https://academiccoachingandwriting.org/academic-writing/resources/citations) and [here](https://library.leeds.ac.uk/info/1402/referencing/50/leeds_harvard_style/4)) + - Should probably be [_limited_ to lines of text `> 3`](https://writingcommons.org/format/apa/675-block-quotations-apa) — and do they have to be indented? + - `blockquote` > `mark`: + - Highlight interesting parts of original text + - `blockquote` > `i`: + - Character thoughts, replaced/inserted text +- `cite`: [A book, research paper, essay or reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite) + - To reference the source material + - Can be used within a paragraph or a `blockquote` + +### Highlighting presentation + +1. `b`: [Bring attention to](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) + - Presentational: indicate keywords or highlighted passages + - Don't use when: indicating stressed importance within a sentence. Use `strong` instead +2. `i`: [Offset from normal text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) + - Technical details, foreign language phrases, a characters thoughts, names [possibly], places [possibly] + - Don't use when: indication stress that changes the tone of the sentence. Use `em` instead +3. `mark`: [Highlighted for reference or notation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) + - A `q` or `blockquote` to comment or reference a passage + - In context app use (i.e. search term) +4. `s`, `del`, `ins`: [Changes in relevance, or an edited passage](http://html5doctor.com/ins-del-s/) +5. `span`: Visually change for decoration purposes with css + + +### Highlighting technical elements + +1. `abbr`: [Abbreviation or acronym](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr) +2. `kbd`: [ Denotes textual user input from a keyboard](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd) +3. **Potentially useful:** + - `samp`: [Output from computer program](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp) + - Can be used with `kbd` to denote instructions + - `details`: [Expanding item blocks](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)