Thema Gallery

Stencila

Thema provides semantic themes for use with Stencila’s Encoda. Themes are designed to be customizable, or you can make one from scratch.

  1. StencilaStencila

      stencila

      A theme reflecting Stencila's brand and design system. It is based on the Skeleton theme, and demonstrates how to customize a theme using CSS variables.

      View demo & customize

    1. StencilaTufte

        tufte

        A theme inspired by the books and handouts of Edward Tufte. It is based on the Tufte CSS project created by Dave Liepmann.

        View demo & customize

      1. eLifeeLife

          elife

          A theme for the journal eLife.

          View demo & customize

        1. StencilaNature

            nature

            A theme for the journal Nature.

            View demo & customize

          1. StencilaWilmore

              wilmore

              A theme well suited for consuming long-form manuscripts and prose. Named after Edmond Dantés' alias, “Lord Wilmore: An Englishman, and the persona in which Dantès performs random acts of generosity.“

              View demo & customize

            1. StencilaPLoS

                plos

                A theme for the journal PLoS.

                View demo & customize

              1. StencilaSkeleton

                  skeleton

                  A theme with lots of bones but no flesh. Designed to be used as a starting point for creating new themes, it tries to be as unopinionated as possible.

                  It demonstrates how to use the custom semantic selectors, but the theme only styles a handful of them. For a full and up to date list of all available selectors, please see ../../selectors.css

                  To create a new theme using skeleton, simply duplicate this folder, rename it to your theme‘s name and run npm run generate:themes.

                  View demo & customize

                1. StencilaBootstrap

                    bootstrap

                    A theme that pulls itself up using Twitter's Bootstrap toolkit.

                    Designed as an illustration of a theme built entirely using an existing CSS stylesheet. Being an illustrative theme, it:

                    • includes gratuitous use of Bootstrap components
                    • does not use an styles or mixins from the shared folder.

                    For real theme, you probably don't want to do either of these things. See styles.css and index.ts for further comments.

                    View demo & customize

                  1. StencilaF1000

                      f1000

                      A theme for the journal F1000Research.

                      View demo & customize

                    1. StencilaGalleria

                        galleria

                        A theme for galleries of CreativeWork nodes.

                        This theme builds on the stencila theme to target Article documents where the main content is a List of CreativeWorks, each having properties such as title, author, and publisher and usually, but not necessarily a MediaObject, such as a thumbnail image of the work. Use cases include a presenting a list of other articles, or a gallery of images or videos.

                        View demo & customize

                      1. StencilaGiga

                          giga

                          A theme for the "Giga" journals GigaScience and GigaByte.

                          View demo & customize

                        1. StencilaLatex

                            latex

                            Inspired by the look of traditional scientific manuscripts witten using LaTeX. This theme uses LatexCSS developed by David Zollikofer.

                            View demo & customize

                          1. StencilaRPNG

                              rpng

                              A theme for reproducible PNGs (rPNGs). This theme is used in Encoda when generating rPNGs.

                              Notes

                              • This theme is used for parts of documents e.g. MathBlocks, CodeFragments in different contexts that the demo pages here. e.g. in a Google Doc
                              • In the future, if necessary, we may have different RPNG themes for those different contexts.
                              • Currently the preview of this theme in the demo is broken because it pulls in the stencila Web Components. You can disable those temporarily by removing those by removing the two relevant <script> tags in src/index.html.

                              View demo & customize