Foundation-sites: [feature request] Material design elevation classes

Created on 4 Jul 2017  Â·  6Comments  Â·  Source: foundation/foundation-sites

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

Revisit for F7 feature request javascript scss

Most helpful comment

@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_

All 6 comments

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.

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:

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.

@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!

@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_

@codetheorist Extending on my above Issue Related comment

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

Was this page helpful?
0 / 5 - 0 ratings