Make your prototypes look good with a stylish stylesheet!
https://rildev.github.io/stylized/
With link tag:
<link rel="stylesheet" href="https://rildev.github.io/stylized/style.min.css" />
With import:
@import url("https://rildev.github.io/stylized/style.min.css");
The JS files are optional, they only add none essential functionalities such as a drag to scroll nav and a function to show/hide the GDPR card. These are for demonstration purposes and should be tailored to your specific needs.
With link & script tags:
<head>
...
<link rel="stylesheet" href="https://rildev.github.io/stylized/style.min.css" />
</head>
<body>
...
<!-- the following scripts are optional -->
<!-- show/hide GDPR card -->
<script src="./scripts/set-gdpr-card-visibility.js"></script>
<!-- show/hide sidebar -->
<script src="./scripts/set-sidebar-visibility.js"></script>
<!-- scrollable nav overflow -->
<script src="https://unpkg.com/scrollbooster@2/dist/scrollbooster.min.js"></script>
<script src="./scripts/init-scroll-booster.js"></script>
</body>
With imports:
@import url("https://rildev.github.io/stylized/style.min.css");
@import url("https://rildev.github.io/stylized/scripts/set-gdpr-card-visibility.js");
@import url("https://rildev.github.io/stylized/scripts/set-sidebar-visibility.js");
@import url("https://unpkg.com/scrollbooster@2/dist/scrollbooster.min.js");
@import url("https://rildev.github.io/stylized/scripts/init-scroll-booster.js");
Download the NPM Package:
npm install @rildev/stylized
With link & script tags:
<head>
...
<link
rel="stylesheet"
href="node_modules/@rildev/stylized/style.css"
/>
</head>
<body>
...
<!-- the following scripts are optional -->
<!-- show/hide GDPR card -->
<script src="node_modules/@rildev/stylized/scripts/set-gdpr-card-visibility.js"></script>
<!-- show/hide sidebar -->
<script src="node_modules/@rildev/stylized/scripts/set-sidebar-visibility.js"></script>
<!-- scrollable nav overflow -->
<script src="node_modules/scrollbooster/dist/scrollbooster.min.js"></script>
<script src="node_modules/@rildev/stylized/scripts/init-scroll-booster.js"></script>
</body>
With import:
import '@rildev/stylized/style.css';
import '@rildev/stylized/scripts/set-gdpr-card-visibility';
import '@rildev/stylized/scripts/set-sidebar-visibility';
import ScrollBooster from 'scrollbooster';
import '@rildev/stylized/scripts/init-scroll-booster';
The index.html file holds all the structure and the style.css file has all the styling.
git clone [email protected]:RilDev/stylized.git && cd $_
npm i
git start
There is a pre-commit hook on the master branch that will update and commit the style.min.css file if the style.css file has been modified.
In case you need to manually minify the style.css file, you can run the minify script
npm run minify
Publish a patch
npm run package
Publish a minor update
VERSION=minor npm run package
Publish a major update
VERSION=major npm run package
- add Demo section
- find a general fix to the
import from @rildev/stylized/scripts/init-scroll-boostererror - refactor style.css
- change
emcolor to #333; - add
.color strongand.color emfor each color with hsl(x, y%, z - 13%) - add
.codeclass to highlight code - style pre > code elements like on GitHub
- full-width backgrounds add correct text colors on top
- change basic anchor color
- add link to gdpr in the GDPR card
- add real gdpr privacy policy
- create aside sticky bar
- fix broken image
- remake gallery with
css grid - test for github npm package recommended configuration
- Thanks to Jeremy Thomas and his Web Design in 4 Minutes!
- Thanks to Chris McCormick for his Minimal Stylesheet!
- Thanks to murmurs for his Colors!
- Thanks to Ilya Shubin for his ScrollBooster plugin!
UNLICENSED