rails_app_generator 0.0.6 → 0.0.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/.builders/boot.rb +1 -0
  3. data/.builders/generators/project-plan.rb +47 -0
  4. data/CHANGELOG.md +24 -0
  5. data/after_templates/README.md +3 -0
  6. data/after_templates/___base_template.rb +1 -0
  7. data/after_templates/___r7_hotwire.rb +1 -0
  8. data/after_templates/rag_bootstrap/application-yield.html.erb +5 -0
  9. data/after_templates/rag_bootstrap/application.html.erb +4 -0
  10. data/after_templates/rag_bootstrap/component-cards-fancy.css +84 -0
  11. data/after_templates/rag_bootstrap/component-cards-fancy.html +80 -0
  12. data/after_templates/rag_bootstrap/component-cards-staff.css +90 -0
  13. data/after_templates/rag_bootstrap/component-cards-staff.html +140 -0
  14. data/after_templates/rag_bootstrap/component-cards-styled.html +31 -0
  15. data/after_templates/rag_bootstrap/component-footer.html +34 -0
  16. data/after_templates/rag_bootstrap/component-hero.html +15 -0
  17. data/after_templates/rag_bootstrap/component-nav.html +36 -0
  18. data/after_templates/rag_bootstrap/custom-bootstrap-import.scss +5 -0
  19. data/after_templates/rag_bootstrap/custom-using-css.css +3 -0
  20. data/after_templates/rag_bootstrap/custom-using-scss.scss +5 -0
  21. data/after_templates/rag_bootstrap/manifest.js +3 -0
  22. data/after_templates/rag_bootstrap.rb +1 -0
  23. data/after_templates/rag_simple.rb +25 -0
  24. data/after_templates/rag_tailwind/component-cta.html +17 -0
  25. data/after_templates/rag_tailwind/component-faq.html +151 -0
  26. data/after_templates/rag_tailwind/component-footer.html +73 -0
  27. data/after_templates/rag_tailwind/component-hero.html +25 -0
  28. data/after_templates/rag_tailwind/component-nav.html +101 -0
  29. data/after_templates/rag_tailwind/component-section-begin.html +0 -0
  30. data/after_templates/rag_tailwind/component-section-end.html +0 -0
  31. data/after_templates/rag_tailwind.rb +76 -0
  32. data/docs/project-plan/project.drawio +56 -0
  33. data/docs/project-plan/project_done.svg +3 -0
  34. data/docs/project-plan/project_in_progress.svg +3 -0
  35. data/docs/project-plan/project_todo.svg +3 -0
  36. data/docs/project-plan.md +24 -0
  37. data/exe/rag +41 -0
  38. data/lib/rails_app_generator/add_on.rb +0 -1
  39. data/lib/rails_app_generator/app_builder.rb +5 -3
  40. data/lib/rails_app_generator/app_generator.rb +72 -13
  41. data/lib/rails_app_generator/notes/a2.txt +14 -1
  42. data/lib/rails_app_generator/options/rails_options.rb +1 -1
  43. data/lib/rails_app_generator/version.rb +1 -1
  44. data/lib/rails_app_generator.rb +3 -3
  45. data/package-lock.json +2 -2
  46. data/package.json +1 -1
  47. data/profiles/rag-add-some-pages.json +11 -0
  48. data/profiles/rag-bootstrap.json +12 -0
  49. data/profiles/rag-simple.json +11 -0
  50. data/profiles/rag-tailwind.json +12 -0
  51. data/templates/README.md.erb +43 -0
  52. metadata +56 -4
  53. data/exe/rails_app_generator +0 -51
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a9db638d5387a342cec3c8ad01cf7aa69298a2e592f005608a603c17ec336b20
4
- data.tar.gz: 192fd7e39c98346954ddb9752fba2c7cd5380e306d07e32b638d8d5c0201a637
3
+ metadata.gz: eb8e4527b8ed4718b6e87844e6bf5f531b3747fd98e4ea0d6b9a00a362a6e690
4
+ data.tar.gz: 5ce9f0b4ca298a820ab8bdfd4cff8947163230fb2548b40a2e6432506fe43fd4
5
5
  SHA512:
6
- metadata.gz: b3d1733fb92b31e44eaaa31cf062038e7f8715cca8adf2e29351e7363e74c24a5ba488186143c803be5d814d17bfcc80b8fa5b945b9bd06cd0e2da966244c065
7
- data.tar.gz: 1f2955850cf06ad10529dc86355f9db15af680bc017284ec01524f3c83c7314cb903b6deff6beefb7673ab78fc2d57152fef36a015d7a7b282df03310509dc24
6
+ metadata.gz: 32689a628daeebed93c2e415d71fe9ed68adcce3737c55a55ad2966a378125dd22dc948f1c46325aa992c0f2bb7ba1fc37d0560f47dd385e094dbe5e2f63d9e2
7
+ data.tar.gz: c3094d0c0384107b80ffe00b766a51e6c72b43135bdf298b3c0b3b524aa9aff3729cfe9a1b9d38886d5542a8a090ca7ce0708be0d3f03d09d5a7968a53e407e1
data/.builders/boot.rb CHANGED
@@ -23,6 +23,7 @@ KConfig.configure(CONFIG_KEY) do |config|
23
23
  config.template_folders.add(:template , File.expand_path('.templates', Dir.pwd))
24
24
 
25
25
  config.target_folders.add(:app , base_folder)
26
+ config.target_folders.add(:docs , :app, 'docs')
26
27
  config.target_folders.add(:builder , builder_folder)
27
28
  end
28
29
 
@@ -0,0 +1,47 @@
1
+ KManager.action :project_plan do
2
+ action do
3
+
4
+ DrawioDsl::Drawio
5
+ .init(k_builder, on_exist: :write, on_action: :execute)
6
+ .diagram(rounded: 1, glass: 1)
7
+ .page('In progress', theme: :style_03, margin_left: 0, margin_top: 0) do
8
+ h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
9
+ # p(x: 350, y: 40, w: 400, h: 80, title: 'Project plan - In progress')
10
+
11
+ grid_layout(y: 90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
12
+
13
+ todo(title: '')
14
+ end
15
+ .page('To Do', theme: :style_02, margin_left: 0, margin_top: 0) do
16
+
17
+ # h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
18
+ # p(x: 350, y: 40, w: 400, h: 80, title: 'Project plan')
19
+
20
+ todo(title: 'add diff tool with support')
21
+ todo(title: 'add diff tool left hand side only option')
22
+ todo(title: 'add diff tool right hand side only option')
23
+ todo(title: 'add diff tool lhs/rhs differences')
24
+ todo(title: 'add diff tool open in vscode option')
25
+ todo(title: 'rag new should work like rails new')
26
+ todo(title: 'rag profile is the default option')
27
+
28
+ grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
29
+
30
+ end
31
+ .page('Done', theme: :style_06, margin_left: 0, margin_top: 0) do
32
+
33
+ # h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
34
+ # p(x: 350, y: 40, w: 400, h: 80, title: 'Done')
35
+
36
+ todo(title: 'add project plan to do list')
37
+
38
+ grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
39
+
40
+ end
41
+ .cd(:docs)
42
+ .save('project-plan/project.drawio')
43
+ .export_svg('project-plan/project_in_progress', page: 1)
44
+ .export_svg('project-plan/project_todo' , page: 2)
45
+ .export_svg('project-plan/project_done' , page: 3)
46
+ end
47
+ end
data/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ ## [0.0.8](https://github.com/klueless-io/rails_app_generator/compare/v0.0.7...v0.0.8) (2022-07-24)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * add support for bootstrap profile ([f70d17d](https://github.com/klueless-io/rails_app_generator/commit/f70d17d28cae3f7758c62360bd3d97ca27bf06b5))
7
+ * add support for bootstrap profile ([a114339](https://github.com/klueless-io/rails_app_generator/commit/a1143391166c10fc802800e2e1236f69aeda9091))
8
+
9
+ ## [0.0.7](https://github.com/klueless-io/rails_app_generator/compare/v0.0.6...v0.0.7) (2022-07-22)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * add support for profiles and after templates ([1ecf4ab](https://github.com/klueless-io/rails_app_generator/commit/1ecf4abef1bc0f45928a33319ed9db8bebe1c27a))
15
+
16
+ ## [0.0.6](https://github.com/klueless-io/rails_app_generator/compare/v0.0.5...v0.0.6) (2022-07-21)
17
+
18
+
19
+ ### Bug Fixes
20
+
21
+ * add a bunch of addons ([b781af6](https://github.com/klueless-io/rails_app_generator/commit/b781af66d7fe7d7dcd2550577166213deefc06c6))
22
+ * add a bunch of addons ([d9a85b7](https://github.com/klueless-io/rails_app_generator/commit/d9a85b7b32c2c25577d98b4b3be9aab7947ff6e9))
23
+ * update template paths in app_generator ([9b28a5e](https://github.com/klueless-io/rails_app_generator/commit/9b28a5ee58535a761581e619eb01dc3059a79948))
24
+
1
25
  ## [0.0.5](https://github.com/klueless-io/rails_app_generator/compare/v0.0.4...v0.0.5) (2022-07-19)
2
26
 
3
27
 
@@ -0,0 +1,3 @@
1
+ # After Templates
2
+
3
+ A set of templates that can be used via the `--template` argument
@@ -0,0 +1 @@
1
+ # frozen_string_literal: true
@@ -0,0 +1 @@
1
+ # frozen_string_literal: true
@@ -0,0 +1,5 @@
1
+ <div class="container">
2
+ <div class="row">
3
+ <%= yield %>
4
+ </div>
5
+ </div>
@@ -0,0 +1,4 @@
1
+ <%= stylesheet_link_tag "custom-using-css" %>
2
+ <%= stylesheet_link_tag "custom-using-scss" %>
3
+ <%= stylesheet_link_tag "custom-component" %>
4
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -0,0 +1,84 @@
1
+ // Cards 1 : Source: https://codepen.io/donho_zamo/pen/YzXzPXZ
2
+
3
+ /*---- Main Style ----*/
4
+ #cards_landscape_wrap-2{
5
+ text-align: center;
6
+ background: #F7F7F7;
7
+ }
8
+ #cards_landscape_wrap-2 .container{
9
+ padding-top: 80px;
10
+ padding-bottom: 100px;
11
+ }
12
+ #cards_landscape_wrap-2 a{
13
+ text-decoration: none;
14
+ outline: none;
15
+ }
16
+ #cards_landscape_wrap-2 .card-flyer {
17
+ border-radius: 5px;
18
+ }
19
+ #cards_landscape_wrap-2 .card-flyer .image-box{
20
+ background: #ffffff;
21
+ overflow: hidden;
22
+ box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50);
23
+ border-radius: 5px;
24
+ }
25
+ #cards_landscape_wrap-2 .card-flyer .image-box img{
26
+ -webkit-transition:all .9s ease;
27
+ -moz-transition:all .9s ease;
28
+ -o-transition:all .9s ease;
29
+ -ms-transition:all .9s ease;
30
+ width: 100%;
31
+ height: 200px;
32
+ }
33
+ #cards_landscape_wrap-2 .card-flyer:hover .image-box img{
34
+ opacity: 0.7;
35
+ -webkit-transform:scale(1.15);
36
+ -moz-transform:scale(1.15);
37
+ -ms-transform:scale(1.15);
38
+ -o-transform:scale(1.15);
39
+ transform:scale(1.15);
40
+ }
41
+ #cards_landscape_wrap-2 .card-flyer .text-box{
42
+ text-align: center;
43
+ }
44
+ #cards_landscape_wrap-2 .card-flyer .text-box .text-container{
45
+ padding: 30px 18px;
46
+ }
47
+ #cards_landscape_wrap-2 .card-flyer{
48
+ background: #FFFFFF;
49
+ margin-top: 50px;
50
+ -webkit-transition: all 0.2s ease-in;
51
+ -moz-transition: all 0.2s ease-in;
52
+ -ms-transition: all 0.2s ease-in;
53
+ -o-transition: all 0.2s ease-in;
54
+ transition: all 0.2s ease-in;
55
+ box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.40);
56
+ }
57
+ #cards_landscape_wrap-2 .card-flyer:hover{
58
+ background: #fff;
59
+ box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
60
+ -webkit-transition: all 0.2s ease-in;
61
+ -moz-transition: all 0.2s ease-in;
62
+ -ms-transition: all 0.2s ease-in;
63
+ -o-transition: all 0.2s ease-in;
64
+ transition: all 0.2s ease-in;
65
+ margin-top: 50px;
66
+ }
67
+ #cards_landscape_wrap-2 .card-flyer .text-box p{
68
+ margin-top: 10px;
69
+ margin-bottom: 0px;
70
+ padding-bottom: 0px;
71
+ font-size: 14px;
72
+ letter-spacing: 1px;
73
+ color: #000000;
74
+ }
75
+ #cards_landscape_wrap-2 .card-flyer .text-box h6{
76
+ margin-top: 0px;
77
+ margin-bottom: 4px;
78
+ font-size: 18px;
79
+ font-weight: bold;
80
+ text-transform: uppercase;
81
+ font-family: 'Roboto Black', sans-serif;
82
+ letter-spacing: 1px;
83
+ color: #00acc1;
84
+ }
@@ -0,0 +1,80 @@
1
+ <!-- Topic Cards -->
2
+ <div id="cards_landscape_wrap-2">
3
+ <div class="container">
4
+ <div class="row">
5
+ <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
6
+ <a href="">
7
+ <div class="card-flyer">
8
+ <div class="text-box">
9
+ <div class="image-box">
10
+ <img src="https://cdn.pixabay.com/photo/2018/03/30/15/11/deer-3275594_960_720.jpg" alt="" />
11
+ </div>
12
+ <div class="text-container">
13
+ <h6>Title 01</h6>
14
+ <p>
15
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
16
+ industry's standard dummy text ever since the 1500s.
17
+ </p>
18
+ </div>
19
+ </div>
20
+ </div>
21
+ </a>
22
+ </div>
23
+ <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
24
+ <a href="">
25
+ <div class="card-flyer">
26
+ <div class="text-box">
27
+ <div class="image-box">
28
+ <img src="https://cdn.pixabay.com/photo/2018/04/09/19/55/low-poly-3305284_960_720.jpg" alt="" />
29
+ </div>
30
+ <div class="text-container">
31
+ <h6>Title 02</h6>
32
+ <p>
33
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
34
+ industry's standard dummy text ever since the 1500s.
35
+ </p>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ </a>
40
+ </div>
41
+ <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
42
+ <a href="">
43
+ <div class="card-flyer">
44
+ <div class="text-box">
45
+ <div class="image-box">
46
+ <img src="https://cdn.pixabay.com/photo/2018/04/06/13/46/poly-3295856_960_720.png" alt="" />
47
+ </div>
48
+
49
+ <div class="text-container">
50
+ <h6>Title 03</h6>
51
+ <p>
52
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
53
+ industry's standard dummy text ever since the 1500s.
54
+ </p>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </a>
59
+ </div>
60
+ <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
61
+ <a href="">
62
+ <div class="card-flyer">
63
+ <div class="text-box">
64
+ <div class="image-box">
65
+ <img src="https://cdn.pixabay.com/photo/2018/03/30/15/12/dog-3275593_960_720.jpg" alt="" />
66
+ </div>
67
+ <div class="text-container">
68
+ <h6>Title 04</h6>
69
+ <p>
70
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
71
+ industry's standard dummy text ever since the 1500s.
72
+ </p>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </a>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
@@ -0,0 +1,90 @@
1
+ // Cards 2 - Source: https://codepen.io/design007/pen/KKmbZzm
2
+
3
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
4
+ @import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css');
5
+ :root {
6
+ --font3: 'Roboto', sans-serif;
7
+ }
8
+
9
+ .h1,
10
+ h1 {
11
+ font-size: 1.5rem;
12
+ }
13
+
14
+ .container-fluid {
15
+ max-width: 1400px;
16
+ }
17
+
18
+ .card {
19
+ background: #fff;
20
+ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
21
+ border: 1;
22
+ border-radius: 1rem;
23
+ }
24
+
25
+ .img-hover-zoom--colorize img {
26
+ border-radius: 50%;
27
+ width: 150px;
28
+ height: auto;
29
+ margin-top: 20px;
30
+ padding: 1px;
31
+ transition: transform 0.5s;
32
+ filter: grayscale(100%);
33
+ }
34
+
35
+ .img-hover-zoom--colorize:hover img {
36
+ filter: grayscale(0);
37
+ transform: scale(1.05);
38
+ }
39
+
40
+ .card h5 {
41
+ overflow: hidden;
42
+ height: 80px;
43
+ font-weight: 300;
44
+ font-size: 1rem;
45
+ }
46
+
47
+ .card h5 a {
48
+ color: black;
49
+ text-decoration: none;
50
+ }
51
+
52
+ .role {
53
+ color: #7a7a7a;
54
+ }
55
+
56
+ .box {
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ }
61
+
62
+ .fab {
63
+ font-size: 1.5rem;
64
+ color: darkgray;
65
+ transition: transform 0.5s;
66
+ }
67
+
68
+ .fab:hover {
69
+ color: black;
70
+ transform: scale(1.1);
71
+ }
72
+
73
+ .card h2 {
74
+ font-size: 1rem;
75
+ }
76
+
77
+ /* MEDIA */
78
+
79
+ @media only screen and (min-width: 1200px) {
80
+ .img-hover-zoom--colorize img {
81
+ width: 200px;
82
+ }
83
+ }
84
+
85
+ @media only screen and (min-width: 1200px) {
86
+ .h1,
87
+ h1 {
88
+ font-size: 2rem;
89
+ }
90
+ }
@@ -0,0 +1,140 @@
1
+ <div class="container p-5">
2
+ <div class="row row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3">
3
+ <div class="col">
4
+ <div class="card h-100 shadow-sm">
5
+ <div class="text-center">
6
+ <div class="img-hover-zoom img-hover-zoom--colorize">
7
+ <img
8
+ class="shadow"
9
+ src="https://source.unsplash.com/rDEOVtE7vOs/600x600"
10
+ alt="Another Image zoom-on-hover effect"
11
+ />
12
+ </div>
13
+ </div>
14
+
15
+ <div class="card-body">
16
+ <div class="clearfix mb-3"></div>
17
+
18
+ <div class="my-2 text-center">
19
+ <h1>Mia Wallace</h1>
20
+ </div>
21
+ <div class="mb-3">
22
+ <h2 class="text-uppercase text-center role">Senior Frontend Developer</h2>
23
+ </div>
24
+ <div class="box">
25
+ <div>
26
+ <ul class="list-inline">
27
+ <li class="list-inline-item"><i class="fab fa-github"></i></li>
28
+ <li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
29
+ <li class="list-inline-item"><i class="fab fa-instagram"></i></li>
30
+ <li class="list-inline-item"><i class="fab fa-twitter"></i></li>
31
+ </ul>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </div>
37
+ <div class="col">
38
+ <div class="card h-100 shadow-sm">
39
+ <div class="text-center">
40
+ <div class="img-hover-zoom img-hover-zoom--colorize">
41
+ <img
42
+ class="shadow"
43
+ src="https://source.unsplash.com/XHVpWcr5grQ/600x600"
44
+ alt="Another Image zoom-on-hover effect"
45
+ />
46
+ </div>
47
+ </div>
48
+
49
+ <div class="card-body">
50
+ <div class="clearfix mb-3"></div>
51
+
52
+ <div class="my-2 text-center">
53
+ <h1>Vincent Vega</h1>
54
+ </div>
55
+ <div class="mb-3">
56
+ <h2 class="text-uppercase text-center role">SEO Specialist</h2>
57
+ </div>
58
+ <div class="box">
59
+ <div>
60
+ <ul class="list-inline">
61
+ <li class="list-inline-item"><i class="fab fa-github"></i></li>
62
+ <li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
63
+ <li class="list-inline-item"><i class="fab fa-instagram"></i></li>
64
+ <li class="list-inline-item"><i class="fab fa-twitter"></i></li>
65
+ </ul>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ <div class="col">
72
+ <div class="card h-100 shadow-sm">
73
+ <div class="text-center">
74
+ <div class="img-hover-zoom img-hover-zoom--colorize">
75
+ <img
76
+ class="shadow"
77
+ src="https://source.unsplash.com/n4KewLKFOZw/600x600"
78
+ alt="Another Image zoom-on-hover effect"
79
+ />
80
+ </div>
81
+ </div>
82
+
83
+ <div class="card-body">
84
+ <div class="clearfix mb-3"></div>
85
+
86
+ <div class="my-2 text-center">
87
+ <h1>Mr. Wolf</h1>
88
+ </div>
89
+ <div class="mb-3">
90
+ <h2 class="text-uppercase text-center role">DIGITAL MARKETING SPECIALIST</h2>
91
+ </div>
92
+ <div class="box">
93
+ <div>
94
+ <ul class="list-inline">
95
+ <li class="list-inline-item"><i class="fab fa-github"></i></li>
96
+ <li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
97
+ <li class="list-inline-item"><i class="fab fa-instagram"></i></li>
98
+ <li class="list-inline-item"><i class="fab fa-twitter"></i></li>
99
+ </ul>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ <div class="col">
106
+ <div class="card h-100 shadow-sm">
107
+ <div class="text-center">
108
+ <div class="img-hover-zoom img-hover-zoom--colorize">
109
+ <img
110
+ class="shadow"
111
+ src="https://source.unsplash.com/B4TjXnI0Y2c/600x600"
112
+ alt="Another Image zoom-on-hover effect"
113
+ />
114
+ </div>
115
+ </div>
116
+
117
+ <div class="card-body">
118
+ <div class="clearfix mb-3"></div>
119
+
120
+ <div class="my-2 text-center">
121
+ <h1>O-Ren Ishii</h1>
122
+ </div>
123
+ <div class="mb-3">
124
+ <h2 class="text-uppercase text-center role">Web Developer</h2>
125
+ </div>
126
+ <div class="box">
127
+ <div>
128
+ <ul class="list-inline">
129
+ <li class="list-inline-item"><i class="fab fa-github"></i></li>
130
+ <li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
131
+ <li class="list-inline-item"><i class="fab fa-instagram"></i></li>
132
+ <li class="list-inline-item"><i class="fab fa-twitter"></i></li>
133
+ </ul>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
@@ -0,0 +1,31 @@
1
+ <div class="m-4">
2
+ <div class="row row-cols-1 row-cols-md-3 g-3">
3
+ <div class="col">
4
+ <!-- Card with default left text alignment -->
5
+ <div class="card">
6
+ <div class="card-body card1">
7
+ <h3 class="card-title">Bootstrap @import</h3>
8
+ <p class="card-text">Use standard SAAS transpiling</p>
9
+ </div>
10
+ </div>
11
+ </div>
12
+ <div class="col">
13
+ <!-- Card with center text alignment -->
14
+ <div class="card text-center">
15
+ <div class="card-body card2">
16
+ <h3 class="card-title">CSS</h3>
17
+ <p class="card-text">Using plain CSS files</p>
18
+ </div>
19
+ </div>
20
+ </div>
21
+ <div class="col">
22
+ <!-- Card with right text alignment -->
23
+ <div class="card text-end">
24
+ <div class="card-body card3">
25
+ <h3 class="card-title">SCSS</h3>
26
+ <p class="card-text">Using SASS/SCSS files</p>
27
+ </div>
28
+ </div>
29
+ </div>
30
+ </div>
31
+ </div>
@@ -0,0 +1,34 @@
1
+ <footer class="bg-dark text-center text-white">
2
+ <!-- Grid container -->
3
+ <div class="container p-4 pb-0">
4
+ <!-- Section: Social media -->
5
+ <section class="mb-4">
6
+ <!-- Facebook -->
7
+ <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-facebook-f"></i></a>
8
+
9
+ <!-- Twitter -->
10
+ <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-twitter"></i></a>
11
+
12
+ <!-- Google -->
13
+ <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-google"></i></a>
14
+
15
+ <!-- Instagram -->
16
+ <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-instagram"></i></a>
17
+
18
+ <!-- Linkedin -->
19
+ <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-linkedin-in"></i></a>
20
+
21
+ <!-- Github -->
22
+ <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-github"></i></a>
23
+ </section>
24
+ <!-- Section: Social media -->
25
+ </div>
26
+ <!-- Grid container -->
27
+
28
+ <!-- Copyright -->
29
+ <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
30
+ © 2020 Copyright:
31
+ <a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
32
+ </div>
33
+ <!-- Copyright -->
34
+ </footer>
@@ -0,0 +1,15 @@
1
+ <div class="px-4 pt-5 my-5 text-center border-bottom">
2
+ <h1 class="display-4 fw-bold">Centered screenshot</h1>
3
+ <div class="col-lg-6 mx-auto">
4
+ <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
5
+ <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
6
+ <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3" data-bs-toggle="modal" data-bs-target="#exampleModal">Click Me</button>
7
+ <%= link_to 'People', people_path, class: "btn btn-outline-secondary btn-lg px-4" %>
8
+ </div>
9
+ </div>
10
+ <div class="overflow-hidden" style="max-height: 30vh;">
11
+ <div class="container px-5">
12
+ <img src="https://getbootstrap.com/docs/5.0/examples/heroes/bootstrap-themes.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
13
+ </div>
14
+ </div>
15
+ </div>
@@ -0,0 +1,36 @@
1
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
2
+ <div class="container-fluid">
3
+ <a class="navbar-brand" href="#">Navbar</a>
4
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
5
+ <span class="navbar-toggler-icon"></span>
6
+ </button>
7
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
8
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
9
+ <li class="nav-item">
10
+ <a class="nav-link active" aria-current="page" href="#">Home</a>
11
+ </li>
12
+ <li class="nav-item">
13
+ <a class="nav-link" href="#">Link</a>
14
+ </li>
15
+ <li class="nav-item dropdown">
16
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
17
+ Dropdown
18
+ </a>
19
+ <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
20
+ <li><a class="dropdown-item" href="#">Action</a></li>
21
+ <li><a class="dropdown-item" href="#">Another action</a></li>
22
+ <li><hr class="dropdown-divider"></li>
23
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
24
+ </ul>
25
+ </li>
26
+ <li class="nav-item">
27
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
28
+ </li>
29
+ </ul>
30
+ <form class="d-flex">
31
+ <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
32
+ <button class="btn btn-outline-success" type="submit">Search</button>
33
+ </form>
34
+ </div>
35
+ </div>
36
+ </nav>
@@ -0,0 +1,5 @@
1
+ .card1 {
2
+ $color-left: #ffafbd;
3
+ $color-right: #ffc3a0;
4
+ background-image: linear-gradient(to right, $color-left, $color-right);
5
+ }
@@ -0,0 +1,3 @@
1
+ .card2 {
2
+ background-image: linear-gradient(to bottom, #ff8f1f, #f32b60);
3
+ }
@@ -0,0 +1,5 @@
1
+ .card3 {
2
+ $color-left: #ffdde1;
3
+ $color-right: #ee9ca7;
4
+ background-image: linear-gradient(to right, $color-left, $color-right);
5
+ }
@@ -0,0 +1,3 @@
1
+ //= link custom-using-css.css
2
+ //= link custom-using-scss.css
3
+ //= link custom-component.css
@@ -0,0 +1 @@
1
+ # frozen_string_literal: true