{"id":15435214,"url":"https://github.com/drptbl/mirage","last_synced_at":"2025-04-11T18:11:07.136Z","repository":{"id":88033483,"uuid":"51669169","full_name":"drptbl/mirage","owner":"drptbl","description":"A modern feeling theme for Jenkins CI server","archived":false,"fork":false,"pushed_at":"2016-01-15T13:50:12.000Z","size":294,"stargazers_count":0,"open_issues_count":0,"forks_count":10,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2025-04-04T09:08:52.698Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drptbl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-13T22:39:02.000Z","updated_at":"2020-03-31T13:35:43.000Z","dependencies_parsed_at":"2023-03-13T18:32:27.039Z","dependency_job_id":null,"html_url":"https://github.com/drptbl/mirage","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drptbl%2Fmirage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drptbl%2Fmirage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drptbl%2Fmirage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drptbl%2Fmirage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drptbl","download_url":"https://codeload.github.com/drptbl/mirage/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248456364,"owners_count":21106603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T18:43:06.126Z","updated_at":"2025-04-11T18:11:07.112Z","avatar_url":"https://github.com/drptbl.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mirage\n\n**This is very much a work in progress! There is still a lot of work to be done in terms of tidying up the CSS and making the theme more configurable**\n\nA modern feeling theme for Jenkins CI server.\n\n### Screenshots\n\n\u003cimg src=\"http://unfinisheddev.com/assets/mirage-dashbord.jpg\" alt=\"Jenkins Dashboard\" /\u003e\n\n\u003cimg src=\"http://unfinisheddev.com/assets/mirage-console-output.jpg\" alt=\"Jenkins Console Output\" /\u003e\n\n\u003cimg src=\"http://unfinisheddev.com/assets/mirage-configure.jpg\" alt=\"Jenkins Configuration Screen\" /\u003e\n\n## Installation in Jenkins\n\nIf you want everybody who accesses your Jenkins server to see this theme you will need access to install plugins and configure the system.\n\n1. Install [Jenkins Simple Theme Plugin](https://wiki.jenkins-ci.org/display/JENKINS/Simple+Theme+Plugin)\n2. Install [jQuery Plugin](https://wiki.jenkins-ci.org/display/JENKINS/jQuery+Plugin)\n2. Upload the `dist/mirage.min.css`, `dist/mirage.min.js` and `logo.png` files to a location that is acceesible over HTTP to all your visitors (the `userContent` directory of your Jenkins install is a simple location for this)\n3. In Jenkins, click \"Manage Jenkins\", then \"Configure System\", then specify the CSS and Javascript URL's for this theme in the Theme section. If you are hosting this theme in `userContent` and using Jenkins default settings, you would enter the following URLs\n\n```\nhttp://\u003cyour-jenkins-url\u003e:8080/userContent/mirage.min.css\nhttp://\u003cyour-jenkins-url\u003e:8080/userContent/mirage.min.js\n```\n\n## Building the Theme\n\nIf you want to make modifications to the theme to better suit your branding or taste, you will need a few tools installed:\n\n* [NodeJS](http://nodejs.org)\n* [Grunt](http://gruntjs.com)\n\nOptionally, if you want to use the Vagrant VM image to preview your changes you will need the following installed:\n\n* [Vagrant](http://vagrantup.com)\n* [VirtualBox](http://virtualbox.org)\n* [Ansible](http://ansible.com)\n\n### Styles\n\nThe CSS is compiled from the sass files in `src/sass`. The master file, `src/sass/mirage.scss` includes all of the required files. If you add a new object or component you will need to ensure you import it in this file.\n\nA large amount of the styling can be modified by updating the values in `src/sass/_settings.scss`. This will allow you to change text colours, background colours, font families \u0026 sizes, etc. You may find that modifying this file gives you all you need for your updates.\n\n#### Import Order\n\nI have tried, where possible to follow the architecture for the styles that [Harry Roberts](https://twitter.com/csswizardry) recommends in [InuitCSS](https://github.com/inuitcss/getting-started) although as I have no control over the markup of Jenkins there are instances where I've had to deviate.\n\n* *Settings*: Global variables, site-wide settings, config switches, etc.\n* *Tools*: Site-wide mixins and functions.\n* *Generic*: Low-specificity, far-reaching rulesets (e.g. resets).\n* *Base*: Unclassed HTML elements (e.g. a {}, blockquote {}, address {}).\n* *Objects*: Objects, abstractions, and design patterns (e.g. .media {}).\n* *Components*: Discrete, complete chunks of UI (e.g. .carousel {}). This is the * one layer that inuitcss doesn’t get involved with.\n* *Trumps*: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .hidden {}).\n\n#### A Note on IDs for CSS Rules\n\nGenerally it is agreed that using IDs for your CSS rules is bad practice. However, as the default Jenkins styles do make heavy use of IDs in their CSS I have also had to in order to match the specificity.\n\n#### Vendor Prefixes\n\nWe use the [Autoprefixer](https://www.npmjs.com/package/autoprefixer) module to add vendor prefixes to our CSS automatically. By default the browsers we'll add prefixes for are defined in the `browserslist` file. If you want to change the supported browsers when you build your CSS you can pass in an environment variable when running Grunt.\n\n```\nBROWSERSLIST=\"\u003e 5%\" grunt watch\n```\n\n### Vagrant Environment\n\nThe Vagrantfile will create a CentOS 7 virtual machine and install Jenkins, the simple theme plugin and jquery plugin.\n\nIt will also syncronise the `./build` directory in the repository to the `/var/lib/jenkins/userContent` directory in the virutal machine, allowing you to easily add the theme to the Jenkins and test updates to the styles and scripts.\n\n#### Ansible\n\nThe Vagrantfile will require [Ansible to be installed](http://docs.ansible.com/ansible/intro_installation.html) and available in the path for the provisioning to run.\n\n## This is *NOT* an Attack on Jenkins\n\nThis theme is not an attack or criticism of Jenkins of the developers of Jenkins in anyway! I've used a number of CI servers and I continue to be impressed how it matches and often beats the features and reliabilty of those others that charge for usage.\n\nI made this theme as a bit of fun and learning opportunity. I hope people like it and use it but this theme is useless without Jenkins, remember that.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrptbl%2Fmirage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrptbl%2Fmirage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrptbl%2Fmirage/lists"}