GithubHelp home page GithubHelp logo

novacbn / kahi-ui Goto Github PK

View Code? Open in Web Editor NEW
188.0 4.0 5.0 8.91 MB

Straight-forward Svelte UI for the Web

Home Page: https://kahi-ui.nbn.dev

License: MIT License

JavaScript 1.13% Svelte 62.98% TypeScript 11.81% SCSS 24.08%
css css-framework html kahi-ui svelte svelte-components typescript sveltejs ui-components ui-library component-library typescript-definitions ui-kit javascript frontend design-system web ui

kahi-ui's Introduction

NOTICE: The development Kahi UI is currently on indefinite hiatus due to lack of time.

Please seek alternatives if you don't want to use a currently unsupported library!

Kahi UI Logo

Straight-forward Svelte UI for the Web


Latest Release NPM Package MIT License Github Stars Chat


WARNING: This library is a work-in-progress, use at your own discretion!

Features

  • Svelte-first: All Components are API designed to work well with Svelte as a first-class citizen.
  • Typescript Native: Kahi UI tries to be fully typed by using TypeScript as its base language, so you get a complete IDE experience.
  • Progressive Enhancements: Where possible, most logic is codified via CSS / HTML directly. With Javascript-enabled UX enhancements enabled for compatible clients.
  • Composable: While 30+ prebuilt Components are available, Kahi UI also provides primitives to design your Web Application's UI without touching CSS.
  • Dark Mode: Components in Kahi UI change colors when a compatible Browser views w/ Dark Mode.
  • Framework Independent: Even though Svelte-first, there is no hard toolchain dependencies required. You can just take the built CSS files and use with React or in a traditional SSR environment.

Documentation

Looking for documentation source? Visit github.com/kahi-framework/kahi-ui.nbn.dev.

Visit the documentation at kahi-ui.nbn.dev.

Playground

Want to just mess around and share Kahi UI creations? Visit the playground at kahi-ui.nbn.dev/playground.

F.A.Q.

Visit the F.A.Q (frequently asked questions) at kahi-ui.nbn.dev/docs/resources/faq.

Need Help?

File a new issue or visit the official Discord Server.

Want to Contribute?

Visit the CONTRIBUTING.md for information on getting started.

Browser Support

  • Chrome 88+ — January 2021
  • Edge 88+ — January 2021
  • Firefox 84+ — December 2020
  • Safari 14.1+ — April 2021
  • Edge (Pre Chromium) — UNSUPPORTED
  • Internet Explorer — UNSUPPORTED

Installation

Open your terminal and install via npm:

npm install @kahi-ui/framework

Usage

Step 1 — First if your toolchain supports it, import the required CSS files from @kahi-ui/framework/dist:

// For non-minified:
import "@kahi-ui/framework/dist/kahi-ui.framework.css";
import "@kahi-ui/framework/dist/kahi-ui.theme.default.css";

// For minified:
import "@kahi-ui/framework/dist/kahi-ui.framework.min.css";
import "@kahi-ui/framework/dist/kahi-ui.theme.default.min.css";

Otherwise download the required CSS files from Releases and use <link rel="stylesheet">:

<html>
    <head>
        <!-- For non-minified: -->
        <link rel="stylesheet" href="/path/to/kahi-ui.framework.css" />
        <link rel="stylesheet" href="/path/to/kahi-ui.theme.default.css" />

        <!-- For minified: -->

        <link rel="stylesheet" href="/path/to/kahi-ui.framework.min.css" />
        <link rel="stylesheet" href="/path/to/kahi-ui.theme.default.min.css" />
    </head>
</html>

Step 2 — Next, import Components by their variable name from @kahi-ui/framework:

<script>
    import {Button, Text} from "@kahi-ui/framework";

    let clicks = 0;

    function on_click(event) {
        clicks++;
    }
</script>

<Text>{clicks}</Text>
<Button on:click={on_click}>Add +1</Button>

Some Components are multi-part patterns, so you'll need to import their namespaces:

<script>
    import {Button, Card, Text} from "@kahi-ui/framework";
</script>

<Card.Container>
    <Card.Figure>
        <img src="/path/to/card/header/image.png" />
    </Card.Figure>

    <Card.Header>
        Lorem Ipsum
    </Card.Header>

    <Card.Section>
        <Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in
            iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient
            montes, nascetur ridiculus mus.
        </Text>
    </Card.Section>

    <Card.Footer>
        <Button palette="affirmative">Open Details</Button>
    </Card.Footer>
</Card.Container>

Resources

If looking for resources like templates and community projects, visit the resources list at kahi-ui.nbn.dev/docs/resources/official.

License

Kahi UI is licensed under the MIT license.

kahi-ui's People

Contributors

novacbn avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

Forkers

zone-frontend ti-rudin lormayna dmgolembiowski rskvp

kahi-ui's Issues

Bug: Popover

Hey! Thank you for your work on this framework. I have recently started to use into on one of my projects and was very pleased with the documentation and good developer experience.

Since I primarily use Firefox (cause someone's gotta use it) for developing, I noticed that the popover component doesn't work on at least the latest version. It works fine on chrome-based browsers, though is shown all the time on Firefox.

I can't really pin down the reason for the bug, but I will try to look into it.

Cheers,
Cobalt

System

  • Browser: Mozilla Firefox 78.13.0esr
  • OS: Parrot OS 4.11 x86_64 / 5.10.0-8parrot1-amd64 / awesomewm (also not working on Debian plain AFAIK and most likely Ubuntu)
  • kahi: @kahi-ui/[email protected] (also not working on official doc page when opening with Firefox)

Kahi UI :: 0.1.0 Milestones

Description

Below is the feature sets, changes, or refinements needed before the 0.1.0 release.

Milestones

  • CSS Framework
    • Finish porting/extracting CSS to SCSS from previous project.
  • Svelte Bindings
    • Finish binding what is currently exposed from the CSS Framework, and continue as more are exposed
    • Add progressive enhancements to bindings where possible, e.g. when clicking outside of PopoverContainer, it closes the popover
  • Documentation
    • Investigate how to get Markdown files loading with Snowpack
      • Created new Snowpack plugin
      • Might have to create custom plugin to support reading, parsing, converting into HTML
      • Try it quick and easy, and use the Snowpack mdsvex plugin
        • Turns out, the plugin was causing Snowpack to error out on importing @kahi-ui/svelte, so that's a no-go
    • Add a mini in-documentation REPL, that scans code blocks and progressively replaces them when a documentation page is loaded
    • Add documentation pages, detailing usage, classes, attributes, and other misc information for all CSS Framework styles
    • Add code block HTML / Svelte Binding samples to documentation to supplement information
  • Render Test
    • Finish recreating the original raw HTML test render page with the Svelte Bindings
    • Add new test renders as new bindings are made
  • Playground
    • Once Playground is complete, port all new standalone REPL functionality code into svelte-simple-repl for v0.1.0 as major breaking version
    • Create editor with CodeJar / Shiki for use in REPL
    • Add code samples for every CSS Framework major style, e.g. one for Card, one for Button, etc.
    • Make code samples discoverable via Playground landing page and during creation of new workspaces
    • Make available workspaces discoverable via Playground landing page, by most recently opened
    • Make workspace repl similar to svelte.dev/repl in terms of presentation / layout
      • NOTE: Multi-file workspaces are probably too complicated for right now. And may not be relevant

Darkmode store works (and stop working) unexpectedly

Describe the Bug

I was trying out the components, and when i tried the darkmode store, it was very weird. When i first open the page that is importing darkmode, it returns a 505, with the message readable is not defined.
Sometimes after a refresh it worked, but it is not always. Also, if i clicked on an anchor tag with href="#", it worked properly.
I noticed as well that if i import the darkmode and use its store while the server is running in dev mode, it works just fine, but as soon as i refresh, it returns the same 505 message.

Reproduction

i actually created a branch on my repo that reproduces the problem: here.
You can check the last commit to see what i added to the code that caused the problem.
To see the issue, start the development server, and open localhost:3000, it should have a 505 message, but if you click on the Svelte Blogger heading on the navbar, it should work properly.
Notice this is a sveltekit project.

System Info

System:
    OS: Linux 5.15 Pop!_OS 21.10
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 8.83 GB / 15.54 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 96.0

Additional Context

No response

Docs: Snippet Menu Improvement

Describe the Request

I was wondering if the snippet search's scrollbar could be tweaked to either incorporate any of the following ideas: the PgDn / PgUp keys be implemented to scroll ±10% of the vertical length, or (more conveniently) use a writable store to hold the latest scroll position which persists after each new snippet's import.

Please let me know if this is too time consuming, and I'll investigate a potential solution's PR.

Additional Context

The Playground's search snippet feature is a helpful study tool, and after spending an hour pouring over each card's associated snippet. This became cumbersome after my first hour in the playground. By the time I was halfway through the alphabet, I was cumulatively spending lots of time to reach my previous position.

[1.0] Theming — Viewports

Description

When the progressive introduction of SASS into the code base starts this month, I want to start converting common code into atoms, mixins, and functions. To reduce boilerplate, etc for viewport management.

Definition API

Ideally we should have a simple declarative API for defining the viewports which the Framework will dump into the theming output CSS else where. While we could use SASS Variables for this, I think an API based on SASS Mixins would be better due to being able to perform magic behind the scenes:

@include define-viewport($viewport: "mobile", $width: 640px);
@include define-viewport($viewport: "tablet", $width: 768px);
@include define-viewport($viewport: "desktop", $width: 1024px);
@include define-viewport($viewport: "widescreen", $width: 1280px);

Arguments are named, each viewport's breakpoint width is defined, and it's all easily readable. Ideally we would've used a SASS Function, but those cannot be used outside of rule declarations.

As far as the implementation goes, the requirements are:

  • Place each new width value into a local SASS Map, viewports.
  • Store new width values into local maximum / minimum SASS Variables whenever the previously cached values are lower / higher than, respectively.
$maximum: null;
$minimum: null;

$viewports: ();

@mixin define-viewport($viewport, $width) {
  @if (not $maximum or $width > $maximum) {
    $maximum: $width !global;
  }

  @if (not $minimum or $width < $minimum) {
    $minimum: $width !global;
  }

  $viewports: map.merge(
    $viewports,
    (
      $viewport: $width,
    )
  ) !global;
}

Media Query

Using the above cached viewport data, we should have an API surface for simplifying @media access to promote non-repeating code.

@include query-viewport("mobile") {
  .hero > header {
    font-size: ...;
  }
}

For this implementation we'll need a helper function get-viewport-range($viewport: str) first, to simplify Viewport calculations:

  • Takes an input Viewport and looks up the cached width value.

  • Returns in a ($maximum-width: number, $minimum-width: number) SASS Map.

  • If the width matches the cached minimum width, just return ($maximum-width: $selected-width, $minimum-width: 0px).

  • Or, if the width matches the cached maximum width, just return ($maximum-width: 999999px, $minimum-width: $target-width + 1px).

  • Otherwise, loop through all Viewports that isn't the one from the input, and cache the Viewport that is numerically closest to the input.

    • IMPORTANT: Viewports can be declared in any order, so we need to loop through them all instead of returning early.

  • Once the loop is finished, return ($maximum-width: $selected-width, $minimum-width: $target-width + 1px).

@function get-viewport-range($viewport) {
  $width: map.get($viewports, $viewport);

  @if ($width == $minimum) {
    @return ("maximum": $width, "minimum": 0px);
  }

  $closest-width: null;
  @each $target-viewport, $target-width in $viewports {
    @if (
      $target-viewport !=
        $viewport and
        $target-width <
        $width and
        (not $closest-width or $target-width > $closest-width)
    ) {
      $current-distance: if($closest-width, $width - $closest-width, null);
      $closest-distance: $width - $target-width;

      @if (not $current-distance or $current-distance > $closest-distance) {
        $closest-width: $target-width;
      }
    }
  }

  @if ($width == $maximum) {
    @return ("maximum": 99999999px, "minimum": $closest-width + 1px);
  }

  @return ("maximum": $width, "minimum": $closest-width + 1px);
}

Using that helper function, we can start with the query-viewport($viewport: string) mixin:

  • Fetches the minimum / maximum KV pair via get-viewport-range.
  • If the KV maximum width matches the cached maximum viewport, wrap inner declarations in a @media (min-width: $minimum-width) query.
  • If the KV maximum width matches the cached minimum viewport, wrap inner declaration in a @media (max-width: $maximum-width) query.
  • Otherwise, wrap inner declarations in a @media (min-width: #{$minimum-width}) and (max-width: #{$maximum-width}) query.
  • Passes the viewport name into the wrapped inner declarations.
@mixin query-viewport($viewport) {
  $range: get-viewport-range($viewport);

  $maximum-width: map.get($range, "maximum");
  $minimum-width: map.get($range, "minimum");

  @if ($maximum-width == $minimum) {
    @media (max-width: $maximum-width) {
      @content ($viewport);
    }
  } @else if ($maximum-width == $maximum) {
    @media (min-width: $minimum-width) {
      @content ($viewport);
    }
  } @else {
    @media (min-width: #{$minimum-width}) and (max-width: #{$maximum-width}) {
      @content ($viewport);
    }
  }
}

Next we'll need a higher level multi-input mixin for accessing multiple Viewports at once, e.g.

@include query-viewports("mobile", "tablet", "desktop", "widescreen") using ($viewport) {
  [data-hidden~="#{$viewport}"] {
    display: none;
  }
}

So we need the following requirements:

  • Accept arguments as a SASS List of Viewport names.
  • Pass through each Viewport name into query-viewport to wrap the inner declarations in media queries.
@mixin query-viewports($viewports...) {
  @each $viewport, $index in $viewports {
    @include query-viewport($viewport) using ($viewport) {
      @content ($viewport);
    }
  }
}

CSS Variables

We need to dump all Viewport values as CSS Custom Properties. Ideally we would use these properties for media queries, but CSS doesn't support that. However they are still useful so the Javascript codebase doesn't have to hardcode the values.

:root {
  @include each-viewport() using ($viewport, $minimum-width, $maximum-width) {
    --viewport-#{$viewport}-max: #{$maximum-width};
    --viewport-#{$viewport}-min: #{$minimum-width};
  }
}

Which would have output similar to:

:root {
  --viewport-mobile-max: 640px;
  --viewport-mobile-min: 0px;
  --viewport-tablet-max: 768px;
  --viewport-tablet-min: 641px;
  --viewport-desktop-max: 1024px;
  --viewport-desktop-min: 769px;
  --viewport-widescreen-max: 99999999px;
  --viewport-widescreen-min: 1025px;
}

To accomplish this, we need the following implementation for the each-viewport($viewports...: str[]) mixin:

  • Loops through each defined Viewport and fetches the maximum / minimum ranges for each.
  • Calls the inner content block with arguments of the Viewport name, maximum width, and minimum width.
@mixin each-viewport() {
  @each $viewport, $width in $viewports {
    $range: get-viewport-range($viewport);

    $maximum-width: map.get($range, "maximum");
    $minimum-width: map.get($range, "minimum");

    @content ($viewport, $minimum-width, $maximum-width);
  }
}

DataSelect indicator doesn't go away as expected on deselect

Describe the Bug

Using the DataSelect component with the multiple prop, when I deselect an option the square indicator remains until my next click (at which point it disappears as expected). I can see that the Svelte store I have bound to logic_state updates immediately as expected. It's just the indicator that is out of sync until the next click.

Reproduction

You can see this occurring in the Multiple example at https://kahi-ui.nbn.dev/docs/widgets/dataselect. I first came across this bug locally though, so it isn't just the example.

System Info

Mac using Chrome

Additional Context

No response

Invalid prop "variation" for Menu.Buton component

Describe the Bug

When using the component <Menu.Button> with the "variation" prop, vscode shows an Not assignable type error.

Reproduction

I was able to find the bug by simply copying and pasting the code for the Omni component from the official docs (here).

Here is an image of the error
image

Here is the complete error message displayed by vscode when i hover the variation prop:
(JSX attribute) variation: string Type '{ variation: string; active: true; }' is not assignable to type 'IntrinsicAttributes & { actions?: IForwardedActions; element?: HTMLLIElement; active?: boolean; disabled?: boolean; palette?: "auto" | ... 7 more ... | "negative"; ... 7 more ...; hidden?: PROPERTY_HIDDEN; }'. Property 'variation' does not exist on type 'IntrinsicAttributes & { actions?: IForwardedActions; element?: HTMLLIElement; active?: boolean; disabled?: boolean; palette?: "auto" | ... 7 more ... | "negative"; ... 7 more ...; hidden?: PROPERTY_HIDDEN; }'.js(2322)

System Info

System:
    OS: Linux 5.15 Pop!_OS 21.10
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 9.43 GB / 15.54 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 96.0

Additional Context

No response

Nesting Stacks

Describe the Question

Hi, first: Thank you for this wonderful piece of work. Once you get it, its really nice to work with.

My question:
I tried to nest Stacks e.g. one vertical Stack consists of another horizontal Stack (and also the other way around. The optical result was not what I've expected. It was mixed up.

Are there any plans those can be nested or am i missing anything like using extra containers to separate the Stacks? Cannot find any example in the docs.

File upload

Describe the Request

It would be great to have a file upload component with optional drag and drop.

Additional Context

No response

No shape/radius in Tile.Figure

Describe the Bug

I'm not sure if this is by design and I might've missed something.
But it's also not stated in the the changes between 0.5.7 -> 0.6.x.

In previous versions I had:

<Tile.Figure shape="pill">
...
</Tile.Figure>

But now there's no simple way without adding extra div and a non Title originated Figure.

Reproduction

n/a

System Info

Tested with macOS 12.2 / Firefox 98.0.1

Additional Context

No response

js-temporal.js 'GetFormatterParts' broken in Firefox 96.0 and Chromium 96.0.4664.110...

Describe the Bug

Use of the DayStepper widget will cause your application to fail (not render) in newer versions of Firefox and Chromium (presumably Chrome as well, possibly also the myriad of other browsers using that engine). Note that it does work in Firefox 95.0.2.

You may get a stack trace similar to this:

Uncaught TypeError: time is undefined
    GetFormatterParts js-temporal.js:8486
    GetIANATimeZoneDateTimeParts js-temporal.js:8410
    GetIANATimeZoneOffsetNanoseconds js-temporal.js:8312
    getOffsetNanosecondsFor js-temporal.js:10654
    Call js-temporal.js:2267
    GetOffsetNanosecondsFor js-temporal.js:7917
    BuiltinTimeZoneGetPlainDateTimeFor js-temporal.js:7935
    TemporalInstantToString js-temporal.js:8087
    Instant js-temporal.js:11335
    instant js-temporal.js:13426
    app js-temporal.js:13434
    plainDateTime js-temporal.js:13436
    plainDate js-temporal.js:13465
    get_daystamp datetime.js:80
    instance$t DayStepper.svelte:34
    init index.mjs:1862
    DayStepper bundle.js:41197
    create_default_slot_8$1 bundle.js:71939
    create_slot index.mjs:69
    create_fragment$z bundle.js:33771
    init index.mjs:1877
    CardSection bundle.js:33991
    create_default_slot_5$1 bundle.js:72124
    create_slot index.mjs:69
    create_fragment$D bundle.js:32521
    init index.mjs:1877
    CardContainer bundle.js:32791
    create_fragment$1 bundle.js:72678
    init index.mjs:1877
    StatusDevices bundle.js:72973
    create_default_slot_8 bundle.js:73180
    create_slot index.mjs:69
    create_else_block$e bundle.js:42987
    create_default_slot$j bundle.js:43161
    create_slot index.mjs:69
    create_fragment$s bundle.js:42258
    init index.mjs:1877
    Router bundle.js:42629
    create_if_block$g bundle.js:42931
    update bundle.js:43270
    update index.mjs:1085
    flush index.mjs:1052
    init index.mjs:1894
    App bundle.js:73940
    app main.js:3
    <anonymous> bundle.js:73959

Reproduction

Import DayStepper from 0.5.2 of @kahi-ui/framework.

Use it, binding 'value' to a variable.

System Info

System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 543.38 MB / 15.60 GB
    Container: Yes
    Shell: 5.1.12 - /bin/bash
  Binaries:
    Node: 17.3.0 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.3.0 - /usr/bin/npm
  Browsers:
    Chromium: 96.0.4664.110
    Firefox: 96.0

Note: Also saw this issue in macOS 12.1, but not on Safari 15.2.

Additional Context

No response

a few suggestions

Finally, a Svelte UI lib that's somewhat similar to Chakra UI!

A few suggestions:

  1. I am missing passing CSS as property as in Chakra UI.
<Button marginLeft={2} height="500px">Click me</Button>

which eliminates the need for CSS/TailwindCSS.

  1. Why do you use underscores for properties e.g. alignment_x instead of standard camelCase e.g. alignmentX?

  2. Most websites use CMD+K to open the search bar. The documentation site should probably follow that convention.

  3. Why both is and type properties?

  4. Use Link instead of Anchor. Most UI Libs use Link which is shorter and makes more sense -> everyone says link right? Maybe more generally, why not copy all Chakra props, naming, and conventions?

Interactive styling + Event modifiers

👋🏽 Hey there

2 questions:

  1. how does one handle styling different states for a component, i.e on active, on hover, etc.?
  2. I saw there are html5 modifiers, are events and binding also supported?

TextInput 'resizable' attribute type mismatch between 'boolean' and '"x" | "y"'

Describe the Bug

You get a ts(2322) error Type 'true' is not assignable to type '"x" | "y"' when you try to use <TextInput resizable /> in your component.

Reproduction

Within a svelte component where the project has TypeScript enabled:

<script lang="ts">
  import { TextInput } from "@kahi-ui/framework";
</script>

<TextInput resizable />

Note that using resizable="x" or resizable="y" doesn't seem to be valid, as it doesn't seem to result in a resizable TextInput, but maybe I missed something.

System Info

System:
    OS: Linux 5.15 Manjaro Linux
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 4.41 GB / 15.53 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.10.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Chromium: 107.0.5304.87
    Firefox: 106.0.2

Additional Context

Using typescript 4.84, tslib 2.4.1, if this helps.

How to add Kahi-ui to a blank svelte template page

Describe the Request

I am pretty new to svelte and Kahi-ui seems to be very nice. However I tried to add it into the demo project from npx degit sveltejs/template my-svelte-project means I adjusted the App.svelte with the import from '@kahi-ui/framework'. Everything is fine, despite that the css is not applied.
Nevertheless the files are on the server:
image
Do I miss some configuration? Could you improve the docs how to get started?

Additional Context

No response

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.