mirror of
https://github.com/kognise/water.css.git
synced 2025-04-25 11:43:14 +02:00
feat: add build files, add docs/ and .github/
This commit is contained in:
Jonas Kuske
parent
21869afbd7
commit
79ad695531
1
.github/CONTRIBUTING.md
vendored
Executable file
1
.github/CONTRIBUTING.md
vendored
Executable file
@ -0,0 +1 @@
|
||||
> 💡 TODO: Add contributing guide
|
||||
@ -1,28 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
|
||||
<head>
|
||||
<title>Water.css</title>
|
||||
<link id='stylesheet' rel='stylesheet' href='dist/dark.css'>
|
||||
<link id='stylesheet' rel='stylesheet' href='../dist/dark.css'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||
|
||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || []
|
||||
function gtag(){dataLayer.push(arguments)}
|
||||
function gtag() { dataLayer.push(arguments) }
|
||||
gtag('js', new Date())
|
||||
gtag('config', 'UA-116663597-6')
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Water.css</h1>
|
||||
<p>
|
||||
Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.
|
||||
Water.css is a just-add-css collection of styles to make simple websites like this just a
|
||||
little bit nicer.
|
||||
<a href='https://github.com/kognise/water.css'>Get it already!</a>
|
||||
</p>
|
||||
<p>
|
||||
Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
|
||||
Now you can write your simple static site with nice semantic html, and Water.css will manage
|
||||
the styling for you.
|
||||
</p>
|
||||
<a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css' target='_blank'><img id='ph' src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
|
||||
<a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css'
|
||||
target='_blank'><img id='ph'
|
||||
src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily'
|
||||
alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed'
|
||||
style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
|
||||
|
||||
<h2>Goals</h2>
|
||||
<ul>
|
||||
@ -36,8 +44,10 @@
|
||||
|
||||
<h2>Is it responsive?</h2>
|
||||
<p>
|
||||
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile responsive.
|
||||
Just add the famous <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'>responsive viewport tag</a> and you'll be good to go!
|
||||
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile
|
||||
responsive.
|
||||
Just add the famous <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'>responsive
|
||||
viewport tag</a> and you'll be good to go!
|
||||
</p>
|
||||
<p>
|
||||
In fact, try resizing this page. Everything flows super nicely as you'll see.
|
||||
@ -127,15 +137,23 @@
|
||||
|
||||
<h3>Typography</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
|
||||
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href='/'>here</a>'s a link.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis
|
||||
ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis
|
||||
ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius
|
||||
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu
|
||||
felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui
|
||||
aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos.
|
||||
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is
|
||||
emphasized!</em> And heck, <a href='/'>here</a>'s a link.
|
||||
</p>
|
||||
|
||||
<blockquote cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'>
|
||||
"The HTML blockquote Element (or HTML Block Quotation Element) indicates
|
||||
that the enclosed text is an extended quotation. Usually, this is
|
||||
rendered visually by indentation (see
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'>Notes</a>
|
||||
<a
|
||||
href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'>Notes</a>
|
||||
for how to change it). A URL for the source of the quotation may be given using the
|
||||
<code>cite</code> attribute, while a text representation of the source
|
||||
can be given using the <code><cite></code> cite element."
|
||||
@ -160,9 +178,9 @@
|
||||
Addresses are also styled to be <strong>awesome</strong>!
|
||||
</p>
|
||||
<address>
|
||||
<a href='mailto:john.doe@example.com'>john.doe@example.com</a><br/>
|
||||
<a href='tel:778-330-2389'>778-330-2389</a><br/>
|
||||
<a href='sms:666-666-6666'>666-666-6666</a><br/>
|
||||
<a href='mailto:john.doe@example.com'>john.doe@example.com</a><br />
|
||||
<a href='tel:778-330-2389'>778-330-2389</a><br />
|
||||
<a href='sms:666-666-6666'>666-666-6666</a><br />
|
||||
</address>
|
||||
|
||||
<h1>Heading 1</h1>
|
||||
@ -174,4 +192,5 @@
|
||||
|
||||
<script src='script.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
53
gulpfile.js
53
gulpfile.js
@ -5,33 +5,36 @@ const cssnano = require('cssnano')
|
||||
const sourcemaps = require('gulp-sourcemaps')
|
||||
const bytediff = require('gulp-bytediff')
|
||||
const browserSync = require('browser-sync').create()
|
||||
const chalk = require('chalk');
|
||||
const rename = require('gulp-rename');
|
||||
const filter = require('gulp-filter');
|
||||
const chalk = require('chalk')
|
||||
const rename = require('gulp-rename')
|
||||
const filter = require('gulp-filter')
|
||||
const flatten = require('gulp-flatten')
|
||||
const sizereport = require('gulp-sizereport')
|
||||
const postcssCssVariables = require('postcss-css-variables')
|
||||
const postcssImport = require('postcss-import')
|
||||
const postcssColorModFunction = require('postcss-color-mod-function')
|
||||
const postcssColorModFunction = require('postcss-color-mod-function').bind(null, {
|
||||
/* Use `.toRGBLegacy()` as other methods can result in lots of decimals */
|
||||
stringifier: color => color.toRGBLegacy(),
|
||||
})
|
||||
|
||||
const paths = {
|
||||
srcDir: 'src/*',
|
||||
docsDir: 'docs/*',
|
||||
styles: { src: 'src/builds/*.css', dest: 'dist' },
|
||||
html: { src: 'index.html' },
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/20732091
|
||||
function humanFileSize(size) {
|
||||
var i = Math.floor(Math.log(size) / Math.log(1024));
|
||||
return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
|
||||
};
|
||||
var i = Math.floor(Math.log(size) / Math.log(1024))
|
||||
return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
|
||||
}
|
||||
|
||||
function formatByteMessage(source, data) {
|
||||
const prettyStartSize = humanFileSize(data.startSize)
|
||||
let message = '';
|
||||
let message = ''
|
||||
|
||||
if (data.startSize !== data.endSize) {
|
||||
const change = (data.savings > 0 ? 'saved' : 'gained')
|
||||
const change = data.savings > 0 ? 'saved' : 'gained'
|
||||
const prettySavings = humanFileSize(Math.abs(data.savings))
|
||||
let prettyEndSize = humanFileSize(data.endSize)
|
||||
|
||||
@ -41,16 +44,14 @@ function formatByteMessage(source, data) {
|
||||
message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})`
|
||||
} else message = chalk`kept original filesize. ({bold ${prettyStartSize}})`
|
||||
|
||||
return chalk`{cyan ${(source.padStart(12, ' '))}}: {bold ${data.fileName}} ${message}`
|
||||
return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
|
||||
}
|
||||
|
||||
function style() {
|
||||
const isLegacyOrStandalone = path => /standalone|legacy/.test(path)
|
||||
const isLegacy = path => /legacy/.test(path)
|
||||
|
||||
const excludeModern = filter(file => isLegacyOrStandalone(file.path), { restore: true })
|
||||
const excludeLegacy = filter(file => !isLegacyOrStandalone(file.path), { restore: true })
|
||||
|
||||
const postcssColorMod = postcssColorModFunction({ stringifier: color => color.toRGBLegacy() })
|
||||
const excludeModern = filter(file => isLegacy(file.path), { restore: true })
|
||||
const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true })
|
||||
|
||||
return (
|
||||
gulp
|
||||
@ -58,9 +59,9 @@ function style() {
|
||||
// Add sourcemaps
|
||||
.pipe(sourcemaps.init())
|
||||
// Resolve imports and calculated colors
|
||||
.pipe(postcss([postcssImport(), postcssColorMod]))
|
||||
.pipe(postcss([postcssImport(), postcssColorModFunction()]))
|
||||
|
||||
// * Process legacy & standalone builds *
|
||||
// * Process legacy builds *
|
||||
.pipe(excludeModern)
|
||||
// Inline variable values so CSS works in legacy browsers
|
||||
.pipe(postcss([postcssCssVariables()]))
|
||||
@ -69,7 +70,7 @@ function style() {
|
||||
// autoprefix
|
||||
.pipe(postcss([autoprefixer()]))
|
||||
// Write the amount gained by autoprefixing
|
||||
.pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(excludeModern.restore)
|
||||
|
||||
// * Process modern builds *
|
||||
@ -80,7 +81,7 @@ function style() {
|
||||
// TODO: Use separate browserslist to only apply prefixes needed in *modern* browsers
|
||||
.pipe(postcss([autoprefixer()]))
|
||||
// Write the amount gained by autoprefixing
|
||||
.pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(excludeLegacy.restore)
|
||||
|
||||
// Write the sourcemaps after making pre-minified changes
|
||||
@ -96,7 +97,7 @@ function style() {
|
||||
// Minify using cssnano
|
||||
.pipe(postcss([cssnano()]))
|
||||
// Write the amount saved by minifying
|
||||
.pipe(bytediff.stop((data) => formatByteMessage('cssnano', data)))
|
||||
.pipe(bytediff.stop(data => formatByteMessage('cssnano', data)))
|
||||
// Rename the files have the .min suffix
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
// Write the sourcemaps after making all changes
|
||||
@ -109,10 +110,6 @@ function style() {
|
||||
)
|
||||
}
|
||||
|
||||
function reload() {
|
||||
browserSync.reload()
|
||||
}
|
||||
|
||||
function watch() {
|
||||
style()
|
||||
|
||||
@ -120,12 +117,12 @@ function watch() {
|
||||
server: {
|
||||
baseDir: './',
|
||||
},
|
||||
startPath: 'index.html'
|
||||
startPath: 'docs/index.html',
|
||||
})
|
||||
|
||||
gulp.watch(paths.srcDir, style)
|
||||
gulp.watch([paths.srcDir, paths.html.src], reload)
|
||||
gulp.watch([paths.srcDir, paths.docsDir], browserSync.reload)
|
||||
}
|
||||
|
||||
module.exports.style = style
|
||||
module.exports.watch = watch
|
||||
module.exports.watch = watch
|
||||
|
||||
2
index.js
2
index.js
@ -1,2 +1,2 @@
|
||||
const gulpfile = require('./gulpfile')
|
||||
gulpfile.watch()
|
||||
gulpfile.watch()
|
||||
|
||||
8
src/builds/dark-legacy.standalone.css
Executable file
8
src/builds/dark-legacy.standalone.css
Executable file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* Standalone dark-themed version for legacy browsers.
|
||||
* Includes dark variables and core, compiled at build time so the final output
|
||||
* will only include regular CSS, no variables.
|
||||
*/
|
||||
|
||||
@import '../variables-dark.css';
|
||||
@import '../parts/_core.css';
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Standalone dark-themed version.
|
||||
* Includes dark variables and core, compiled at build time so the final output
|
||||
* will only include regular CSS, no variables.
|
||||
* Includes dark variables and core, left as CSS variables
|
||||
* so the theming can be adjusted at runtime.
|
||||
*/
|
||||
|
||||
@import '../variables-dark.css';
|
||||
|
||||
8
src/builds/light-legacy.standalone.css
Executable file
8
src/builds/light-legacy.standalone.css
Executable file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* Standalone light-themed version for legacy browsers.
|
||||
* Includes light variables and core, compiled at build time so the final output
|
||||
* will only include regular CSS, no variables.
|
||||
*/
|
||||
|
||||
@import '../variables-light.css';
|
||||
@import '../parts/_core.css';
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Standalone light-themed version.
|
||||
* Includes light variables and core, compiled at build time so the final output
|
||||
* will only include regular CSS, no variables.
|
||||
* Includes light variables and core, left as CSS variables
|
||||
* so the theming can be adjusted at runtime.
|
||||
*/
|
||||
|
||||
@import '../variables-light.css';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user