initial implementation of bootstrap v5, purgecss, postcss, autoprefixer

This commit is contained in:
Adam Piontek 2021-02-25 15:27:31 -05:00
parent 7efb7f7fcc
commit d9b9da830b
9 changed files with 998 additions and 62 deletions

View file

@ -1,5 +1,5 @@
/* This file is for your main application css. */ /* Bootstrap v5 */
@import "./phoenix.css"; @import "~bootstrap/scss/bootstrap";
/* LiveView specific classes for your customizations */ /* LiveView specific classes for your customizations */
.phx-no-feedback.invalid-feedback, .phx-no-feedback.invalid-feedback,
@ -55,30 +55,6 @@
} }
/* Alerts and form errors */ /* 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 { .alert:empty {
display: none; display: none;
} }

View file

@ -17,6 +17,11 @@ import { Socket } from "phoenix";
import topbar from "topbar"; import topbar from "topbar";
import { LiveSocket } from "phoenix_live_view"; import { LiveSocket } from "phoenix_live_view";
// Bootstrap v5 js imports
import Collapse from "bootstrap/js/dist/collapse";
import Dropdown from "bootstrap/js/dist/dropdown";
// LiveSocket setup
let csrfToken = document let csrfToken = document
.querySelector("meta[name='csrf-token']") .querySelector("meta[name='csrf-token']")
.getAttribute("content"); .getAttribute("content");

911
assets/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -7,6 +7,8 @@
"watch": "webpack --mode development --watch" "watch": "webpack --mode development --watch"
}, },
"dependencies": { "dependencies": {
"@popperjs/core": "^2.8.4",
"bootstrap": "^5.0.0-beta2",
"phoenix": "file:../deps/phoenix", "phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html", "phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view", "phoenix_live_view": "file:../deps/phoenix_live_view",
@ -15,11 +17,17 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.x", "@babel/core": "^7.x",
"@babel/preset-env": "^7.x", "@babel/preset-env": "^7.x",
"autoprefixer": "^10.2.4",
"babel-loader": "^8.x", "babel-loader": "^8.x",
"copy-webpack-plugin": "^7.x", "copy-webpack-plugin": "^7.x",
"css-loader": "^5.x", "css-loader": "^5.x",
"css-minimizer-webpack-plugin": "^1.x", "css-minimizer-webpack-plugin": "^1.x",
"glob-all": "^3.2.1",
"mini-css-extract-plugin": "^1.x", "mini-css-extract-plugin": "^1.x",
"postcss": "^8.2.6",
"postcss-loader": "^5.0.0",
"postcss-scss": "^3.0.4",
"purgecss-webpack-plugin": "^4.0.2",
"sass": "^1.x", "sass": "^1.x",
"sass-loader": "^10.x", "sass-loader": "^10.x",
"webpack": "^5.x", "webpack": "^5.x",

5
assets/postcss.config.js Normal file
View file

@ -0,0 +1,5 @@
module.exports = {
parser: require("postcss-scss"),
plugins: [require("autoprefixer")],
};

View file

@ -1,8 +1,9 @@
const path = require("path"); const path = require("path");
const glob = require("glob"); const glob = require("glob-all");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin");
const PurgecssPlugin = require("purgecss-webpack-plugin");
module.exports = (env, options) => { module.exports = (env, options) => {
const devMode = options.mode !== "production"; const devMode = options.mode !== "production";
@ -27,7 +28,12 @@ module.exports = (env, options) => {
}, },
{ {
test: /\.[s]?css$/, test: /\.[s]?css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
"postcss-loader",
],
}, },
], ],
}, },
@ -36,7 +42,22 @@ module.exports = (env, options) => {
new CopyWebpackPlugin({ new CopyWebpackPlugin({
patterns: [{ from: "static/", to: "../" }], patterns: [{ from: "static/", to: "../" }],
}), }),
], ].concat(
devMode
? []
: [
new PurgecssPlugin({
paths: glob.sync([
"../**/*.html.leex",
"../**/*.html.eex",
"../**/views/**/*.ex",
"../**/live/**/*.ex",
"./js/**/*.js",
]),
safelist: [/phx/, /topbar/],
}),
]
),
optimization: { optimization: {
minimizer: ["...", new CssMinimizerPlugin()], minimizer: ["...", new CssMinimizerPlugin()],
}, },

View file

@ -13,8 +13,8 @@
</form> </form>
</section> </section>
<section class="row"> <section class="row align-items-start">
<article class="column"> <article class="col">
<h2>Resources</h2> <h2>Resources</h2>
<ul> <ul>
<li> <li>
@ -28,7 +28,7 @@
</li> </li>
</ul> </ul>
</article> </article>
<article class="column"> <article class="col">
<h2>Help</h2> <h2>Help</h2>
<ul> <ul>
<li> <li>
@ -45,4 +45,5 @@
</li> </li>
</ul> </ul>
</article> </article>
</section> </section>

View file

@ -0,0 +1,37 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" phx-update="ignore">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown" phx-update="ignore">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

View file

@ -10,9 +10,12 @@
<script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script> <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head> </head>
<body> <body>
<header>
<section class="container"> <%= render "_navbar.html", assigns %>
<nav role="navigation">
<%# <section class="container">
</section> %>
<ul> <ul>
<li><%= link "Properties", to: Routes.property_index_path(@conn, :index) %></li> <li><%= link "Properties", to: Routes.property_index_path(@conn, :index) %></li>
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %> <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
@ -20,12 +23,9 @@
<% end %> <% end %>
</ul> </ul>
<%= render "_user_menu.html", assigns %> <%= render "_user_menu.html", assigns %>
</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>
<%= @inner_content %> <%= @inner_content %>
</body> </body>
</html> </html>