Frontend framework support

[anandbhaskaran]

I just came across this project and I really love Stisla. It is clean, simple and elegant.

However, does Stisla has plans to be compatible with front-end frameworks such as Angular, React or Vue? I believe this would be a great support for the frontend app developers.

Further introduction of Stisla UX in Adobe XD or Sketch would make the Stisla even more developer-friendly!

[nauvalazhar]

Hi, thank you for using Stisla.

In the near future, officially, I haven't thought about it and I don't plan it, just want to focus on the core, components, and infrastructure of Stisla. With that, I can work faster.

But, if anyone wants to integrate with the frontend framework, such as angular, Vue, React or something else, go ahead. I will help to put links in README that go to their repositories (such as Rails and CodeIgniter integration).

If I integrate it, I won't put it in this organization, maybe in my personal repository. Again, I don't forbid that, I will try to find someone who wants to integrate the frontend framework.

Thank you

[anandbhaskaran]

Thank you @nauvalazhar! I will let you know if we plan to implement it.

I agree that focusing on Core would be best for Stisla. However, having the basic implementation of Adobe XD or Sketch design could also be nice for the users.

[nauvalazhar]

Good if you will implement it :)

Yep, I will start thinking about it for Adobe XD and Sketch :D

[lkloon123]

I will try to make a vue integration side by side as im using this template in current vue project :)

[coderabsolute]

@lkloon123 I understand you are working on the integration with Vue, am wondering what is the status? If you need some help then I would be more than happy to contribute with my little knowledge...

[nauvalazhar]

It would be nice if @lkloon123 could create a public repository for that. So, everyone can help 😄

[cyberhck]

I'll try to work on react version for this with typescript using which you'll get intellisense on your IDE even if you don't use typescript, please let me know if anyone wants to help.

is there a adobe xd / sketch file for this?

[nauvalazhar]

Will be great if you working on react version. No, this template hasn't Adobe XD/Sketch file.

[cyberhck]

Since his is admin template, I'll try to make it opinionated yet flexible, I want people to use it out of the box without having to do anything.

[nauvalazhar]

I think to refactor the whole code to be more flexible and not depend on Bootstrap and not just the Admin dashboard.

[cyberhck]

Yes, I don't want to depend on bootstrap either, but I do want the grid though, I'll try to come up with something, first I want to make it work, but with fully planning on dropping bootstrap specially jquery stuff.

I'll first go for normal simple components, colors etc, I'll also try to do in a way that adding theme is possible, I'll let you know of my progress.

[lkloon123]

@coderabsolute @nauvalazhar
Hi guys, sry for late reply, was busy these days.
i created a repo vue-stisla
PR are welcome 👍

[coderabsolute]

@lkloon123 Thanks. I will take a look and please let me know how can I contribute.

@cyberhck You may also consider Bulma.

[cyberhck]

Hi @nauvalazhar communicating via issues here and you responding with anything you can made me think it's a really good idea to move forward, I want to do the react parts, but I need your help.

I kinda need support, as in if I'm not able to understand how something's working, I'll ask you, and I'd also like some contributions, if someone comes looking for this template, maybe you can link to ongoing development.

My plan is to split the project into 2 parts:

One where we only have components, we have documentation of each components, is automatically built and pushed to gh-pages, and it's released automatically as well.

In parallel I also want to do the template usage, something like your demo, to do that, I'll simply install the components package and try to recreate what you have.

In the mean time, I'd really appreciate if this project also took a small step towards customization.

I'd really love it if you could move any color information to a separate theme file, for example if you have dropdown.scss, I want you to split into dropdown.theme.scss and dropdown.scss, any color information will go to dropdown.theme.scss, but don't import dropdown.theme.scss directly into dropdown.scss, create a theme.scss in root level and import all .theme.scss and compile two separate files which will give you core.css and theme.css.

do you have slack space by any chance?

[lkloon123]

@coderabsolute
u can start with any component in bootstrap tab on stisla demo :)

[nauvalazhar]

Hi @nauvalazhar communicating via issues here and you responding with anything you can made me think it's a really good idea to move forward, I want to do the react parts, but I need your help.

I kinda need support, as in if I'm not able to understand how something's working, I'll ask you, and I'd also like some contributions, if someone comes looking for this template, maybe you can link to ongoing development.

My plan is to split the project into 2 parts:

One where we only have components, we have documentation of each components, is automatically built and pushed to gh-pages, and it's released automatically as well.

In parallel I also want to do the template usage, something like your demo, to do that, I'll simply install the components package and try to recreate what you have.

In the mean time, I'd really appreciate if this project also took a small step towards customization.

I'd really love it if you could move any color information to a separate theme file, for example if you have dropdown.scss, I want you to split into dropdown.theme.scss and dropdown.scss, any color information will go to dropdown.theme.scss, but don't import dropdown.theme.scss directly into dropdown.scss, create a theme.scss in root level and import all .theme.scss and compile two separate files which will give you core.css and theme.css.

do you have slack space by any chance?

Let's talk about this #58.

[coderabsolute]

@coderabsolute
u can start with any component in bootstrap tab on stisla demo :)

@lkloon123 Can you please create a project with the Vue CLI, it may be easier to start working on it...

[cyberhck]

We're working on new framework on #58 , it's complete rewrite of this project, you can submit your concerns there, and yes, writing a CLI is something I'm thinking about, kind of one cli which can scaffold any frontend framework, and do utility stuff maybe, (like adding custom big components, for example you've published a component for stisla using stisla's scss, then one should be able to do something like stisla add user/component which will fetch from npm)

[nauvalazhar]

It would be better if there were some people who could help in developing in our new framework. Because I have been busy with my work for a few days 😄

[jonatandorozco]

Is there any progress on Vue integration? I would contribute on that

[lkloon123]

@jonorozcoc
u can check vue-stisla
but not developing atm due to they are trying to remake the whole stisla into new framework
will start after they released at least for beta,
u can send pull request on vue-cli setup as someone mention earlier :)

[cyberhck]

I need more people helping on stisla framework, I've also been very busy lately, if someone can drive it a bit more, it'd be awesome.

[nauvalazhar]

I'm also a bit busy lately, I plan to make design system first with Figma or Sketch.

[samstaron]

@lkloon123 how do I import this repo into vue?

[cyberhck]

@samstaron right now there's no official guide, I think you can simply start using it, but keep in mind that this does require jQuery and need to import css,

Bootstrap team is working on v5 which will remove jQuery as dependency, and they'll provide modules where we can import certain things, once that's done, I think @nauvalazhar will update stisla to use new components, which we can simply transform to react / vue / angular etc.

[lkloon123]

@samstaron actually u can just import the js and css then write the html and it is good to go, just bear in mind that it dont have good support for SPA since SPA dont trigger jquery onload when route change

[cyberhck]

instead of refactoring to v5, I think a XD design/zeplin design system might help much more,
then we can create web components which should be supported everywhere, or we can have multiple projects, but we can style using typestyle which works for all frontend frameworks, I've something in mind, I'll summarize in slack

[nauvalazhar]

But, what framework will we use?

[nauvalazhar]

For CSS framework, we can still use Bootstrap or Tailwind, or whatever. Also, we can use this: https://lit-element.polymer-project.org

[cyberhck]

no, actually, let's come up with design system, create the XD/zeplin/invision whatever you're comfortable with,

then we can go with something which won't make users need to load css/scss but just work everywhere.

one of the example of that would be typestyle, it'll work for everything, it'll only provide the styles though, or we don't even need to do that, just provide design systems, and people can "implement" this design systems in different framework :)

I was thinking I'll just create styles by just using typestyle which can be used on vanilla JS, React/Vue/Angular, so :)

That way we have minimal bundlesize, which is a big pain point right now,

[nauvalazhar]

I wrote a new issue here. @cyberhck

[SalahAdDin]

@anandbhaskaran Did you implement it?

[anandbhaskaran]

Hello @SalahAdDin. Unfortunately not yet 😞 As Vue 3 getting released in the upcoming months, I am thinking to collaborate with the Stisla team to implement this using Vue 3. But no concrete plans yet.

[SalahAdDin]

So bad, I wanted to try it with React.

[lkloon123]

@SalahAdDin u can just import the css and use it, just it wont go well with SPA

[SalahAdDin]

The problem is to replace all jquery "components".

[mjamilasfihani]

Hi, I've integrated Stisla with my Bootstrap 4 Generator for CodeIgniter 4. But I use jsdelivr cdn (npm). Maybe someone need it 😄

[github-actions]

This issue has been automatically marked as stale because it has been open for 14 days without activity. It will be closed if no further activity occurs within the next 14 days. If this is still an issue, just leave a comment or remove the "stale" label.

[github-actions]

This issue has been automatically marked as stale because it has been open for 14 days without activity. It will be closed if no further activity occurs within the next 14 days. If this is still an issue, just leave a comment or remove the "stale" label.

[github-actions]

This issue has been automatically marked as stale because it has been open for 14 days without activity. It will be closed if no further activity occurs within the next 14 days. If this is still an issue, just leave a comment or remove the "stale" label.

[SalahAdDin]

Hi, I've integrated Stisla with my Bootstrap 4 Generator for CodeIgniter 4. But I use jsdelivr cdn (npm). Maybe someone needs it 😄

Still waiting for the React version.

[github-actions]

This issue has been automatically marked as stale because it has been open for 14 days without activity. It will be closed if no further activity occurs within the next 14 days. If this is still an issue, just leave a comment or remove the "stale" label.