erictherobot/svelteit

Svelteit is a minimalistic UI/UX component library for Svelte and Sapper projects

Svelteit - https://docs.svelteit.dev

Svelteit is a minimalistic UI/UX component framework for Svelte and Sapper projects.

Why?

Yes, there are many component frameworks out there today, but we wanted our own. If you like our components, use it. If you see a problem, make a pull request or fork your own and roll with it.

Quick Installation

Add Svelteit to your project by running:

npm install -D @colorfuldots/svelteit
# or
yarn add @colorfuldots/svelteit --dev

Documentation

• Svelteit Docs

Contributing

Please read our Contribution Guideline - (Svelteit Docs) and Contribution Guideline - (Svelteit)

MIT License

Copyright (c) 2020 Colorful Dots, LLC (https://colorfuldots.com) 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 NON-INFRINGEMENT. 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.

View MIT License

svelteit's Issues

Not able to use components after adding svelteit to my project

I followed the docs to add svelteit to my project. After installing required packages and configuring the project. it is throwing the following error.

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@colorfuldots/svelteit/dist/css/svelteit.min.css (imported by src/App.svelte)
[!] (plugin svelte) ParseError: Identifier is expected
node_modules/@colorfuldots/svelteit/src/ButtonGroup.svelte
27:     vertical-align: middle;
28:
29:     > {
        ^
30:       :global(button:not(:first-child)),
31:       .svelteit-button-group:not(:first-child) > :global(button) {
ParseError: Identifier is expected
    at error (/home/bhanu/app/node_modules/svelte/src/compiler/utils/error.ts:25:16)
    at Parser$1.error (/home/bhanu/app/node_modules/svelte/src/compiler/parse/index.ts:93:3)
    at Object.read_style [as read] (/home/bhanu/app/node_modules/svelte/src/compiler/parse/read/style.ts:21:11)
    at tag (/home/bhanu/app/node_modules/svelte/src/compiler/parse/state/tag.ts:190:27)
    at new Parser$1 (/home/bhanu/app/node_modules/svelte/src/compiler/parse/index.ts:45:12)
    at parse (/home/bhanu/app/node_modules/svelte/src/compiler/parse/index.ts:208:17)
    at compile (/home/bhanu/app/node_modules/svelte/src/compiler/compile/index.ts:79:14)
    at preprocessPromise.then.code (/home/bhanu/app/node_modules/rollup-plugin-svelte/index.js:252:22)

Expected Behavior

It should work with a svelte project.

Actual Behavior

Throwing error during build.

Steps to Reproduce the Problem

Added the following code in root component App.svelte

<script>
  import "@colorfuldots/svelteit/dist/css/svelteit.min.css";
  import { Button } from "@colorfuldots/svelteit";
</script>

<div>
  <Button title="Test button" rounded primary />
</div>

Specifications

• Version: ^1.0.0-alpha.7
• Platform: Ubuntu 20.04
• Subsystem:

X button in Alert components behaves quirkily.

Expected Behavior

Once we click X button, no matter we click it again, Alert components should be closed.

Actual Behavior

Clicking X button again before the Alert component is closed takes it back to normal.

Steps to Reproduce the Problem

1. Click X button in a Alert component.
2. Click X button again before the Alert component is closed.
3. The Alert component turns back to normal.

Specifications

• Version: 1.0.0-alpha.7
• Platform: Windows 10
• Subsystem: Firefox browser 95.0 64bit

Custom theme

Hi, thank you for sharing this cool project!

I'm considering using this framework for my project, and definitely customization is required.
Is there any update on custom themes?

If there is no plan yet, I'd like to suggest making the sass variables customizable until then.
hyojin@e118c83

autoPreprocess

npm install -D autoPreprocess

cause error

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/autoPreprocess - Not found
npm ERR! 404
npm ERR! 404 'autoPreprocess@latest' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because
npm ERR! 404 1. name can no longer contain capital letters
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

It's based on Bootstrap 4?

Hey! Good job!
Can you tell me if it's based on Bootstrap 4?