search

Basilcss / core

🪴 Basil.css is an open source, simple and lightweight CSS framework for building custom user interfaces.
https://www.basilcss.com
MIT License
3 stars 6 forks source link

question: integration of basilcss in nativeJS #22

Closed SrNightmare09 closed 1 year ago

SrNightmare09 commented 1 year ago

Hey! I am currently building an app using native javascript, and I want to integrate the basil CSS framework into the project. Can you guide me to as to how to use the framework using native javascript.

Thanks in advance!

daniel-bergmann commented 1 year ago

Thanks for the question, its a very good one indeed. I think the only solution now is to copy all the classes from the core css file and paste them in a css file in your project, then link it in your html file like so: 

<head>
  <link rel="stylesheet" href="basilcss.css">
</head>

We need to make it simpler by making a cdn link for the framework, that way it would be much easier to implement in vanilla js codebases.

But ofc, If you are using npm you can always import it like usual.

This is indeed an issue that has to be solved

daniel-bergmann commented 1 year ago

@SrNightmare09, are you up for the challenge to make a cdn link?

Like the ones that can be found here? https://cdnjs.com/

SrNightmare09 commented 1 year ago

@daniel-bergmann can you elaborate on what you mean? I did not quite understand what you meant.

daniel-bergmann commented 1 year ago

@daniel-bergmann can you elaborate on what you mean? I did not quite understand what you meant.

Yes, no problem. If there is a cdn link that you can use to connect the basil.css to a project not using a js framework you could simply add include it in a script tag. Here is an example where this is done with Vue.js.

HTML file below:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>
SrNightmare09 commented 1 year ago

@daniel-bergmann well, i’m up! can you provide info on what provider we are planning to use for hosting the packaged cdn?

daniel-bergmann commented 1 year ago

@daniel-bergmann well, i’m up! can you provide info on what provider we are planning to use for hosting the packaged cdn?

fantastic! I'll let you decide and pick!

Let me know if you encounter any issues :)

SrNightmare09 commented 1 year ago

@daniel-bergmann I think the simplest option would be to use the static websites provided by Github pages.

Let me know what you think!

daniel-bergmann commented 1 year ago

Thats a great idea, do we have an update on this issue?

SrNightmare09 commented 1 year ago

Thats a great idea, do we have an update on this issue?

Oh im sorry to say that there is no update, as i had never been explicitly assigned to this. However,if u do wish me to work on this, i will be glad to take up the task.

daniel-bergmann commented 1 year ago

No worries my friend, I was just curious. It would be great if you are up for the challenge!

SrNightmare09 commented 1 year ago

No worries my friend, I was just curious. It would be great if you are up for the challenge!

i will definitely give it a shot. i would love me a challenge too

daniel-bergmann commented 1 year ago

Stumbled upon htis snippet in someones codebase which solves the issue. I updated the docs.

<link rel="stylesheet" href="https://unpkg.com/basilcss@1.1.2/basil.css">