Skip to content

Tips and recommendations

Jump to bottom
Zulko edited this page Mar 25, 2018 · 3 revisions

Recommended file organization

A typical ReLaXed project may look as follows:

my_document/
├── my_document.pug
├── my_document.scss
├── theme.scss
└── assets/
    ├── images/
    └── diagrams/

Where the main file my_document.pug looks as follows:

h1 My document's title
img(src='assets/images/image1.png')

style
  include:scss my_document.scss

The optional theme.scss file would contain styling elements that are being reused between projects (if you want your different reports or presentations to have the same style). When using a theme, my_document.scss would look as follows:

@import 'theme.scss'

/* Then any styles that are particular to this project */
html { font-family: Helvetica}

Recommended editing software

ReLaxed can be used on any computer as long as you have

  • A text editor to edit the different files of your project.
  • A PDF viewer to review the final document.

Additional features can improve significantly the editing experience, such as syntax highlighting to make source files easier to read, and a PDF viewer which auto-refreshes the document when it is modified by ReLaXed.

We next describe a setup with the Atom editor. Similar descriptions for other modern editors, such as Visual Studio, are welcome.

Ideal setup for the Atom editor

Atom provides a fully integrated development environment for ReLaXed projects, gathering in the same interface the syntax-highlighted source files of the project, a terminal running ReLaXed, a PDF previewer, project management, and a HTML previewer which can be useful to debug your CSS code.

However, these features require to install the Atom plug-ins listed below.

Project Management: project-manager enables to save directories as project, making it easy to switch between different documents in progress.

Terminal: using platformio-ide-terminal you can open/close a terminal in Atom simply by pressing Ctrl+` .

Syntax highlighting: language-pug, language-scss, language-markdown provide syntax highlighting for these languages.

PDF Preview with pdf-view, which enables to open PDFs in Atom, and has a neat auto-refresh feature.

HTML Preview: atom-html-preview enables to preview the HTML file produced by ReLaXed, to troubleshoot documents. Right-click+Inspect Element on the preview gives the Chrome interactive developer console to explore the CSS properties of the different elements.

You can install all packages at once from the terminal:

apm install platformio-ide-terminal project-manager pdf-view atom-html-preview language-pug language-markdown language-scss
Clone this wiki locally