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

Refactoring the entire project. What do you think? #58

Open
nauvalazhar opened this Issue Apr 11, 2019 · 3 comments

Comments

Projects
None yet
2 participants
@nauvalazhar
Copy link
Member

commented Apr 11, 2019

Hi.
As I mentioned before, I have a plan to refactoring the entire infrastructure of this project.

Behind this idea, I feel Stisla is just too boring to be a admin template, moreover everyone who uses Stisla will have the same layout, colors and components. And I also don't want to depend on Bootstrap and jQuery.

Recently I was interested in TailwindCSS, maybe we can use it as a base framework; with it, we can make some basic elements such as Card, Alert, Nav, etc. TailwindCSS is a utility-first framework so that it can reduce custom classes and use utility classes such as .p-5 (to add padding) instead.

I also plan to break the template into several parts, at least:

  • Element
    This is the core part of the template, here are the basic elements such as buttons, alerts, navigation, typography and more.

  • Layout
    You need to specify the layout you want to use for the current project interface.
    Layout

  • Section
    Next, specify a section. This section is easy, usually only the title, subtitle, description and post meta (author, published date).
    Section

  • Block
    Blocks are pre-designed components that consist of elements and have a specific purpose. Each block consists of HTML, SCSS, JavaScript API (if any).
    Block


Each of the above parts is customizable (color, sequence of elements, etc). Will be better to have a code that can be adapted to the front-end framework, such as ReactJS (JSX), Vue Component, Angular and so on. Each of the parts above has its own documentation page and versioning, so, I think every part will have a public repository.

Besides that, I also think each part can be installed via Yarn/NPM. So, SCSS and JavaScript are automatically installed in the current project folder.

For example:

# layout
stisla use layout/style-1

# block
stisla add component/twitter-card

As such, this won't be the template admin only. You can also create templates for landing pages or others.

This will not delete the admin templates that currently exist. We will recreate the admin template with new concepts and architecture.

What do you think about this?

Thank you

@cyberhck

This comment has been minimized.

Copy link

commented Apr 11, 2019

I love the idea, when we do this, I can create react components in parallel, at the end we should be able to recreate this admin template both in react and normal html/css.

And let's make whatever we can very modular, so if we need a card component, then it'll have card.scss, if it depends on something, it should mark it as a dependency.

Let's start by breaking down components into very small piece, build them and later patch things up.

I'd say if we can do it gradually like by targeting pages, I'd go for blank page at first, once the blank page is done, login page etc, that'd work great.

Would you be open to creating a slack workspace for this so we can discuss easier? I'll help you in keeping things modular and implementing in react side of things, someone else can take vuejs and angularjs implementation.

For me, multiple theme support is a huge plus, let's make a list of things we'd like to do first, then we can think about how we can achieve it.

At last I want to be able to get core.css, and should be able to slap in any theme, (dark/light according to user's preference), but I don't want to include other information than colors in theme files.

JS api also should be very simple, and we can prefer to do with css whatever is possible, and JS should be very straightforward, if something is messy, we can come back to it later,

@nauvalazhar

This comment has been minimized.

Copy link
Member Author

commented Apr 11, 2019

Cool! I will be back soon after work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.