Project:Website/Tyrian/Version 2/Motivation

From Gentoo Wiki
Jump to:navigation Jump to:search

The old Tyrian

The old Tyrian design is based on Bootstrap 3 and compiled into one big css file, namely tyrian.css. All files are available through assets.gentoo.org:

Consequently the css code is currently embedded into Gentoo websites in the header and a typical Gentoo website looks like this: 

<head>
  ...
  <link href="https://assets.gentoo.org/tyrian/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="https://assets.gentoo.org/tyrian/tyrian.min.css" rel="stylesheet" media="screen">
  <link href="custom.css" rel="stylesheet" media="screen">  
  ...
</head>

whereas custom.css is website specific css code to extend or modify the Tyrian base layout to match website specific needs.

Where it falls short

  1. We are still using Boostrap 3
    • we thus cannot use many modern features as flexbox or the like
  2. We cannot access the source code of Tyrian
    • we cannot make use of the preprocessor features (less or scss)
  3. We have duplicate code in different locations
    • whenever something is not included in tyrian.css
    • in the worst case they start to diverge
  4. We use one large compiled css file
    • no matter whether we need all of the styles defined in there for all websites

The new Tyrian

Tyrian has been migrated to Bootstrap 4. While doing so, three main changes have been introduced, to solve the problems of the old version:

  1. Tyrian is now based on Bootstrap 4
  2. Tyrian is now available as npm module
  3. Tyrian now consists of different layers

Tyrian is now based on Bootstrap 4

Bootstrap 4 is a major rewrite of the whole project and can finally be used. For more information please see [1]. The source code of the Tyrian version based on Bootstrap 4 is available at [2].

Tyrian is now available as npm module

Tyrian is available as npm-module now (see [3]), which contains both the scss-source code and the compiled css files. Apart from the npm-module, a compiled version will be available through the new CloudFront CDN. This gives us three different ways to use Tyrian in future:

Option 1) Using the source code using npm
Tyrian can be install using npm and the sass-source code can be used, overwritten and extended.
> This option offers the greatest flexibility.
Option 2) Using the compiled css using npm
As the npm module contains the compiled css code as well, it is also possible to directly use it, whenever no css preprocessor should be used.
> While is option doesn't provide as much flexibility as the first option, it is still possible to install a specific version of the Tyrian module (as opposed to the third option). Furthermore no compilation is necessary.
Option 3) Using the compiled css using the CDN
The latest version of Tyrian will also be available as compile css files through the new Cloudfront CDN.
> This option is the easiest way, as npm isn't required at all and it can be used the same way as Tyrian was included before.

Tyrian now consists of different layers

Tyrian will consist of different layers in future. The base layer will only contain basic stylesheets which are shared among all websites. Apart from that, specific layers will contain features which are shared among some, but not all websites. A 'sticky table of contents' is an example of such a layer.

All of the specific layers can be installed the same way as the base layer as discussed in the previous section.

Retrieved from "https://wiki.gentoo.org/index.php?title=Project:Website/Tyrian/Version_2/Motivation&oldid=1271303"