snack-ui / snack

🍱 A minimal CSS framework for web.

Snack

Snack is a minimal CSS framework for web. But the main purpose of this framework is not mini size. For more reason,I hope the framework can simplified the class name which we used and provide a more generally components.

Installation

$ npm install snack.css --save

Usage

@use 'snack.css/index';

The @use-based Sass API is only available in the version 2.7.0 or above.

Overview

• Colors
• Grids
• Media
• Typography
• Buttons
• Forms
• Tables
• Boxes
• Utilities

License

MIT License

snack's Issues

Dart Sass 2.0.0

使用最新的 vite 开发时有警告信息……

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 2) or calc($grid-gutter / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
8 │   padding-left: $grid-gutter/2;
  │                 ^^^^^^^^^^^^^^
  ╵
    node_modules/snack.css/src/_grid.scss 8:17  @import
    node_modules/snack.css/src/snack.scss 4:9   @import
    src/style/app.scss 3:9                      @import
    src/App.vue 2:9                             root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 2) or calc($grid-gutter / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
9 │   padding-right: $grid-gutter/2;
  │                  ^^^^^^^^^^^^^^
  ╵
    node_modules/snack.css/src/_grid.scss 9:18  @import
    node_modules/snack.css/src/snack.scss 4:9   @import
    src/style/app.scss 3:9                      @import
    src/App.vue 2:9                             root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, -2) or calc($grid-gutter / -2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
15 │   margin-left: $grid-gutter/-2;
   │                ^^^^^^^^^^^^^^^
   ╵
    node_modules/snack.css/src/_grid.scss 15:16  @import
    node_modules/snack.css/src/snack.scss 4:9    @import
    src/style/app.scss 3:9                       @import
    src/App.vue 2:9                              root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, -2) or calc($grid-gutter / -2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
16 │   margin-right: $grid-gutter/-2;
   │                 ^^^^^^^^^^^^^^^
   ╵
    node_modules/snack.css/src/_grid.scss 16:17  @import
    node_modules/snack.css/src/snack.scss 4:9    @import
    src/style/app.scss 3:9                       @import
    src/App.vue 2:9                              root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 2) or calc($grid-gutter / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
17 │     padding-left: $grid-gutter / 2;
   │                   ^^^^^^^^^^^^^^^^
   ╵
    node_modules/snack.css/src/_mixins.scss 17:19  make-grid-columns()
    node_modules/snack.css/src/_grid.scss 19:1     @import
    node_modules/snack.css/src/snack.scss 4:9      @import
    src/style/app.scss 3:9                         @import
    src/App.vue 2:9                                root stylesheet

Warning: 11 repetitive deprecation warnings omitted.

input 和 select 高度不一致

input 和 select的高度不一致，在做一些横排from表单布局的时候比较别扭，希望能优化一下~~

dark mode 希望支持通过媒体查询自动适应

@media (prefers-color-scheme: dark) {
        /*balabala*/
}

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme

---

另外，outline inverted 在dark-mode 下 文字对比度 简直没法看啊，希望作者能优化一下

Thanks!

Correct footer credits text

Footer credits at the bottom of the docs' site reads "... ❤️ Made with using snack". I'm guessing that should be "...Made with ❤️ using snack"