[feature request] Material design elevation classes

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

https://get.foundation

MIT License

29.65k stars 5.48k forks source link

[feature request] Material design elevation classes #10342

Closed codetheorist closed 6 years ago

codetheorist commented 7 years ago

So lately I've been using Vuetify, which comes with some super-handy elevation classes for adding the box shadow stuff for DOM element elevation, to give the appearance of separate layers.

I think it would be awesome if Foundation had something similar baked into core. What do you guys think?

I'm up for working on a pull request if you guys think it's a good idea.

@IamManchanda @kball @rafibomb

IamManchanda commented 7 years ago

This is an interesting feature request ( sorry yeti's for being biased to VUE again)

But, our current plans for F7 till date is

Environment Agnostic CSS… so that people can use their own JS Implementation if they want to.
Themes & extensibility. Should be able to have a ‘bootstrap theme’, ‘material theme’, etc. Any design language should be relatively implementable in Foundation.
- (May include components unique to theme? Should have standard for incorporating both the style/settings (a la building blocks) and extending JS)
- We plan to use SMACSS and ITCSS for this => See https://git.io/vQggS ( Though please note the architecture in this screenshot most probab. change as per the feedback from @ncoden )
Pluggable JS architecture that separates logical changes from DOM manipulation and makes writing advanced framework integrations (vue/angular/react/etc) simpler and able to take advantage of the logical JS in the core framework.

IamManchanda commented 7 years ago

BTW @codetheorist I am learning Vue too ... As a personal favour It will be great, if you can guide me with some goodie links :wink:

codetheorist commented 7 years ago

To be honest, I'm still learning it myself. I picked up about general SPA's with state control, but getting the hang of server side rendering is what I'm struggling with.

One tutorial I've followed which is quite useful is here. This tutorial is Drupal & Vue.JS, but the concepts of the Vue.JS side of things apply to any Rest API endpoint you setup. I've found this quite useful along with obviously the Vue.JS docs themselves. The 'Majesty of VueJS 2' book has also been recommended a few times so I'm looking forward to checking that out.

I would also recommend downloading the Vue Hackernews demo and installing an instance of each available template generated with the Vue CLI tool, to see how they differ.

There is also a working Vue Foundation project that I have some code ready to push for a PR. That has pretty much every Foundation component ready to go, but only in a basic state.

If you could also let me know any decent links you might come across, that'd be cool.

IamManchanda commented 7 years ago

@codetheorist I have this link only with me right now but this is great https://laracasts.com/series/learn-vue-2-step-by-step/

Have Just started it ... Gone through first 11 tuts only ... made some components by those tuts (message, modal, tabs) too but still digging into vue!

ncoden commented 7 years ago

@IamManchanda @codetheorist Issues are not chat rooms. Please keep post in it public messages about Material design elevation classes or related, and more globally that interest the future visitors of this topic. ;)

No I'm not fun at parties

IamManchanda commented 7 years ago

@codetheorist Extending on my above Issue Related comment

Checkout this very latest blog post http://zurb.com/blog/the-framework-bill-of-rights :wink: