A beautiful, usable, responsive MediaWiki skin with in-depth extension support. Originally developed for the Star Citizen Wiki.
Go to file
alistair3149 6e35212007 refactor(core): clean up search box implementation
* Clean up DOM structure
* Clean up HTML classes
* Use relative units
* Remove unnessecary CSS
2022-05-10 10:52:36 -04:00
.github chore(ci): changed-files should compare to remote 2022-04-30 18:09:27 -04:00
.husky chore: enforce conventional commit at git commit 2022-04-26 12:06:20 -04:00
bin Force phpcbf to exit with 0 2019-12-30 19:04:02 -05:00
i18n refactor(core): clean up drawer implementation 2022-05-10 10:52:36 -04:00
includes refactor(core): clean up drawer implementation 2022-05-10 10:52:36 -04:00
licenses Remove Titillium Web font 2020-08-12 12:59:56 -04:00
resources refactor(core): clean up search box implementation 2022-05-10 10:52:36 -04:00
skinStyles ci: lint code to MediaWiki standards 2022-05-08 07:04:52 +00:00
templates refactor(core): clean up search box implementation 2022-05-10 10:52:36 -04:00
.commitlintrc.json chore: enforce conventional commit at git commit 2022-04-26 12:06:20 -04:00
.eslintignore refactor: convert skins.citizen.scripts.toc to ES6 2021-04-21 15:07:55 -04:00
.eslintrc.json feat: implement reading preferences 2021-04-27 13:51:03 -04:00
.gitignore Improve CI and code clean up (#143) 2020-06-16 22:49:41 -04:00
.phpcs.xml chore: update linter config 2021-01-06 19:28:39 -05:00
.stylelintignore Improve CI and code clean up (#143) 2020-06-16 22:49:41 -04:00
.stylelintrc.json ci: disable font-size px check 2021-06-20 02:13:28 -04:00
.svgo.config.js build: update svgo to 2.2.2 2021-04-17 20:40:20 -04:00
.versionrc.json chore: standard-version should also bump skin.json 2022-04-28 16:15:24 -04:00
CHANGELOG.md chore(release): 1.15.0 2022-05-01 22:55:37 -04:00
citizen.php Make a dinner reservation - MediaWiki CI 2020-06-17 02:56:40 +00:00
CODE_OF_CONDUCT.md Add documentation to the skin 2019-12-21 00:56:15 -05:00
composer.json build(deps-dev): update mediawiki/mediawiki-codesniffer requirement (#451) 2022-05-09 03:03:18 -04:00
jsdoc.json ci: lint code to MediaWiki standards 2021-04-18 00:41:13 +00:00
LICENSE licensing update 2019-08-16 21:48:16 -04:00
package-lock.json build(deps-dev): bump husky from 8.0.0 to 8.0.1 (#452) 2022-05-10 00:18:57 -04:00
package.json build(deps-dev): bump husky from 8.0.0 to 8.0.1 (#452) 2022-05-10 00:18:57 -04:00
README.md refactor(core): clean up drawer implementation 2022-05-10 10:52:36 -04:00
skin.json refactor(core): clean up search box implementation 2022-05-10 10:52:36 -04:00

Citizen

License: GPL v3 MediaWiki: >=1.35.0

Citizen is a responsive skin for MediaWiki built by the Star Citizen Wiki team. Although it is specifically built for the Star Citizen Wiki, the skin is designed to be flexible to run on any Mediawiki installation that is 1.35.2 or higher. Due to resource constraints, we might not be able to provide full support for setups that are vastly different than us, but please feel free to submit patches or bug report!

Live demo can be seen at the Star Citizen Wiki, more avaliable here.

Notable features

  • Fully responsive skin: Responsive and able to adapt to different screen sizes. 📱💻🖥️
  • Light/dark mode support: Switch between light and dark mode. Require JS ☀️🌙
  • Adjustable font size and page width: Read the article the way you wanted. Require JS 👀📃
  • Collapsible sections: Collapse and expand article sections. Require JS 📖📕
  • Persistent ToC: Access ToC anywhere in the article. Tracking require JS 🔍📖
  • Rich search suggestions: More helpful search suggestions with images and descriptions. Require JS 🔍👀
  • Webapp manifest: Give a more app-like experience when user add your wiki to their home screen. 📱

SkinStyles

Citizen includes numerous skinStyles that applies custom styling to extensions and core libraries. Please feel free to submit PRs if you want to add support for more extensions! Unless the extension has never supported the current minimum required MediaWiki version of the skin, the skinStyles are based on the latest version of the said MW release branch (e.g. REL1_35 for MediaWiki 1.35).

  • Grade A - Overhaul - Major adjustments to UI, plus Grade B.
  • Grade B - Dynamic - Colors are converted into CSS variables, little to none style adjustments.
  • Grade E - Legacy - Dark mode colors are hardcored as LESS variables. These should be updated to at least Grade B support.

Core

Name Grade Version Last updated
MediaWiki UI B 1.35.3 2021-07-27
OOUI B 0.39.3 086b4f1 2021-07-26

Extensions

Name Grade Version Last updated
AdvancedSearch B REL1_35 fae6250 2021-08-26
ApprovedRevs B N/A N/A
Babel B MLEB 2021.07 2021-07-29
Capiunto B REL1_35 30049a7 2021-08-26
Cargo B REL1_35 df13273 2021-08-31
CategoryTree B N/A N/A
Cite A N/A N/A
CleanChanges B MLEB 2021.07 2021-07-29
CodeMirror A REL1_35 a326407 2021-08-25
CookieWarning A REL1_35 3c2ae6a 2022-04-29
DiscussionTools A REL1_35 7aa0a9b 2022-05-06
DismissableSiteNotice A N/A N/A
Echo A REL1_35 347c30e 2021-08-11
Flow (StructuredDiscussions) B REL1_35 e3379f0 2022-04-27
Graph B N/A N/A
Lingo B REL1_35 e948775 2022-04-29
MsUpload A REL1_35 32eb420 2021-08-25
MultimediaViewer A N/A N/A
OAuth B REL1_35 451ed95 2021-08-31
Popups A REL1_35 dccd607 2021-09-02
PortableInfobox B 0.6 16a77dc 2022-04-14
RelatedArticles A REL1_35 0f27333 2021-08-31
Semantic MediaWiki E N/A N/A
Semantic Result Formats E N/A N/A
SimpleTooltip B N/A 2022-02-19
SyntaxHighlight A REL1_35 05598b3 2021-08-26
Tabber A N/A N/A
TabberNeue A 1.3.1 c045490 2022-04-19
TimedMediaHandler B N/A N/A
Translate B MLEB 2021.07 2021-07-29
UniversalLanguageSelector B MLEB 2021.07 2021-07-29
UploadWizard A N/A N/A
VisualEditor A REL1_35 cc3466a 2021-08-04
WikiEditor B REL1_35 e18315e 2021-08-11
WSSearchFront B 3.5.4 c27ebcb5 2021-11-23

Some of the field are tagged as N/A because the information was not tracked before. If you are interested in adding skinstyles, please check out this page on the wiki!

Installation

  1. Download place the file(s) in a directory called Citizen in your skins/ folder.
  2. Add the following code at the bottom of your LocalSettings.php:
wfLoadSkin( 'Citizen' );
  1. ✔️Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Configurations

The skin works out of the box without any configurations. The config flags allow more customization on the specific features in the skin. Check out this wiki page on how to adapt Citizen styles on your wiki.

Appearance

Name Description Values Default
$wgCitizenThemeDefault The default theme of the skin auto - switch between light and dark according to OS/browser settings; light; dark auto
$wgCitizenEnableCollapsibleSections Enables or disable collapsible sections on content pages true - enable; false - disable true
$wgCitizenShowPageTools The condition of page tools visibility true - always visible; login - visible to logged-in users; permission - visible to users with the right permissions true
$wgCitizenEnableDrawerSiteStats Enables the site statistics in drawer menu true - enable; false - disable true
$wgCitizenPortalAttach Label of the portal to attach links to upload and special pages to string first
$wgCitizenThemeColor The color defined in the theme-color meta tag Hex color code #131a21

Search suggestions

Name Description Values Default
$wgCitizenEnableSearch Enable or disable rich search suggestions true - enable; false - disable true
$wgCitizenSearchGateway Which gateway to use for fetching search suggestion mwActionApi; mwRestApi mwActionApi
$wgCitizenSearchDescriptionSource Source of description text on search suggestions (only takes effect if $wgCitizenSearchGateway is mwActionApi) wikidata - Use description provided by WikibaseLib or ShortDescription; textextracts - Use description provided by TextExtracts; pagedescription - Use description provided by Description2 or any other extension that sets the description page property textextracts
$wgCitizenMaxSearchResults Max number of search suggestions Integer > 0 6

Webapp manifest

Name Description Values Default
$wgCitizenEnableManifest Enable or disable web app manifest true - enable; false - disable true
$wgCitizenManifestThemeColor Theme color of the web app manifest Hex color code #131a21
$wgCitizenManifestBackgroundColor Background color of the web app manifest Hex color code #131a21

Miscellaneous

Name Description Values Default
$wgCitizenEnablePreconnect Enable or disable preconnect to required origin true - enable; false - disable false
$wgCitizenPreconnectURL The URL for preconnect to required origin URL
$wgCitizenThemeColor The color defined in the theme-color meta tag Hex color code #11151d

Requirements

  • MediaWiki 1.35.2 or later
  • For the legacy versions, check the other release branches.