Zulko 6 years ago
parent
commit
a5b4af7451
  1. 32
      README.md
  2. 4
      examples/book/README.md
  3. 2
      examples/book/book.scss
  4. 6
      examples/business-card/README.md
  5. 3
      examples/letter/README.md
  6. 5
      examples/paper/README.md
  7. 7
      examples/report/README.md
  8. 3
      examples/resume/README.md
  9. 13
      examples/slides/README.md

32
README.md

@ -2,28 +2,27 @@
This repository contains various examples of PDF documents written with [ReLaXed](https://github.com/RelaxedJS). It demonstrates how the Pug and SCSS languages can be advantageously used to create a wide variety of reusable document layouts while keeping a clarity of the source close to Markdown.
<table>
<tr align="center">
<td>
<td width="25%">
<img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/book/book_screenshot.png" />
Book -
<a href="https://github.com/RelaxedJS/ReLaXed-examples/tree/master/examples/book/"> source </a> /
<a href="https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/book/book.pdf"> PDF </a>
</td>
<td>
<td width="25%">
<img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/letter/letter_screenshot.png" />
Letter -
<a href="https://github.com/RelaxedJS/ReLaXed-examples/tree/master/examples/letter/"> Source </a> /
<a href="https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/letter/letter.pdf"> PDF </a>
</td>
<td>
<td width="25%">
<img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/resume/resume_screenshot.png" />
Resume -
<a href="https://github.com/RelaxedJS/ReLaXed-examples/tree/master/examples/resume/"> Source </a> /
<a href="https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/resume/resume.pdf"> PDF </a>
</td>
<td>
<td width="25%">
<img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/business-card/businesscard_screenshot.png" />
Visit card -
<a href="https://github.com/RelaxedJS/ReLaXed-examples/tree/master/examples/business-card/"> Source </a> /
@ -31,3 +30,26 @@ This repository contains various examples of PDF documents written with [ReLaXed
</td>
</tr>
</table>
<table>
<tr align="center">
<td width="25%">
<img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/slides/slides_screenshot.png" />
Slides -
<a href="https://github.com/RelaxedJS/ReLaXed-examples/tree/master/examples/slides/"> Source </a> /
<a href="https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/slides/slides.pdf"> PDF </a>
</td>
<td width="25%">
<img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/report/report_screenshot.png" />
Report -
<a href="https://github.com/RelaxedJS/ReLaXed-examples/tree/master/examples/report/"> Source </a> /
<a href="https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/report/report.pdf"> PDF </a>
</td>
<td width="25%">
<img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/paper/paper_screenshot.png" />
Paper -
<a href="https://github.com/RelaxedJS/ReLaXed-examples/tree/master/examples/paper/"> Source </a> /
<a href="https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/paper/paper.pdf"> PDF </a>
</td>
<td width="25%"></td>
</tr>
</table>

4
examples/book/README.md

@ -2,6 +2,10 @@
This directory contains the sources of a Book written with ReLaXed.
> Master document: [``book.pug``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/book/book.pug). <br/>
Stylesheet: [``book.css``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/book/book.css).
<p align=center><img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/book/book_screenshot.png"/></p>
Some highlights:

2
examples/book/book.scss

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT');
@import 'https://fonts.googleapis.com/css?family=Old+Standard+TT';
$page_width: 4in;
$page_height: 7in;

6
examples/business-card/README.md

@ -0,0 +1,6 @@
# A (lazy) business card made with ReLaXed
> Master document: [``business-card.pug``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/business-card/business-card.pug). <br/>
Stylesheet: [``business-card.css``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/business-card/business-card.css).
<p align=center><img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/business-card/businesscard_screenshot.png"/></p>

3
examples/letter/README.md

@ -2,6 +2,9 @@
This directory contains a sample letter created with ReLaXed.
> Master document: [``letter.pug``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/letter/letter.pug). <br/>
Stylesheet: [``letter.css``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/letter/letter.css).
<p align=center><img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/letter/letter_screenshot.png"/></p>

5
examples/paper/README.md

@ -2,6 +2,11 @@
This directory contains a sample scientific paper edited with ReLaXed.
> Master document: [``paper.pug``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/paper/paper.pug). <br/>
Stylesheet: [``paper.css``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/paper/paper.css).
<p align=center><img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/paper/paper_screenshot.png"/></p>
Some highlights:

7
examples/report/README.md

@ -1,6 +1,11 @@
# PDF Report with ReLaXed
This directory contains a sample report created with ReLaXed. While web-based resumes are increasingly popular, some employers still require a PDF document. PDF CVs can be created from Word or LaTeX templates, HTML/CSS layouts are more diverse and sometimes better looking.
This directory contains a sample report created with ReLaXed.
> Master document: [``report.pug``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/report/report.pug). <br/>
Stylesheet: [``report.css``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/report/report.css).
<p align=center><img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/report/report_screenshot.png"/></p>
Some highlights:

3
examples/resume/README.md

@ -2,6 +2,9 @@
This directory contains a sample resume edited with ReLaXed.
> Master document: [``resume.pug``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/resume/resume.pug). <br/>
Stylesheet: [``resume.css``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/resume/resume.css).
<p align=center><img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/resume/resume_screenshot.png"/></p>
While web-based resumes are increasingly popular, some employers still require a PDF document. PDF CVs can be created from Word or LaTeX templates, HTML/CSS layouts are more diverse and sometimes better looking.

13
examples/slides/README.md

@ -1,11 +1,10 @@
# PDF Resume with Relaxed.JS (mnjul's design)
# PDF slideshow with Relaxed.JS
This directory contains a sample resume edited with ReLaXed. While web-based resumes are increasingly popular, some employers still require a PDF document. PDF CVs can be created from Word or LaTeX templates, HTML/CSS layouts are more diverse and sometimes better looking.
This directory contains a sample slideshow edited with ReLaXed.
In this example, we are converting [this project](https://github.com/mnjul/html-resume), a clean and beautiful HTML CV designed for printing by Min-Zhong "John" Lu (@mnjul on github).
> Master document: [``slides.pug``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/slides/slides.pug). <br/>
Stylesheet: [``slides.css``](https://github.com/RelaxedJS/ReLaXed-examples/blob/master/examples/slides/slides.css).
Some highlights:
<p align=center><img src="https://github.com/RelaxedJS/ReLaXed-examples/raw/master/examples/slides/slides_screenshot.png"/></p>
- Since the resume is composed of *item* sections with similar structures, we define an ``item`` mixin, which makes the final source much less verbose.
- Have a look at the SCSS file: we are stealing all the styling from the internet (Google fonts, Font-Awesome, and of course @mnjul's CSS stylesheet). We only write two lines of specific CSS to fix some glitches in Google Chrome
- It's nice that PDFs don't carry the weight of the CSS/JS libraries they use. The end result has a super-small size (30k)
This example and it's documentation is under construction. It's already usable, but you may come later for more features demos and documentation.
Loading…
Cancel
Save