stylewars:JS库中不需要工具的微小CSS

  • Z5_318834
    了解作者
  • 190.3KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 04:40
    上传日期
风格大战 JS库中不需要工具的微型CSS。 只需定义您CSS规则并应用它们即可。 易学曲线 CSS之上只有一个概念 为您提供CSS的所有功能 框架不可知 唯一的班级名称 在页面中允许多个版本 安装 NPM npm install stylewars unpkg.com import { css , classes , } from "https://unpkg.com/stylewars@1.6.0/dist/bundle.esm.js" ; 或者 import { css , classes , } from "https://unpkg.com/stylewars@1.6.0/dist/bundle.esm.min.js" ; 用法 这个例子展示了如何与React一起使用,但是该库可以与任何框架一起使用。 import React from "react"
stylewars-main.zip
  • stylewars-main
  • .mocharc.json
    43B
  • .eslintrc
    758B
  • rollup.config.js
    946B
  • .github
  • dependabot.yml
    275B
  • workflows
  • ci.yml
    657B
  • Readme.md
    5.2KB
  • .prettierignore
    6B
  • src
  • index.js
    5KB
  • example
  • index.html
    4KB
  • LICENSE
    1.1KB
  • test
  • index.spec.js
    12.5KB
  • .editorconfig
    130B
  • .gitignore
    139B
  • CHANGELOG.md
    14.4KB
  • .eslintignore
    18B
  • package-lock.json
    228.6KB
  • stylewars.jpg
    124.7KB
  • package.json
    1.9KB
内容介绍
# Stylewars [![Checks](https://github.com/sunesimonsen/stylewars/workflows/Checks/badge.svg)](https://github.com/sunesimonsen/stylewars/actions?query=workflow%3AChecks+branch%3Amain) [![Bundle Size](https://img.badgesize.io/https:/unpkg.com/stylewars@1.7.1/dist/bundle.esm.min.js?label=gzip&compression=gzip)](https://unpkg.com/stylewars@1.7.1/dist/bundle.esm.min.js) A tiny CSS in JS library that requires no tooling. Just define your CSS rules and apply them. - Easy learning curve - Only one concept on top of CSS - Gives you all of the power of CSS - Framework agnostic - Unique class names - Allows multiple versions in the page [Live examples](https://stylewars.surge.sh/) ![Style Wars (1983)](./stylewars.jpg) ## Installation ### NPM ```sh npm install stylewars ``` ### unpkg.com ```js import { css, classes, } from "https://unpkg.com/stylewars@1.6.0/dist/bundle.esm.js"; ``` or ```js import { css, classes, } from "https://unpkg.com/stylewars@1.6.0/dist/bundle.esm.min.js"; ``` ## Usage [See the live examples](https://stylewars.surge.sh/) This example shows usage together with React, but the library can be used together with any framework. ```js import React from "react"; import { css, classes } from "stylewars"; const buttonStyles = css` & { border-radius: 4px; background: #587894; color: white; border: none; padding: 0.5em 2em; } &:hover { background: #89a2b9; } `; const BoringButton = ({ children, ...other }) => ( <button {...other} className={buttonStyles}> {children} </button> ); ``` As you can see it is just plain CSS with one exception `&` will be replaced by a unique class. ### Using placeholders You can also use placeholders to generate classes dynamically. ```js import { lighten } from "polished"; const coloredBackground = (color) => css` & { background: ${color}; } &:hover { background: ${lighten(0.2, color)}; } `; const FancyButton = ({ color, children, ...other }) => ( <button {...other} className={classes(buttonStyles, coloredBackground(color))} > {children} </button> ); ``` Just make sure only to use this method for a limited amount of values as it generates new classes. Alternatively you can use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). ### Using global classes If you need to apply a global class, it can be done this way: ```js const GloballyStyledButton = ({ color, children, ...other }) => ( <button {...other} className={classes("global-class", coloredBackground(color))} > {children} </button> ); ``` ### Conditional styling You can conditional apply styles this way: ```js const MaybeColoredButton = ({ color, children, ...other }) => ( <button {...other} className={classes(buttonStyles, color && coloredBackground(color))} > {children} </button> ); ``` ### CSS key frames You can get a hashed identifier with the following syntax: `&(identifier)`. This is useful for naming CSS key frames. ```js const fadeInStyles = css` & { animation: 750ms linear 0s 1 normal none running &(fade-in); } @keyframes &(fade-in) { 0%, 60% { opacity: 0; } 100% { opacity: 1; } } } `; const FadeInButton = ({ color, children, ...other }) => ( <button {...other} class={classes(buttonStyles, fadeInStyles)}> {children} </button> ); ``` ### Theming You just use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). ```js const themedButtonStyles = css` & { background: var(--accent-color, #587894); color: var(--text-color, white); } &:hover { background: var(--accent-highlight-color, #89a2b9); } `; const ThemedButton = ({ color, children, ...other }) => ( <button {...other} class={classes(buttonStyles, themedButtonStyles)}> {children} </button> ); ``` Now you can apply a theme to the DOM sub-tree the following way: ```js const yellowTheme = css` & { --text-color: black; --accent-color: #fed6a8; --accent-highlight-color: #ffb057; } `; const Example = () => ( <section className={yellowTheme}> <ThemedButton>I'm themed</ThemedButton> </section> ); ``` ## MIT License Copyright (c) 2020 Sune Simonsen <mailto:sune@we-knowhow.dk> 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.
评论
    相关推荐
    • npm-packages:https
      npm-packages:https
    • npm-publisher
      " url " : " https://github.com/CodeWitchBella/npm-publisher.git " }, " scripts " : { " prepublishOnly " : " isbl-publisher prepublishOnly " , " publish:npm " : " yarn build && isbl-publisher ...
    • npm-conf:获取npm配置
      npm-conf 获取npm配置 安装 $ npm install npm-conf 用法 const npmConf = require ( 'npm-conf...//=> https://registry.npmjs.org/ 要获取所有可用的npm config选项的列表: $ npm config list --long API npmConf
    • node-npm-ssl
      npm set ssl.profiles.NAME.registry https://your.private.registry/ npm set ssl.profiles.NAME.cafile /path/to/your-ca.crt npm set ssl.profiles.NAME.keyfile /path/to/your-client-key.pem npm set ssl....
    • npm_publish_demo_by_cag:发布自己的包到npm上,参考:https
      在项目主目录下运行:npm publish时,注意事项: 需要先验证npm账户的邮箱地址; 在项目主目录下运行:npm publish 使用此包的项目: 参考文章: 中: 这部分内容 //退出当前文件夹,开始命令行发布包,命令如下: ...
    • npm-mirrors:npm注册表镜像的列表
      npmnpm注册表镜像的列表。 安装 npm install npm-mirrors 用法 const mirrors = require ( 'npm-mirrors' ) console . log ( mirrors ) // { // 'npm': { // 'home': 'https://www.npmjs.org', // 'registry':...
    • npm-static-stats:通过 esprima 对 npm 包进行综合静态分析
      registry : 'https://registry.nodejitsu.com' , package : 'winston' } , function ( err , res ) { // // The returned `res` will be the set of all // methods counted for the specified module // } ) ...
    • npm-hello:NPM 系统上的 Hello world
      NPM 注册表的 Hello World 包 采取的步骤 使用npm adduser在或 CLI 上创建帐户 通过点击https://www.npmjs.org/~检查 创建新模块/包 npm init设置基本的package.json信息 创建/测试代码 使用npm login授权开发机 ...
    • clj-kondo:NPMhttps分发
      clj-kondo NPM分发 。 您可以在全局或本地安装并通过clj-kondo二进制文件运行它。 npm i -g clj-kondo clj-kondo --lint src/
    • cnpm:cnpm:npm中国镜像的npm客户
      $ npm install cnpm -g --registry=https://r.npm.taobao.org 用法 支持所有命令,就像npm一样。 从npm同步软件包 $ cnpm sync [moduleName] 打开包文档或git网站网址 $ cnpm doc [name] $ cnpm doc -g [name] # ...