Allow full-width images, tables and code snippets
The <img> element, within or not the <figure> element, has a width of 600px on large screens. Authors may want to show images of different width, this is a style change and Rapido does not introduce different styles for the same semantic element. CSS classes are out of scope, therefore authors must opt for a customisation.
Rapido can, and should, simplify customisations as much as possible. Authors may assign a custom width to tables, code snippets, images and videos in the article sections, header and footer with <img src="..." style="width: 100%">.
<section>
...
<figure>
<img src="..." style="width: 100%">
<figcaption>
...
</figcaption>
</figure>
...
</section>
<section>
...
<img src="..." style="width: 100%">
...
</section>
The previous snippets work also in the header and footer.
Force the use of the <article> element
There was an inconsistency in the file rapido.css: some rules started with .rapido and others with article.rapido. We replaced .rapido occurrences with article.rapido and fixed some issues coming from the different specificity between the old rule and the new one. Now authors must assign class rapido to the <article> element.
<article class="rapido">
<section>
<h1>...</h1>
<p>...</p>
</section>
</article>
Docs update
Docs now points to a specific version of rapido.css, this prevents to introduce breaking changes of major releases. Users should switch to a new major release carefully, reading release notes and looking at the final result on their published documents.
In the docs, we used the semver range https://unpkg.com/@nextbitlabs/rapido@^3/rapido.css for targeting versions >=3.0.0 <4.0.0. Moreover, we mentioned how to install Rapido with npm.
Commits
- close #126 | describe how to install with npm cbf9dea
- close #127 | point to a specific version of Rapido in the documentation 3c86792
- close #130 | force the use of the article element e9899a0
- close #132 | bug with avatar image 539d1a7
- close #135 | review header text 908d085
- close #128 | mention why CSS classes are out of scope b8d6fa5
- close #124 | add style for h3 headings 702d1ee
- close #116 | encourage to explicitly wrap sections in elements a105da3
- close #123 | remove images no longer used in the documentation cae81ef
- close #3 | add section customisation a18fd87
- close #120 | Allow full width images, tables and code snippets. 3ed6431
- close #27 | use the img element as child of the section element 05714e9