V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
LinkedIn
sunjourney
V2EX  ›  分享创造

制作了一组简洁的 CSS 基础样式,为 demo 提供轻量的美化

  •  
  •   sunjourney · 80 天前 · 1595 次点击
    这是一个创建于 80 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如果你的 demo 不需要复杂的样式,觉得 bootstrap 、UI 组件库太重,只用到了原生的 DOM 结构演示 DEMO ,又嫌 CSS 裸奔太丑,可以尝试这组基础样式。支持 sass 、less 、stylus 、全局使用。

    在线预览: https://styled-css-base.zheeeng.me/

    styled-css-base

    全局使用:

    js/ts:

    import 'styled-css-base/presets/simple/index.css';
    

    css:

    @import "styled-css-base/presets/simple/index.css";
    

    搭配预处理器:

    scss:

    .showcase {
        @import "styled-css-base/presets/simple/index";
    }
    

    less:

    .showcase {
      @import "styled-css-base/presets/simple/index";
    }
    

    或:

    .showcase {
      @import (less) "styled-css-base/presets/simple/index.css";
    }
    

    stylus:

    .showcase {
        @import "styled-css-base/presets/simple/index";
    }
    

    项目地址: https://github.com/zheeeng/styled-css-base

    7 条回复    2022-07-15 13:41:16 +08:00
    gausszhou
        1
    gausszhou  
       80 天前
    好想法!
    wonderfulcxm
        2
    wonderfulcxm  
       80 天前 via iPhone
    可以一试,上次用的还是 simple.css
    ragnaroks
        3
    ragnaroks  
       79 天前   ❤️ 1
    楼主可以换一种思路,基于 tailwindcss 提供一个组件的样式代码( https://tailblocks.cc/
    zzzmh
        4
    zzzmh  
       79 天前
    已收藏 太牛了
    sunjourney
        5
    sunjourney  
    OP
       79 天前
    @ragnaroks #3 tailwind 和 windi 都是我之前用的方案,但是还是有点重,只是为我的一些功能库的 demo 提供看得过去的样式又不需要配置,用 webpack 、vite 、parcel 、snowpack 都得去寻找各自的插件,只要你支持 CSS 预处理器,用不用打包器都可以零配入手,当然不支持 CSS 预处理器也可以用,变成全局样式而已。
    Asimov01
        6
    Asimov01  
       77 天前
    很棒!想法比较像我正在用的 water.css ,但是感觉更好看点,已 star 。
    luanjia
        7
    luanjia  
       77 天前
    赞,对后端极其友好
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1068 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 41ms · UTC 18:56 · PVG 02:56 · LAX 11:56 · JFK 14:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.