Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend framework support #32

Open
anandbhaskaran opened this issue Mar 7, 2019 · 37 comments
Open

Frontend framework support #32

anandbhaskaran opened this issue Mar 7, 2019 · 37 comments

Comments

@anandbhaskaran
Copy link

@anandbhaskaran anandbhaskaran commented Mar 7, 2019

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
Copy link
Member

@nauvalazhar nauvalazhar commented Mar 8, 2019

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
Copy link
Author

@anandbhaskaran anandbhaskaran commented Mar 8, 2019

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
Copy link
Member

@nauvalazhar nauvalazhar commented Mar 8, 2019

Good if you will implement it :)

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

@lkloon123
Copy link
Contributor

@lkloon123 lkloon123 commented Mar 14, 2019

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

@coderabsolute
Copy link

@coderabsolute coderabsolute commented Apr 6, 2019

@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
Copy link
Member

@nauvalazhar nauvalazhar commented Apr 7, 2019

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

@cyberhck
Copy link
Contributor

@cyberhck cyberhck commented Apr 10, 2019

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
Copy link
Member

@nauvalazhar nauvalazhar commented Apr 10, 2019

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

@cyberhck
Copy link
Contributor

@cyberhck cyberhck commented Apr 10, 2019

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
Copy link
Member

@nauvalazhar nauvalazhar commented Apr 10, 2019

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

@cyberhck
Copy link
Contributor

@cyberhck cyberhck commented Apr 10, 2019

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
Copy link
Contributor

@lkloon123 lkloon123 commented Apr 10, 2019

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

@coderabsolute
Copy link

@coderabsolute coderabsolute commented Apr 10, 2019

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

@cyberhck You may also consider Bulma.

@cyberhck
Copy link
Contributor

@cyberhck cyberhck commented Apr 11, 2019

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
Copy link
Contributor

@lkloon123 lkloon123 commented Apr 11, 2019

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

@nauvalazhar
Copy link
Member

@nauvalazhar nauvalazhar commented Apr 11, 2019

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.

@nauvalazhar nauvalazhar pinned this issue Apr 11, 2019
@coderabsolute
Copy link

@coderabsolute coderabsolute commented Apr 15, 2019

@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
Copy link
Contributor

@cyberhck cyberhck commented Apr 15, 2019

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
Copy link
Member

@nauvalazhar nauvalazhar commented Apr 15, 2019

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 😄

@jonorozcoc
Copy link

@jonorozcoc jonorozcoc commented Jun 18, 2019

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

@lkloon123
Copy link
Contributor

@lkloon123 lkloon123 commented Jun 19, 2019

@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
Copy link
Contributor

@cyberhck cyberhck commented Jun 19, 2019

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
Copy link
Member

@nauvalazhar nauvalazhar commented Jun 19, 2019

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

@samstaron
Copy link

@samstaron samstaron commented Oct 27, 2019

@lkloon123 how do I import this repo into vue?

@cyberhck
Copy link
Contributor

@cyberhck cyberhck commented Oct 28, 2019

@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
Copy link
Contributor

@lkloon123 lkloon123 commented Oct 28, 2019

@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
Copy link
Contributor

@cyberhck cyberhck commented Mar 27, 2020

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
Copy link
Member

@nauvalazhar nauvalazhar commented Mar 29, 2020

But, what framework will we use?

@nauvalazhar
Copy link
Member

@nauvalazhar nauvalazhar commented Mar 29, 2020

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

@cyberhck
Copy link
Contributor

@cyberhck cyberhck commented Mar 29, 2020

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
Copy link
Member

@nauvalazhar nauvalazhar commented Apr 1, 2020

I wrote a new issue here. @cyberhck

@SalahAdDin
Copy link

@SalahAdDin SalahAdDin commented Sep 1, 2020

@anandbhaskaran Did you implement it?

@anandbhaskaran
Copy link
Author

@anandbhaskaran anandbhaskaran commented Sep 1, 2020

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
Copy link

@SalahAdDin SalahAdDin commented Sep 1, 2020

So bad, I wanted to try it with React.

@lkloon123
Copy link
Contributor

@lkloon123 lkloon123 commented Sep 2, 2020

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

@SalahAdDin
Copy link

@SalahAdDin SalahAdDin commented Sep 2, 2020

The problem is to replace all jquery "components".

@mjamilasfihani
Copy link

@mjamilasfihani mjamilasfihani commented Sep 20, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants