This repository has been archived by the owner on Apr 28, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
nightshade variant and darkmode.js library (#6)
* remove vendor prefix, gets generated anyway * remove @ extends, as this does not work in nested media queries (extends to base class) * added nightshade scss * compiled css * compiled nightshade css * added nightfall scss * compiled nightfall css * Update index.html * adding eslint to the project * getting the hang of this js module thing * moved css from dist to dist/css * fixed a few paths from the dist css move * wip 2021-02-02 * Update README.md * wip 2021-02-02 * nightshade variant and darkmode.js library ready * compiled nightshade variant and darkmode.js library
- Loading branch information
1 parent
05ac284
commit 1ad0447
Showing
59 changed files
with
17,530 additions
and
369 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,3 +12,7 @@ insert_final_newline = true | |
[*.json] | ||
indent_size = 4 | ||
tab_width = 4 | ||
|
||
[.eslintrc] | ||
indent_size = 4 | ||
tab_width = 4 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
node_modules | ||
.vscode | ||
dist | ||
build | ||
examples | ||
.cache | ||
**/*.min.js | ||
*.html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
{ | ||
"root": true, | ||
"env": { | ||
"browser": true, | ||
"node": true, | ||
"jquery": false, | ||
"es6": true | ||
}, | ||
"parserOptions": { | ||
"sourceType": "module", | ||
"allowImportExportEverywhere": true | ||
}, | ||
"extends": [ | ||
"eslint:recommended" | ||
], | ||
"parser": "babel-eslint", | ||
"rules": { | ||
"capitalized-comments": "off", | ||
"indent": [ | ||
"error", | ||
2, | ||
{ | ||
"MemberExpression": "off", | ||
"SwitchCase": 1 | ||
} | ||
], | ||
"max-params": [ | ||
"warn", | ||
5 | ||
], | ||
"multiline-ternary": [ | ||
"error", | ||
"always-multiline" | ||
], | ||
"new-cap": [ | ||
"error", | ||
{ | ||
"properties": false | ||
} | ||
], | ||
"no-console": "warn", | ||
"object-curly-spacing": [ | ||
"error", | ||
"always" | ||
], | ||
"semi": [ | ||
"error", | ||
"never" | ||
], | ||
"unicorn/consistent-function-scoping": "off", | ||
"unicorn/explicit-length-check": "off", | ||
"unicorn/no-array-callback-reference": "off", | ||
"unicorn/no-array-for-each": "off", | ||
"unicorn/no-for-loop": "off", | ||
"unicorn/no-null": "off", | ||
"unicorn/no-useless-undefined": "off", | ||
"unicorn/prefer-dom-node-append": "off", | ||
"unicorn/prefer-dom-node-dataset": "off", | ||
"unicorn/prefer-dom-node-remove": "off", | ||
"unicorn/prefer-query-selector": "off", | ||
"unicorn/prefer-spread": "off", | ||
"unicorn/prevent-abbreviations": "off" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,7 @@ | ||
node_modules* | ||
.cache/** | ||
node_modules | ||
.cache | ||
~* | ||
_/* | ||
!scss/**/_* | ||
*.sublime-* | ||
package-lock.json | ||
.DS_store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
node_modules | ||
.cache | ||
~* | ||
_/* | ||
!scss/**/_* | ||
package-lock.json | ||
.DS_store | ||
|
||
.github | ||
.git | ||
.gitignore | ||
.npmignore | ||
.editorconfig | ||
.eslint* | ||
.stylelint* | ||
|
||
examples | ||
index.html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
{ | ||
"recommendations": [ | ||
"editorconfig.editorconfig", | ||
"stylelint.vscode-stylelint" | ||
"stylelint.vscode-stylelint", | ||
"dbaeumer.vscode-eslint" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,11 +19,12 @@ This code will make little sense if you don't read | |
|
||
## What do you get? | ||
|
||
The code only compiles the [Method 1](https:/vinorodrigues/bootstrap-dark/blob/master/README.md#method-1) and [Method 4](https:/vinorodrigues/bootstrap-dark/blob/master/README.md#method-4) variants (for BS5) of the topics discussed in the original body of work. | ||
The code only compiles the [Method 1](https:/vinorodrigues/bootstrap-dark/blob/master/README.md#method-1), [Method 3](https:/vinorodrigues/bootstrap-dark/blob/master/README.md#method-3) and [Method 4](https:/vinorodrigues/bootstrap-dark/blob/master/README.md#method-4) variants (for BS5) of the topics discussed in the original body of work. | ||
|
||
i.e.: | ||
|
||
* `bootstrap-night`, _and;_ | ||
* `bootstrap-night`, | ||
* `bootsrtap-nightshade`, _and;_ | ||
* `bootstrap-dark`. | ||
|
||
|
||
|
@@ -49,15 +50,15 @@ If you're a theme builder or want to use its principles in your own project you' | |
> <u style="text-decoration:none;color:red">***NOTE:***</u> The build system is based on [NPM Scripts](https://docs.npmjs.com/cli/v6/using-npm/scripts). Most of the build tools _(NPM modules)_ will need to be installed as *"global"* to ensure the scripts are executable from the command line. | ||
```bash | ||
npm install -g autoprefixer browser-sync clean-css-cli cross-env find-unused-sass-variables nodemon npm-run-all postcss postcss-cli rtlcss sass stylelint stylelint-config-twbs-bootstrap | ||
npm i -g autoprefixer browser-sync clean-css-cli cross-env find-unused-sass-variables nodemon npm-run-all postcss postcss-cli rtlcss sass stylelint stylelint-config-twbs-bootstrap rollup rollup-plugin-terser | ||
``` | ||
|
||
|
||
### NPM | ||
|
||
[![](https://img.shields.io/npm/v/bootstrap-dark-5)](http://npmjs.com/package/bootstrap-dark-5) | ||
|
||
Developers can include the `scss` and `dist` folders into your own project with: | ||
Developers can include the `scss`, `js` and `dist` folders into your own project with: | ||
|
||
`npm install bootstrap-dark-5` | ||
|
||
|
@@ -70,18 +71,39 @@ You can also hotlink the theme via CDN with [jsdelivr.com](https://www.jsdelivr. | |
|
||
You can access the theme CSS file from the GitHub release: | ||
|
||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-dark.min.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-dark.min.css) | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-dark.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-dark.css) | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-night.min.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-night.min.css) | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-night.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-night.css) | ||
* **`bootstrap-dark`** - the @media `perfers-color-scheme` variant | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.min.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.min.css) | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.css) | ||
|
||
* **`bootstrap-nightshade`** - the `html.body` css class + JS library variant | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.min.css`](https://cdn.jsdelivr.net/npm/[email protected]/css/dist/bootstrap-night.min.css) | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.min.js`](https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.min.js) | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css) | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.js`](https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.js) | ||
|
||
* **`bootstrap-night`** - that dark theme only variant | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.min.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/css.bootstrap-night.min.css) | ||
* [`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css`](https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css) | ||
|
||
* Source etc. are [here](https://cdn.jsdelivr.net/gh/vinorodrigues/bootstrap-dark-5/), but I recommend using [GitHub](https:/vinorodrigues/bootstrap-dark-5). | ||
|
||
|
||
### Feedback | ||
## Further reading | ||
|
||
**Must reads** for all developers wanting to write for dark mode: | ||
|
||
* web.dev, Thomas Steiner ([@tomayac](https:/tomayac)), Jun 27, 2019 *(updated Jun 9, 2020)*, [prefers-color-scheme: Hello darkness, my old friend](https://web.dev/prefers-color-scheme/) | ||
|
||
* web.dev, Thomas Steiner ([@tomayac](https:/tomayac)), Apr 8, 2020 *(updated Jun 16, 2020)*, [Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag](https://web.dev/color-scheme/) | ||
|
||
* CSS-TRICKS, Adhuham, Sep 9, 2020 [A Complete Guide to Dark Mode on the Web](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/) | ||
|
||
* My bit about [images and other considerations](https://vinorodrigues.github.io/bootstrap-dark/readme.html#but-thats-not-enough) in my [.. Definitive Guide ..](http://vinorodrigues.github.io/bootstrap-dark) piece. | ||
|
||
|
||
If you have useful feedback drop me an "Issue" on the [GitHub Issues](https:/vinorodrigues/bootstrap-dark-5/issues) page. | ||
## Feedback | ||
|
||
> During the WIP period I'll be open to feedback on my Slack channel: [tecsmith -> bootstrap-dark](https://tecsmith.slack.com/messages/boostrap-dark/) | ||
If you have [useful feedback](https://alearningaday.blog/2020/08/04/useful-feedback/) drop me an "Issue" on the [GitHub Issues](https://github.com/vinorodrigues/bootstrap-dark-5/issues) page. | ||
|
||
|
||
--- | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
'use strict'; | ||
|
||
const pkg = require('../package.json'); | ||
const year = new Date().getFullYear(); | ||
|
||
function getBanner() { | ||
return `/*! | ||
* Bootstrap-Dark-5 v${pkg.version} (${pkg.homepage}) | ||
* Copyright ${year != 2021 ? '2021-' : ''}${year} ${pkg.author} | ||
* Licensed under MIT (https:/vinorodrigues/bootstrap-dark-5/blob/main/LICENSE.md) | ||
*/` + "\n"; | ||
} | ||
|
||
module.exports = getBanner; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
import resolve from "@rollup/plugin-node-resolve"; | ||
import commonjs from "@rollup/plugin-commonjs"; | ||
import babel from "@rollup/plugin-babel"; | ||
import { terser } from "rollup-plugin-terser"; | ||
|
||
const banner = require('./banner.js'); | ||
|
||
const commonConfig = { | ||
input: 'js/src/darkmode.js', | ||
output: { | ||
banner, | ||
name: 'darkmode' | ||
}, | ||
plugins: [ | ||
resolve({ | ||
customResolveOptions: { | ||
moduleDirectories: [ | ||
'node_modules' | ||
] | ||
} | ||
}), | ||
babel({ | ||
exclude: 'node_modules/**', | ||
babelHelpers: 'inline' | ||
}), | ||
commonjs() | ||
] | ||
}; | ||
|
||
const MIN = process.env.MIN === 'true'; | ||
|
||
// ---------- ESM ---------- | ||
|
||
// ESM config | ||
const esmConfig = Object.assign({}, commonConfig); | ||
esmConfig.output = Object.assign({}, commonConfig.output, { | ||
file: 'dist/js/darkmode.esm.js', | ||
format: 'esm' | ||
}); | ||
|
||
// ESM prod config | ||
const esmProdConfig = Object.assign({}, esmConfig); | ||
esmProdConfig.output = Object.assign({}, esmConfig.output, { | ||
file: 'dist/js/darkmode.esm.min.js' | ||
}); | ||
esmProdConfig.plugins = [ | ||
...esmConfig.plugins, | ||
terser() | ||
]; | ||
|
||
// ---------- CJS ---------- | ||
|
||
// CJS config | ||
const cjsConfig = Object.assign({}, commonConfig); | ||
cjsConfig.output = Object.assign({}, commonConfig.output, { | ||
file: 'dist/js/darkmode.js', | ||
format: 'cjs' | ||
}); | ||
cjsConfig.plugins = [ | ||
...commonConfig.plugins | ||
]; | ||
|
||
// Production config | ||
const cjsProdConfig = Object.assign({}, cjsConfig); | ||
cjsProdConfig.output = Object.assign({}, cjsConfig.output, { | ||
file: 'dist/js/darkmode.min.js' | ||
}); | ||
cjsProdConfig.plugins = [ | ||
...cjsConfig.plugins, | ||
terser() | ||
]; | ||
|
||
// ---------- Build ---------- | ||
|
||
let configurations = []; | ||
if (!MIN) { | ||
configurations.push( | ||
esmConfig, | ||
cjsConfig | ||
); | ||
} else { | ||
configurations.push( | ||
esmProdConfig, | ||
cjsProdConfig | ||
); | ||
} | ||
|
||
export default configurations; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.