[Task-3][Chore] Set up Bootstrap

Merge pull request #19 from rafayet-monon/chore/task-3-setup-bootstrap

assets/css/_variables.scss

@@ -0,0 +1 @@
+// Site variables will be stored here

assets/css/app.scss

@@ -1,36 +1,18 @@
-/* This file is for your main application css. */
-@import "./phoenix.css";
+// Variables
+@import 'variables';
 
-/* Alerts and form errors */
-.alert {
-  padding: 15px;
-  margin-bottom: 20px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-.alert-info {
-  color: #31708f;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-}
-.alert-warning {
-  color: #8a6d3b;
-  background-color: #fcf8e3;
-  border-color: #faebcc;
-}
-.alert-danger {
-  color: #a94442;
-  background-color: #f2dede;
-  border-color: #ebccd1;
-}
-.alert p {
-  margin-bottom: 0;
-}
-.alert:empty {
-  display: none;
-}
-.invalid-feedback {
-  color: #a94442;
-  display: block;
-  margin: -1rem 0 2rem;
-}
+// Dependencies
+@import 'vendor/bootstrap/bootstrap';
+
+// Functions
+@import 'functions/sizing';
+
+// Mixins
+
+// Base
+
+// Layouts
+@import 'layouts/app';
+// Components
+
+// Screens

assets/css/functions/_sizing.scss

@@ -0,0 +1,29 @@
+@function em($values, $base-font-size: 16px) {
+  $list: ();
+
+  @each $value in $values {
+    @if ($value == 0 or $value == auto) {
+      $list: append($list, $value);
+    } @else {
+      $em-value: ($value / $base-font-size) + em;
+      $list: append($list, $em-value);
+    }
+  }
+
+  @return $list;
+}
+
+@function rem($values, $base-font-size: 16px) {
+  $list: ();
+
+  @each $value in $values {
+    @if ($value == 0 or $value == auto) {
+      $list: append($list, $value);
+    } @else {
+      $rem-value: ($value / $base-font-size) + rem;
+      $list: append($list, $rem-value);
+    }
+  }
+
+  @return $list;
+}

assets/css/layouts/_app.scss

@@ -0,0 +1,3 @@
+.app-content {
+  padding: rem(20px);
+}

assets/css/vendor/bootstrap/bootstrap.scss

@@ -0,0 +1,47 @@
+// By default every component is imported
+// But DO NOT import the whole framework but instead
+// pick what the project requires
+// and comment out the rest.
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/reboot';
+@import '~bootstrap/scss/utilities';
+//
+//// Components
+//
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/nav';
+@import '~bootstrap/scss/navbar';
+// Re-enable these if needed.
+
+//@import '~bootstrap/scss/forms';
+//@import '~bootstrap/scss/buttons';
+//@import '~bootstrap/scss/dropdown';
+//@import '~bootstrap/scss/transitions';
+//@import '~bootstrap/scss/card';
+//@import '~bootstrap/scss/type';
+//@import '~bootstrap/scss/breadcrumb';
+//@import '~bootstrap/scss/badge';
+//@import '~bootstrap/scss/modal';
+//@import '~bootstrap/scss/popover';
+//@import '~bootstrap/scss/button-group';
+//@import '~bootstrap/scss/input-group';
+//@import '~bootstrap/scss/images';
+//@import '~bootstrap/scss/tables';
+//@import '~bootstrap/scss/custom-forms';
+//@import '~bootstrap/scss/code';
+//@import '~bootstrap/scss/pagination';
+//@import '~bootstrap/scss/root';
+//@import '~bootstrap/scss/tooltip';
+//@import '~bootstrap/scss/popover';
+//@import '~bootstrap/scss/carousel';
+//@import '~bootstrap/scss/spinners';
+//@import '~bootstrap/scss/progress';
+//@import '~bootstrap/scss/jumbotron';
+//@import '~bootstrap/scss/toasts';
+//@import '~bootstrap/scss/alert';
+//@import '~bootstrap/scss/media';
+//@import '~bootstrap/scss/list-group';
+//@import '~bootstrap/scss/close';

assets/js/app.js

@@ -17,3 +17,6 @@ import "core-js/stable"
 import "regenerator-runtime/runtime"
 
 import "phoenix_html"
+
+// Bootstrap native
+import './vendor/bootstrap';

assets/js/vendor/bootstrap/index.js

@@ -0,0 +1,13 @@
+import bootstrap from 'bootstrap.native/dist/bootstrap-native';
+
+export const Alert = bootstrap.Alert;
+export const Button = bootstrap.Button;
+export const Carousel = bootstrap.Carousel;
+export const Collapse = bootstrap.Collapse;
+export const Dropdown = bootstrap.Dropdown;
+export const Modal = bootstrap.Modal;
+export const Popover = bootstrap.Popover;
+export const ScrollSpy = bootstrap.ScrollSpy;
+export const Tab = bootstrap.Tab;
+export const Toast = bootstrap.Toast;
+export const Tooltip = bootstrap.Tooltip;

assets/package.json

@@ -8,9 +8,11 @@
     "build:dev": "webpack --mode development"
   },
   "dependencies": {
+    "bootstrap": "5.0.1",
+    "bootstrap.native": "3.0.15",
+    "core-js": "^3.7.0",
     "phoenix": "file:../deps/phoenix",
-    "phoenix_html": "file:../deps/phoenix_html",
-    "core-js": "^3.7.0"
+    "phoenix_html": "file:../deps/phoenix_html"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

lib/elixir_search_extractor_web/templates/layout/app.html.eex

@@ -9,25 +9,12 @@
     <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </head>
   <body>
-    <header>
-      <section class="container">
-        <nav role="navigation">
-          <ul>
-            <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
-            <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
-              <li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
-            <% end %>
-          </ul>
-        </nav>
-        <a href="https://phoenixframework.org/" class="phx-logo">
-          <img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
-        </a>
-      </section>
-    </header>
-    <main role="main" class="container">
+    <header class="app-header"></header>
+    <main class="app-content">
       <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
       <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
       <%= @inner_content %>
     </main>
+    <footer class="app-footer"></footer>
   </body>
 </html>