Skip to content

Replace vendored Bootstrap with a minimal custom stylesheet #652

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hsbt merged 6 commits into from
Jul 26, 2026
Merged

Replace vendored Bootstrap with a minimal custom stylesheet #652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
144c2e5
Reimplement the used Bootstrap subset in application.css
hsbt Jul 26, 2026
2c9f240
Simplify layout markup left over from old Bootstrap versions
hsbt Jul 26, 2026
7990ac8
Remove vendored Bootstrap
hsbt Jul 26, 2026
91d2b00
Drop needless !important flags
hsbt Jul 26, 2026
4837b49
Simplify selectors carried over from the Bootstrap-era stylesheet
hsbt Jul 26, 2026
2d7e3d0
Hoist repeated values into CSS custom properties
hsbt Jul 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 169 additions & 48 deletions app/assets/stylesheets/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,118 +1,239 @@
/* Self-contained styles. The small subset of Bootstrap this site used
(navbar, container, alert, badge, table) is reimplemented below. */

:root {
--navbar-height: 40px;
--border-color: #dee2e6;
--status-ok: #F0FFF0;
--status-fail: #FF9090;
}

*, *::before, *::after {
box-sizing: border-box;
}

body {
padding-top: 50px;
margin: 0;
padding-top: calc(var(--navbar-height) + 10px);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 13px;
line-height: 1.5;
color: #212529;
background-color: #fff;
}

a {
color: #0d6efd;
}

a:hover {
color: #0a58ca;
}

.container-fluid {
width: 100%;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
padding-right: 0.75rem;
padding-left: 0.75rem;
}

/* Navbar */

.navbar {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
height: var(--navbar-height);
background-color: #f8f9fa;
}

.navbar .container-fluid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
height: 100%;
}

.navbar-brand {
font-size: 1.25rem;
color: rgba(0, 0, 0, 0.9);
text-decoration: none;
white-space: nowrap;
}

.navbar-nav {
display: flex;
margin: 0;
padding-left: 0;
list-style: none;
}

.nav-link {
display: block;
padding: 0.5rem;
color: rgba(0, 0, 0, 0.55);
text-decoration: none;
}

.nav-link:hover {
color: rgba(0, 0, 0, 0.7);
}

/* Alert */

.alert {
padding: 1rem;
margin: 1rem 0;
border: 1px solid transparent;
border-radius: 0.375rem;
}

.navbar-nav > li > a, .navbar-brand {
height: 28px;
.alert-info {
color: #055160;
background-color: #cff4fc;
border-color: #b6effb;
}

/* Badge */

.badge {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.375rem;
}

.text-bg-danger {
color: #fff;
background-color: #dc3545;
}

.text-bg-info {
color: #000;
background-color: #0dcaf0;
}

/* Table */

.table {
width: 100%;
margin-bottom: 1rem;
border-collapse: collapse;
}

.table th,
.table td {
padding: 0.5rem;
text-align: left;
}

.table-bordered th,
.table-bordered td {
border: 1px solid var(--border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}

.table-responsive {
width: 100%;
overflow-x: auto;
}

@media screen and (max-width: 767px) {
.table-responsive-border {
border: 1px solid #ddd;
border: 1px solid var(--border-color);
}
.table-responsive-border > .table {
margin-bottom: 0;
}

.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
}

.table-responsive > .table > thead > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > tfoot > tr > td {
.table-responsive > .table :is(th, td) {
white-space: nowrap;
}

/* The wrapper draws the outer border, so drop the cells' edge borders. */
.table-responsive > .table-bordered {
border: 0;
}

.table-responsive > .table-bordered > thead > tr > th:first-child,
.table-responsive > .table-bordered > thead > tr > td:first-child,
.table-responsive > .table-bordered > tbody > tr > th:first-child,
.table-responsive > .table-bordered > tbody > tr > td:first-child,
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
.table-responsive > .table-bordered :is(th, td):first-child {
border-left: 0;
}

.table-responsive > .table-bordered > thead > tr > th:last-child,
.table-responsive > .table-bordered > thead > tr > td:last-child,
.table-responsive > .table-bordered > tbody > tr > th:last-child,
.table-responsive > .table-bordered > tbody > tr > td:last-child,
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
.table-responsive > .table-bordered :is(th, td):last-child {
border-right: 0;
}

.table-responsive > .table-bordered > tbody > tr:last-child > th,
.table-responsive > .table-bordered > tbody > tr:last-child > td,
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
.table-responsive > .table-bordered > :is(tbody, tfoot) > tr:last-child :is(th, td) {
border-bottom: 0;
}
}

/* Reports table */

table.reports th, table.reports td {
padding: 1px !important;
padding: 1px;
}

table.reports tr.branch-separator td {
border-top: solid 2px black;
}

table.reports tr td.datetime {
table.reports td.datetime {
text-align: center;
}

table.reports tr td.branch {
table.reports td.branch {
text-align: center;
}

table.reports tr td.revision {
table.reports td.revision {
font-family: Menlo, monospace;
text-align: center;
}

/* :where() keeps specificity at 0-1-1 so the later td.summary rules
still win for the summary column, which falls in this range. */
table.reports tr td:nth-child(n+6):where(:nth-child(-n+9)) {
background-color: #FF9090;
/* :where() keeps the second :nth-child out of the specificity, so this
ties with the td.summary rules below and they win by source order. */
table.reports td:nth-child(n+6):where(:nth-child(-n+9)) {
background-color: var(--status-fail);
}

table.reports tr td:nth-child(n+6):where(:nth-child(-n+9)):empty {
background-color: #F0FFF0;
table.reports td:nth-child(n+6):where(:nth-child(-n+9)):empty {
background-color: var(--status-ok);
}

table.reports tr td.summary {
background-color: #F0FFF0;
table.reports td.summary {
background-color: var(--status-ok);
}

table.reports tr td.summary div {
table.reports td.summary div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 250px !important;
width: 250px;
}

table.reports tr td.summary.failure {
background-color: #FF9090;
table.reports td.summary.failure {
background-color: var(--status-fail);
}

table.reports tr td.diff div {
table.reports td.diff div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px !important;
width: 100px;
}
24 changes: 9 additions & 15 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,24 @@
<!-- For all other devices -->
<!-- Size should be 32 x 32 pixels -->
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
<%= stylesheet_link_tag "bootstrap.min", "application", :media => "all" %>
<%= stylesheet_link_tag "application", :media => "all" %>
</head>
<body>

<div class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<nav class="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="/">Ruby CI</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto mb-2 mb-md-0">
<li class="nav-item"><%= link_to "Current Reports", "/reports", class: "nav-link" %></li>
<li class="nav-item"><%= link_to "Latest Reports", "/", class: "nav-link" %></li>
</ul>
</div><!--/.nav-collapse -->
<ul class="navbar-nav">
<li class="nav-item"><%= link_to "Current Reports", "/reports", class: "nav-link" %></li>
<li class="nav-item"><%= link_to "Latest Reports", "/", class: "nav-link" %></li>
</ul>
</div>
</div>
</nav>

<div class="container-fluid">
<div class="content">
<div class="row">
<div class="span12">
<!-- app/views/reports/index.html.erb -->
<%= yield %>
</div>
</div><!--/row-->
<!-- app/views/reports/index.html.erb -->
<%= yield %>

<div class="alert alert-info">
<div>
Expand Down
7 changes: 0 additions & 7 deletions vendor/assets/stylesheets/bootstrap.min.css
View file
Open in desktop

This file was deleted.

Loading