Skip to content

Commit a77f52d

Browse files
mrleeiomrleeio
committed
refactor: convert to Bootstrap Sass for better customization
- Add bootstrap gem (~> 5.3) for Sass support - Copy Bootstrap Sass files to _sass/ directory - Create assets/css/main.scss that imports Bootstrap and custom styles - Update _includes/head.html to reference compiled main.css - Remove old precompiled Bootstrap CSS files (232KB) - Configure Sass compression in _config.yml - Move carousel-image styles into main Sass file This enables easier customization of Bootstrap variables and components.
1 parent 2baa80d commit a77f52d

100 files changed

Lines changed: 9989 additions & 20 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Gemfile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
source 'https://rubygems.org'
44

55
gem 'jekyll'
6+
gem 'bootstrap', '~> 5.3'
67

78
gem 'rubocop-jekyll'
89

‎Gemfile.lock‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ GEM
77
base64 (0.3.0)
88
benchmark (0.4.1)
99
bigdecimal (3.2.3)
10+
bootstrap (5.3.5)
11+
popper_js (>= 2.11.8, < 3)
1012
colorator (1.1.0)
1113
concurrent-ruby (1.3.5)
1214
csv (3.3.5)
@@ -68,6 +70,7 @@ GEM
6870
racc
6971
pathutil (0.16.2)
7072
forwardable-extended (~> 2.6)
73+
popper_js (2.11.8)
7174
prism (1.5.1)
7275
public_suffix (6.0.2)
7376
racc (1.8.1)
@@ -116,6 +119,7 @@ DEPENDENCIES
116119
base64
117120
benchmark
118121
bigdecimal
122+
bootstrap (~> 5.3)
119123
csv
120124
jekyll
121125
jekyll-seo-tag

‎_config.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ permalink: /posts/:title
1111
rdiscount:
1212
extensions: [smart]
1313

14+
# Sass/SCSS
15+
sass:
16+
style: compressed
17+
sass_dir: _sass
18+
1419
# Collections
1520
collections:
1621
data:

‎_includes/head.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<title>{{ page.title }}</title>
33
<meta name="viewport" content="width=device-width, initial-scale=1.0">
44

5-
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
65
<link href="/assets/css/main.css" rel="stylesheet">
76
<link rel="me" href="https://ruby.social/@vanruby">
87

‎_sass/_bootstrap-grid.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@import "bootstrap/mixins/banner";
2+
@include bsBanner(Grid);
3+
4+
$include-column-box-sizing: true !default;
5+
6+
@import "bootstrap/functions";
7+
@import "bootstrap/variables";
8+
@import "bootstrap/variables-dark";
9+
@import "bootstrap/maps";
10+
11+
@import "bootstrap/mixins/breakpoints";
12+
@import "bootstrap/mixins/container";
13+
@import "bootstrap/mixins/grid";
14+
@import "bootstrap/mixins/utilities";
15+
16+
@import "bootstrap/vendor/rfs";
17+
18+
@import "bootstrap/containers";
19+
@import "bootstrap/grid";
20+
21+
@import "bootstrap/utilities";
22+
// Only use the utilities we need
23+
// stylelint-disable-next-line scss/dollar-variable-default
24+
$utilities: map-get-multiple(
25+
$utilities,
26+
(
27+
"bootstrap/display",
28+
"bootstrap/order",
29+
"bootstrap/flex",
30+
"bootstrap/flex-direction",
31+
"bootstrap/flex-grow",
32+
"bootstrap/flex-shrink",
33+
"bootstrap/flex-wrap",
34+
"bootstrap/justify-content",
35+
"bootstrap/align-items",
36+
"bootstrap/align-content",
37+
"bootstrap/align-self",
38+
"bootstrap/margin",
39+
"bootstrap/margin-x",
40+
"bootstrap/margin-y",
41+
"bootstrap/margin-top",
42+
"bootstrap/margin-end",
43+
"bootstrap/margin-bottom",
44+
"bootstrap/margin-start",
45+
"bootstrap/negative-margin",
46+
"bootstrap/negative-margin-x",
47+
"bootstrap/negative-margin-y",
48+
"bootstrap/negative-margin-top",
49+
"bootstrap/negative-margin-end",
50+
"bootstrap/negative-margin-bottom",
51+
"bootstrap/negative-margin-start",
52+
"bootstrap/padding",
53+
"bootstrap/padding-x",
54+
"bootstrap/padding-y",
55+
"bootstrap/padding-top",
56+
"bootstrap/padding-end",
57+
"bootstrap/padding-bottom",
58+
"bootstrap/padding-start",
59+
)
60+
);
61+
62+
@import "bootstrap/utilities/api";

‎_sass/_bootstrap-reboot.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import "bootstrap/mixins/banner";
2+
@include bsBanner(Reboot);
3+
4+
@import "bootstrap/functions";
5+
@import "bootstrap/variables";
6+
@import "bootstrap/variables-dark";
7+
@import "bootstrap/maps";
8+
@import "bootstrap/mixins";
9+
@import "bootstrap/root";
10+
@import "bootstrap/reboot";

‎_sass/_bootstrap-utilities.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import "bootstrap/mixins/banner";
2+
@include bsBanner(Utilities);
3+
4+
// Configuration
5+
@import "bootstrap/functions";
6+
@import "bootstrap/variables";
7+
@import "bootstrap/variables-dark";
8+
@import "bootstrap/maps";
9+
@import "bootstrap/mixins";
10+
@import "bootstrap/utilities";
11+
12+
// Layout & components
13+
@import "bootstrap/root";
14+
15+
// Helpers
16+
@import "bootstrap/helpers";
17+
18+
// Utilities
19+
@import "bootstrap/utilities/api";

‎_sass/_bootstrap.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@import "bootstrap/mixins/banner";
2+
@include bsBanner("");
3+
4+
5+
// scss-docs-start import-stack
6+
// Configuration
7+
@import "bootstrap/functions";
8+
@import "bootstrap/variables";
9+
@import "bootstrap/variables-dark";
10+
@import "bootstrap/maps";
11+
@import "bootstrap/mixins";
12+
@import "bootstrap/utilities";
13+
14+
// Layout & components
15+
@import "bootstrap/root";
16+
@import "bootstrap/reboot";
17+
@import "bootstrap/type";
18+
@import "bootstrap/images";
19+
@import "bootstrap/containers";
20+
@import "bootstrap/grid";
21+
@import "bootstrap/tables";
22+
@import "bootstrap/forms";
23+
@import "bootstrap/buttons";
24+
@import "bootstrap/transitions";
25+
@import "bootstrap/dropdown";
26+
@import "bootstrap/button-group";
27+
@import "bootstrap/nav";
28+
@import "bootstrap/navbar";
29+
@import "bootstrap/card";
30+
@import "bootstrap/accordion";
31+
@import "bootstrap/breadcrumb";
32+
@import "bootstrap/pagination";
33+
@import "bootstrap/badge";
34+
@import "bootstrap/alert";
35+
@import "bootstrap/progress";
36+
@import "bootstrap/list-group";
37+
@import "bootstrap/close";
38+
@import "bootstrap/toasts";
39+
@import "bootstrap/modal";
40+
@import "bootstrap/tooltip";
41+
@import "bootstrap/popover";
42+
@import "bootstrap/carousel";
43+
@import "bootstrap/spinners";
44+
@import "bootstrap/offcanvas";
45+
@import "bootstrap/placeholders";
46+
47+
// Helpers
48+
@import "bootstrap/helpers";
49+
50+
// Utilities
51+
@import "bootstrap/utilities/api";
52+
// scss-docs-end import-stack

‎_sass/bootstrap/_accordion.scss‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
//
2+
// Base styles
3+
//
4+
5+
.accordion {
6+
// scss-docs-start accordion-css-vars
7+
--#{$prefix}accordion-color: #{$accordion-color};
8+
--#{$prefix}accordion-bg: #{$accordion-bg};
9+
--#{$prefix}accordion-transition: #{$accordion-transition};
10+
--#{$prefix}accordion-border-color: #{$accordion-border-color};
11+
--#{$prefix}accordion-border-width: #{$accordion-border-width};
12+
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
13+
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
14+
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
15+
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
16+
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
17+
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
18+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
19+
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
20+
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
21+
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
22+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
23+
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
24+
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
25+
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
26+
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
27+
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
28+
// scss-docs-end accordion-css-vars
29+
}
30+
31+
.accordion-button {
32+
position: relative;
33+
display: flex;
34+
align-items: center;
35+
width: 100%;
36+
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
37+
@include font-size($font-size-base);
38+
color: var(--#{$prefix}accordion-btn-color);
39+
text-align: left; // Reset button style
40+
background-color: var(--#{$prefix}accordion-btn-bg);
41+
border: 0;
42+
@include border-radius(0);
43+
overflow-anchor: none;
44+
@include transition(var(--#{$prefix}accordion-transition));
45+
46+
&:not(.collapsed) {
47+
color: var(--#{$prefix}accordion-active-color);
48+
background-color: var(--#{$prefix}accordion-active-bg);
49+
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
50+
51+
&::after {
52+
background-image: var(--#{$prefix}accordion-btn-active-icon);
53+
transform: var(--#{$prefix}accordion-btn-icon-transform);
54+
}
55+
}
56+
57+
// Accordion icon
58+
&::after {
59+
flex-shrink: 0;
60+
width: var(--#{$prefix}accordion-btn-icon-width);
61+
height: var(--#{$prefix}accordion-btn-icon-width);
62+
margin-left: auto;
63+
content: "";
64+
background-image: var(--#{$prefix}accordion-btn-icon);
65+
background-repeat: no-repeat;
66+
background-size: var(--#{$prefix}accordion-btn-icon-width);
67+
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
68+
}
69+
70+
&:hover {
71+
z-index: 2;
72+
}
73+
74+
&:focus {
75+
z-index: 3;
76+
outline: 0;
77+
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
78+
}
79+
}
80+
81+
.accordion-header {
82+
margin-bottom: 0;
83+
}
84+
85+
.accordion-item {
86+
color: var(--#{$prefix}accordion-color);
87+
background-color: var(--#{$prefix}accordion-bg);
88+
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
89+
90+
&:first-of-type {
91+
@include border-top-radius(var(--#{$prefix}accordion-border-radius));
92+
93+
> .accordion-header .accordion-button {
94+
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
95+
}
96+
}
97+
98+
&:not(:first-of-type) {
99+
border-top: 0;
100+
}
101+
102+
// Only set a border-radius on the last item if the accordion is collapsed
103+
&:last-of-type {
104+
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
105+
106+
> .accordion-header .accordion-button {
107+
&.collapsed {
108+
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
109+
}
110+
}
111+
112+
> .accordion-collapse {
113+
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
114+
}
115+
}
116+
}
117+
118+
.accordion-body {
119+
padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
120+
}
121+
122+
123+
// Flush accordion items
124+
//
125+
// Remove borders and border-radius to keep accordion items edge-to-edge.
126+
127+
.accordion-flush {
128+
> .accordion-item {
129+
border-right: 0;
130+
border-left: 0;
131+
@include border-radius(0);
132+
133+
&:first-child { border-top: 0; }
134+
&:last-child { border-bottom: 0; }
135+
136+
// stylelint-disable selector-max-class
137+
> .accordion-collapse,
138+
> .accordion-header .accordion-button,
139+
> .accordion-header .accordion-button.collapsed {
140+
@include border-radius(0);
141+
}
142+
// stylelint-enable selector-max-class
143+
}
144+
}
145+
146+
@if $enable-dark-mode {
147+
@include color-mode(dark) {
148+
.accordion-button::after {
149+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
150+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
151+
}
152+
}
153+
}

0 commit comments

Comments
 (0)