Roadmap or future plan

[phena109]

Hello oxalorg,

I personally think this project worth develop futher. But for what this project offers at the moment it seems that in close future you will have master most of the required styles. So I am curious what you going to add in, css-wise or interoperability-wise or something completely new.

I have a few quick ideas (which is not very thorough and may not be feasible) below:

1. Compatible with Bootstrap
2. Make available in package managers for languages, composer etc
3. Better cross browser compatibility (prefix etc)
4. Make available in CDNs
5. Make compatible in Wordpress (or other popular CMSes)

Hope you continue with the good work.

[oxalorg]

Hey there, phena109

Thank you for your time. I'm hoping to keep sakura as simple as possible.

I'm open to the feedback from the users, while still avoiding a lot of feature creep so as to not overwhelm people who expect sakura.css to "just work" with a small footprint.

Regarding your awesome ideas:

1. Compatible with Bootstrap

I'm not sure how this would be helpful? Maybe you could expand on this?

2. Make available in package managers for languages, composer etc

I'll definitely get onto this.

3. Better cross browser compatibility (prefix etc)

Currently I'm recommending people (in the README.md) to use it along with normalize.css, because I don't feel that repeating the same stuff done by other more battle-tested libraries would be useful.

Though I'm definitely open to these changes, I had almost 0 stars a few hours ago so definitely haven't tested this on multiple browsers! Hahah 🙈

4. Make available in CDNs

This is probably the first thing on my todo list. I was thinking of making it available via cdnjs.

5. Make compatible in Wordpress (or other popular CMSes)

This seems like a great idea, but most of the CMS layouts are extremely complex and are designed to please everyone, providing a lot of customization. This seems something completely opposite to what sakura does. But I'd be happy to hear more about this!

[phena109]

Hi Oxalorg,

Keeping simple is fine. I really don't mean to bloat up the project in any way.

What I mean by compatible with Bootstrap is more like carefully assess if sakura will have conflicting styles with bootstap that cause issue with the advertised 'feature'. There maybe none conflict. But once you have assessed, either making required changes or without change, you can proudly say you are compatible with Bootstrap that gives user confident in using sakura.

As for WP and other CMSes, I initially mean more or less the same as my explanation above about Bootstrap. But if theme builder are using sakura they usually start from scratch. So I think what I said doesn't apply, in fact.

Anyway, I think you have a good start. I definitely consider using this for my future projects.

cheers

[chmln]

Meh.

Why would anyone use bootstrap and sakura at the same time? These two frameworks are exact opposites of each other.

I also don't think sakura would be a good fit for page builders, which are inherently bloated.

@oxalorg keep up the great work! There's definitely space for such lightweight frameworks.

Here's how I think sakura could improve further:

• nicer looking buttons with basic animations (using keyframes) on hover and active
• forms seem nice enough but could use some visual improvements as well. basic transitions e.g. in border color would also be a nice touch
• keep everything else as is 👍

[oxalorg]

@oxalorg keep up the great work! There's definitely space for such lightweight frameworks.

@chmln Thank you, and I wholeheartedly agree.

I ended up writing this because even the most minimal of frameworks (min.css/skeleton.css) had a considerable learning curve, and I really wanted something that "just works". I feel that a lot of people have liked sakura for this exact reason.

For someone who wants to use sakura and bootstrap together, it shouldn't be a lot of work since sakura is pretty small and can easily be customized.

---

Here's how I think sakura could improve further:

• nicer looking buttons with basic animations (using keyframes) on hover and active
• forms seem nice enough but could use some visual improvements as well. basic transitions e.g. in > border color would also be a nice touch
• keep everything else as is 👍

I too feel that the forms and buttons are a bit lacking. I'll be researching about some decent ways to go about implementing these. Thank you for your input ^_^

[purag]

What are your thoughts on modularizing? As in, separate scss files for tables, lists, etc. This way people can pick and choose specific modules if they just don't want to go through the hassle of styling tables, for example. They can just plug in sakura/table.css.

Of course, there'd still be sakura/all.css or something.

[oxalorg]

What are your thoughts on modularizing? As in, separate scss files for tables, lists, etc.

To be honest, It probably wouldn't harm anyone. But I can't really think that it would be extremely useful either. Since the styling is so minimal on sakura, it's best to just overwrite as and when you require, and if you don't, you still get sensible defaults.

If someone still desires to only extract say "table" styles, they should be able to do so by copying a mere 10 lines (or just delete rest of the stuff) within minutes, if not seconds.

Also, having separate modules can confuse some folks. For example, "Do I need both sakura.css and tables.css for tables to work, or do I only need one?"

[traverseda]

One thing that I've done with sakura on my own projects is converted it to use a flexbox column layout instead of margin:auto based centering. The big advantage of this approach is that your content is all nicely centered, but you can make things full width/bleed, or otherwise stick out beyond the center column.

I'm not sure it's a good fit for sakura, but as an alternative centering method it is very convenient for a lot of things. For example you can add

header {
    min-width:100%;
}

In order to make a "bootstrap" style header/menu bar that's the same width as your screen. Flexbox centering seems to be mostly compatible with sakura's goals, but it is a bit more complicated.

[oxalorg]

Hey @traverseda Thanks for using sakura and your inputs. Unfortunately I believe adding flexbox, or any layout specific functionality to sakura is a non-goal at the moment. Maybe in the future? 😸

[traverseda]

Sakura already handles "layout specific functionality". It centers content and applies a max body width. What I suggested would just be a different, more flexible, way of doing that.

Here's a minimal example of what that could look like

body > * {
    max-width:684px;
    align-self:center;
    width:100%;
}
body {
    display: flex;
    flex-direction:column;
    max-width:100%; //override sakuracss default max width
}

I mean I'm quite content with sakura, and don't think there really needs to be any "future plans". It's pretty much a finished project from where I'm standing. But changing the centering method from the margin:auto based hack to something flexbox based could be a pretty big improvement for people wanting to build more complex things on top of sakura, and it's a lot less of a hack.

Try that on a page, and try setting an explicit max-width on an image element. You can now get full-bleed objects with basically no effort.

See how the image extends past the normal borders sakura imposes on body content?

[oxalorg]

@traverseda I feel what you're proposing, and I'll give it more thought. Thanks!

But I still feel that adding anything flex related will make it complicated to make small tweaks for those who don't know css.

And a majority of Sakura users are those who just don't want to bother with css at all and just want some sensible defaults. 😄

[traverseda]

I'm not sure that flex would make it more complicated for simple tweaks. I think everything should work pretty much how it always did, just the method of centering would be different.

My biggest concerns would be backwards compatibility, and browser support for older browsers. If nothing else the margin:auto hack works pretty much everywhere.

I'm not really even saying it's a good idea. It's something I've done on a few of my sakura css powered sites, but it's definitely worth playing around with it a bit.