diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..e09b844f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +# This file is for unifying the coding style for different editors and IDEs +# editorconfig.org + +root = true + +[*] +end_of_line = lf +charset = utf-8 +insert_final_newline = true +trim_trailing_whitespace = true +indent_style = space +indent_size = 2 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 00000000..42ad8b8b --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,48 @@ +# Github actions workflow name +name: CI + +# Triggers the workflow on push or pull request events +on: + push: + branches: [main, master] + tags: ['**'] + pull_request: + branches: + - master + +jobs: + node_tests: + name: 'Test nib on ${{matrix.os}} with node${{matrix.node}}' + strategy: + matrix: + os: [ubuntu-latest] + # Latest four Nodejs LTS version + node: [10, 12, 14, 16] + runs-on: ${{ matrix.os }} + steps: + # Pull repo to test machine + - uses: actions/checkout@v2 + # Configures the node version used on GitHub-hosted runners + - uses: actions/setup-node@v2 + with: + # The Node.js version to configure + node-version: ${{ matrix.node }} + # Caching dependencies to speed up workflows + - name: Get npm cache directory + id: npm-cache-dir + run: | + echo "::set-output name=dir::$(npm config get cache)" + - uses: actions/cache@v2 + id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true' + with: + path: ${{ steps.npm-cache-dir.outputs.dir }} + key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} + restore-keys: | + ${{ runner.os }}-node- + - name: Install npm dependencies + run: npm install + - name: Print put node & npm version + # Output useful info for debugging. + run: node --version && npm --version + - name: Run Test + run: npm test diff --git a/.gitignore b/.gitignore index 8c102d75..aeb71b7f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +.idea *.css +!test/cases/*.css .DS_Store node_modules +*.swp diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index e69de29b..00000000 diff --git a/History.md b/History.md deleted file mode 100644 index 96a378d0..00000000 --- a/History.md +++ /dev/null @@ -1,46 +0,0 @@ - -0.0.8 / 2011-05-24 -================== - - * Added _config.styl_ - * Added linear gradients for Opera, IE10 and WebKit (non-legacy) - * Moved `no-wrap` back to _vendor.styl_ - -0.0.7 / 2011-04-24 -================== - - * Added moz to `transition()`. Closes #4 - * Refactored reset - -0.0.6 / 2011-04-15 -================== - - * Added `has-canvas` global - * Added `clearfix()` [Isaac Johnston] - * Added `relative()` - * Fixed; ignore size unit for `linear-gradient()` when node-canvas is not available - -0.0.5 / 2011-04-12 -================== - - * `.include(nib.path)` within the plugin - -0.0.4 / 2011-04-12 -================== - - * Removed display inline - -0.0.3 / 2011-04-11 -================== - - * Fixed no-wrap backwards assignment - -0.0.2 / 2011-04-11 -================== - - * Fixed `no-wrap`, now a literal of `nowrap` - -0.0.1 / 2011-04-11 -================== - - * Initial release diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..8200e144 --- /dev/null +++ b/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2014 TJ Holowaychuk + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/Makefile b/Makefile deleted file mode 100644 index d77780bb..00000000 --- a/Makefile +++ /dev/null @@ -1,8 +0,0 @@ - -test: - @node test/runner.js test/cases/*.styl - -test-server: - @node test/server.js - -.PHONY: test test-server \ No newline at end of file diff --git a/Readme.md b/README.md similarity index 50% rename from Readme.md rename to README.md index 29e4644d..6db9de68 100644 --- a/Readme.md +++ b/README.md @@ -1,8 +1,6 @@ -# Nib +# Nib [![npm](https://img.shields.io/npm/v/nib)](https://www.npmjs.com/package/nib) [![build status](https://github.com/stylus/nib/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/stylus/nib/actions/workflows/ci.yml) - Stylus mixins, utilities, components, and gradient image generation. CSS is your bitch! - - __NOTE__: better docs coming soon + Stylus mixins, utilities, components, and gradient image generation. Don't forget to check out the [documentation](http://stylus.github.io/nib). ## Installation @@ -11,8 +9,8 @@ $ npm install nib ``` If the image generation features of Nib are desired, such as generating the linear gradient images, install [node-canvas](http://github.com/learnboost/node-canvas): - -```bash + +```bash $ npm install canvas ``` @@ -47,15 +45,16 @@ server.use(stylus.middleware({ ```css @import 'https://github.com/nib' ``` - + Or you may also pick and choose based on the directory structure in `./lib`, for example: - + ```css @import 'https://github.com/nib/gradients' - @import 'https://github.com/nib/buttons' + @import 'https://github.com/nib/overflow' + @import 'https://github.com/nib/normalize' ``` - -to be continued.... + +_To be continued..._ ## More Information @@ -64,51 +63,30 @@ to be continued.... ## Testing You will first need to install the dependencies: - + ```bash $ npm install -d ``` - + Run the automated test cases: - + ```bash - $ make test + $ npm test ``` - + For visual testing run the test server: - + ```bash - $ make test-server + $ npm run-script test-server ``` - + Then visit `localhost:3000` in your browser. ## Contributors - - TJ Holowaychuk - - Isaac Johnston - -## License - -(The MIT License) - -Copyright (c) 2011 TJ Holowaychuk <tj@vision-media.ca> - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -'Software'), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. +I would love more contributors. And if you have helped out, you are awesome! I want to give a huge thanks to these people: -THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. -IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY -CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, -TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE -SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + - [TJ Holowaychuk](https://github.com/tj) (Original Creator) + - [Sean Lang](https://github.com/slang800) (Current Maintainer) + - [Isaac Johnston](https://github.com/superstructor) + - [Everyone Else](https://github.com/tj/nib/contributors) diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..00459e00 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,320 @@ +# Mixins +## Gradient +Nib's gradient support is by far the largest feature it provides. Not only is the syntax extremely similar to what you would normally write, it's more forgiving, expands to vendor equivalents, and can even produce a PNG for older browsers with [node-canvas](http://github.com/learnboost/node-canvas). + +```stylus +body + background linear-gradient(top, white, black) +``` + +```css +body { + background: -webkit-linear-gradient(top, #fff, #000); + background: -moz-linear-gradient(top, #fff, #000); + background: -o-linear-gradient(top, #fff, #000); + background: -ms-linear-gradient(top, #fff, #000); + background: linear-gradient(to bottom, #fff, #000); +} +``` + +![](http://f.cl.ly/items/1q25061X2Q2U0p472L02/Screenshot.png) + +Any number of color stops may be provided: + +```stylus +body + background linear-gradient(bottom left, white, red, blue, black) +``` + +![](http://f.cl.ly/items/2I0k3D0A2y0n3i443g2W/Screenshot.png) + +Units may be placed before or after the color: + +```stylus +body + background linear-gradient(left, 80% red, #000) + background linear-gradient(top, #eee, 90% white, 10% black) +``` + +![](http://f.cl.ly/items/2B1U3m0t2T1B420I3C3I/Screenshot.png) +![](http://f.cl.ly/items/1T1P1x0n1X3k132o3V0F/Screenshot.png) + +## Position + +The position mixins `absolute`, `fixed`, and `relative` provide a shorthand variant to what is otherwise three CSS properties. The syntax is as follows: + +``` +fixed|absolute|relative: top|bottom [n] left|right [n] +``` + +The following example will default to (0,0): + +```stylus +#back-to-top + fixed bottom right +``` + +```css +#back-to-top { + position: fixed; + bottom: 0; + right: 0; +} +``` + +You may also specify the units: + +```stylus +#back-to-top + fixed bottom 10px right 5px +``` + +```css +#back-to-top { + position: fixed; + bottom: 10px; + right: 5px; +} +``` + +## Clearfix +Clearfixing causes containers to expand to contain floated contents. A simple example is shown [here](http://learnlayout.com/clearfix.html). + +The clearfix mixin takes no arguments and expands to a form that provides extremely robust browser support. + +```stylus +.clearfix + clearfix() +``` + +```css +.clearfix { + zoom: 1; +} +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +``` + +## Border Radius +Nib's `border-radius` supports both the regular syntax as well as augmenting it to make the value more expressive. + +```stylus +button + border-radius 1px 2px / 3px 4px + + button + border-radius 5px + + button + border-radius bottom 10px +``` + +```css +button { + border-radius: 1px 2px/3px 4px; +} +button { + border-radius: 5px; +} +button { + border-top-left-radius: 10px; + border-bottom-right-radius: 10px; +} +``` + +## Responsive Images +The `image` mixin allows you to define a `background-image` for both the normal image, and a doubled image for devices with a higher pixel ratio such as retina displays. This works by using a @media query to serve an "@2x" version of the file. + +```stylus +#logo + image '/images/branding/logo.main.png' + +#logo + image '/images/branding/logo.main.png' 50px 100px +``` + +```css +#logo { + background-image: url("https://github.com/images/branding/logo.main.png"); +} +@media all and (-webkit-min-device-pixel-ratio: 1.5) { + #logo { + background-image: url("https://github.com/images/branding/logo.main@2x.png"); + background-size: auto auto; + } +} +#logo { + background-image: url("https://github.com/images/branding/logo.main.png"); +} +@media all and (-webkit-min-device-pixel-ratio: 1.5) { + #logo { + background-image: url("https://github.com/images/branding/logo.main@2x.png"); + background-size: 50px 100px; + } +} +``` + +## Ellipsis +The `overflow` property is augmented with a "ellipsis" value, expanding to what you see below. + +```stylus +button + overflow ellipsis +``` + +```css +button { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +``` + +## Reset +Nib comes bundled with [Eric Meyer's style reset](eric-meyer) and [Nicolas Gallagher's _Normalize_](normalize) support and, you can choose to apply the global or any specifics that you wish. To view the definitions view [`reset.styl`](https://github.com/tj/nib/blob/master/lib/nib/reset.styl). + +[eric-meyer]: http://meyerweb.com/eric/tools/css/reset/ +[normalize]: https://github.com/necolas/normalize.css + +> CSS Reset + +- `global-reset()` +- `nested-reset()` +- `reset-font()` +- `reset-box-model()` +- `reset-body()` +- `reset-table()` +- `reset-table-cell()` +- `reset-html5()` + +> Normalize + +- `normalize-html5()` +- `normalize-base()` +- `normalize-links()` +- `normalize-text()` +- `normalize-embed()` +- `normalize-groups()` +- `normalize-forms()` +- `normalize-tables()` +- `normalize-css()` + +[Read more][normalize-about] about Normalize or see the original CSS [here][normalize-css]. + +[normalize-about]: http://nicolasgallagher.com/about-normalize-css/ +[normalize-css]: https://github.com/necolas/normalize.css/blob/master/normalize.css + +## Border +This shorthand lets you create a border by just specifying a color, with defaults for width and style. + +```stylus +.foo + border red +``` + +```css +.foo { + border: 1px solid red; +} +``` + +## Shadow Stroke +Creates a text outline using text-shadow. + +```stylus +.foo + shadow-stroke(red) +``` + +```css +.foo { + text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red; +} +``` + +## Size +This shorthand lets you set width and height in one go. + +```stylus +.foo + size 5em 10em +``` + +```css +.foo { + width: 5em; + height: 10em; +} +``` + +## Transparent Mixins +These mixins expand vendor prefixes but do not modify the behavior of the property. + +For example: + +```stylus +* + box-sizing border-box +``` + +```css +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +``` + +Here is the full list of properties for which Nib provides transparent mixins: + +- box-shadow +- radial-gradient +- user-select +- column-count +- column-gap +- column-rule +- column-rule-color +- column-rule-width +- column-rule-style +- column-width +- transform +- border-image +- transition +- transition-property +- transition-duration +- transition-timing-function +- transition-delay +- backface-visibility +- opacity +- box-sizing +- box-orient +- box-flex +- box-flex-group +- box-align +- box-pack +- box-direction +- animation +- animation-name +- animation-duration +- animation-delay +- animation-direction +- animation-iteration-count +- animation-timing-function +- animation-play-state +- animation-fill-mode +- hyphens +- appearance + +# Aliases +These aliases are provided purely for convenience. + +official | aliases +----------- | ---------- +nowrap | no-wrap +white-space | whitespace diff --git a/iconic/demo.html b/iconic/demo.html index 2ce8cdd0..f70302ba 100644 --- a/iconic/demo.html +++ b/iconic/demo.html @@ -9,7 +9,7 @@ -