mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-04 12:17:44 +02:00
Code Issues Releases Wiki Activity

feat: add build files, add docs/ and .github/

Browse Source
This commit is contained in:
Jonas Kuske
2019-05-27 22:41:36 +02:00
parent 21869afbd7
commit 79ad695531
13 changed files with 80 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
CODE_OF_CONDUCT.md → .github/CODE_OF_CONDUCT.md vendored
View File

1
.github/CONTRIBUTING.md vendored Executable file
View File

@@ -0,0 +1 @@
> 💡 TODO: Add contributing guide

47
index.html → docs/index.html
View File

@@ -1,28 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang='en'>
<head> <head>
<title>Water.css</title> <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'> <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 async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
<script> <script>
window.dataLayer = window.dataLayer || [] window.dataLayer = window.dataLayer || []
function gtag(){dataLayer.push(arguments)} function gtag() { dataLayer.push(arguments) }
gtag('js', new Date()) gtag('js', new Date())
gtag('config', 'UA-116663597-6') gtag('config', 'UA-116663597-6')
</script> </script>
</head> </head>
<body> <body>
<h1>Water.css</h1> <h1>Water.css</h1>
<p> <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> <a href='https://github.com/kognise/water.css'>Get it already!</a>
</p> </p>
<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> </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> <h2>Goals</h2>
<ul> <ul>
@@ -36,8 +44,10 @@
<h2>Is it responsive?</h2> <h2>Is it responsive?</h2>
<p> <p>
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile responsive. <strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile
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! 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>
<p> <p>
In fact, try resizing this page. Everything flows super nicely as you'll see. In fact, try resizing this page. Everything flows super nicely as you'll see.
@@ -127,15 +137,23 @@
<h3>Typography</h3> <h3>Typography</h3>
<p> <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis
<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. 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> </p>
<blockquote cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'> <blockquote cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'>
"The HTML blockquote Element (or HTML Block Quotation Element) indicates "The HTML blockquote Element (or HTML Block Quotation Element) indicates
that the enclosed text is an extended quotation. Usually, this is that the enclosed text is an extended quotation. Usually, this is
rendered visually by indentation (see 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 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 <code>cite</code> attribute, while a text representation of the source
can be given using the <code>&ltcite&gt</code> cite element." can be given using the <code>&ltcite&gt</code> cite element."
@@ -160,9 +178,9 @@
Addresses are also styled to be <strong>awesome</strong>! Addresses are also styled to be <strong>awesome</strong>!
</p> </p>
<address> <address>
<a href='mailto:john.doe@example.com'>john.doe@example.com</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='tel:778-330-2389'>778-330-2389</a><br />
<a href='sms:666-666-6666'>666-666-6666</a><br/> <a href='sms:666-666-6666'>666-666-6666</a><br />
</address> </address>
<h1>Heading 1</h1> <h1>Heading 1</h1>
@@ -174,4 +192,5 @@
<script src='script.js'></script> <script src='script.js'></script>
</body> </body>
</html>
</html>

0
logo.png → docs/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

0
logo.svg → docs/logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
screenshot.jpg → docs/screenshot.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

0
script.js → docs/script.js
View File

53
gulpfile.js
View File

@@ -5,33 +5,36 @@ const cssnano = require('cssnano')
const sourcemaps = require('gulp-sourcemaps') const sourcemaps = require('gulp-sourcemaps')
const bytediff = require('gulp-bytediff') const bytediff = require('gulp-bytediff')
const browserSync = require('browser-sync').create() const browserSync = require('browser-sync').create()
const chalk = require('chalk'); const chalk = require('chalk')
const rename = require('gulp-rename'); const rename = require('gulp-rename')
const filter = require('gulp-filter'); const filter = require('gulp-filter')
const flatten = require('gulp-flatten') const flatten = require('gulp-flatten')
const sizereport = require('gulp-sizereport') const sizereport = require('gulp-sizereport')
const postcssCssVariables = require('postcss-css-variables') const postcssCssVariables = require('postcss-css-variables')
const postcssImport = require('postcss-import') 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 = { const paths = {
srcDir: 'src/*', srcDir: 'src/*',
docsDir: 'docs/*',
styles: { src: 'src/builds/*.css', dest: 'dist' }, styles: { src: 'src/builds/*.css', dest: 'dist' },
html: { src: 'index.html' },
} }
// https://stackoverflow.com/a/20732091 // https://stackoverflow.com/a/20732091
function humanFileSize(size) { function humanFileSize(size) {
var i = Math.floor(Math.log(size) / Math.log(1024)); 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]; return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
}; }
function formatByteMessage(source, data) { function formatByteMessage(source, data) {
const prettyStartSize = humanFileSize(data.startSize) const prettyStartSize = humanFileSize(data.startSize)
let message = ''; let message = ''
if (data.startSize !== data.endSize) { 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)) const prettySavings = humanFileSize(Math.abs(data.savings))
let prettyEndSize = humanFileSize(data.endSize) let prettyEndSize = humanFileSize(data.endSize)
@@ -41,16 +44,14 @@ function formatByteMessage(source, data) {
message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})` message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})`
} else message = chalk`kept original filesize. ({bold ${prettyStartSize}})` } 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() { 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 excludeModern = filter(file => isLegacy(file.path), { restore: true })
const excludeLegacy = filter(file => !isLegacyOrStandalone(file.path), { restore: true }) const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true })
const postcssColorMod = postcssColorModFunction({ stringifier: color => color.toRGBLegacy() })
return ( return (
gulp gulp
@@ -58,9 +59,9 @@ function style() {
// Add sourcemaps // Add sourcemaps
.pipe(sourcemaps.init()) .pipe(sourcemaps.init())
// Resolve imports and calculated colors // Resolve imports and calculated colors
.pipe(postcss([postcssImport(), postcssColorMod])) .pipe(postcss([postcssImport(), postcssColorModFunction()]))
// * Process legacy & standalone builds * // * Process legacy builds *
.pipe(excludeModern) .pipe(excludeModern)
// Inline variable values so CSS works in legacy browsers // Inline variable values so CSS works in legacy browsers
.pipe(postcss([postcssCssVariables()])) .pipe(postcss([postcssCssVariables()]))
@@ -69,7 +70,7 @@ function style() {
// autoprefix // autoprefix
.pipe(postcss([autoprefixer()])) .pipe(postcss([autoprefixer()]))
// Write the amount gained by autoprefixing // Write the amount gained by autoprefixing
.pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data))) .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
.pipe(excludeModern.restore) .pipe(excludeModern.restore)
// * Process modern builds * // * Process modern builds *
@@ -80,7 +81,7 @@ function style() {
// TODO: Use separate browserslist to only apply prefixes needed in *modern* browsers // TODO: Use separate browserslist to only apply prefixes needed in *modern* browsers
.pipe(postcss([autoprefixer()])) .pipe(postcss([autoprefixer()]))
// Write the amount gained by autoprefixing // Write the amount gained by autoprefixing
.pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data))) .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
.pipe(excludeLegacy.restore) .pipe(excludeLegacy.restore)
// Write the sourcemaps after making pre-minified changes // Write the sourcemaps after making pre-minified changes
@@ -96,7 +97,7 @@ function style() {
// Minify using cssnano // Minify using cssnano
.pipe(postcss([cssnano()])) .pipe(postcss([cssnano()]))
// Write the amount saved by minifying // 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 // Rename the files have the .min suffix
.pipe(rename({ suffix: '.min' })) .pipe(rename({ suffix: '.min' }))
// Write the sourcemaps after making all changes // Write the sourcemaps after making all changes
@@ -109,10 +110,6 @@ function style() {
) )
} }
function reload() {
browserSync.reload()
}
function watch() { function watch() {
style() style()
@@ -120,12 +117,12 @@ function watch() {
server: { server: {
baseDir: './', baseDir: './',
}, },
startPath: 'index.html' startPath: 'docs/index.html',
}) })
gulp.watch(paths.srcDir, style) 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.style = style
module.exports.watch = watch module.exports.watch = watch

2
index.js
View File

@@ -1,2 +1,2 @@
const gulpfile = require('./gulpfile') const gulpfile = require('./gulpfile')
gulpfile.watch() gulpfile.watch()

8
src/builds/dark-legacy.standalone.css Executable file
View 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';

4
src/builds/dark.standalone.css
View File

@@ -1,7 +1,7 @@
/** /**
* Standalone dark-themed version. * Standalone dark-themed version.
* Includes dark variables and core, compiled at build time so the final output * Includes dark variables and core, left as CSS variables
* will only include regular CSS, no variables. * so the theming can be adjusted at runtime.
*/ */
@import '../variables-dark.css'; @import '../variables-dark.css';

8
src/builds/light-legacy.standalone.css Executable file
View 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';

4
src/builds/light.standalone.css
View File

@@ -1,7 +1,7 @@
/** /**
* Standalone light-themed version. * Standalone light-themed version.
* Includes light variables and core, compiled at build time so the final output * Includes light variables and core, left as CSS variables
* will only include regular CSS, no variables. * so the theming can be adjusted at runtime.
*/ */
@import '../variables-light.css'; @import '../variables-light.css';