Sp-dev-docs: Design, UX and code patterns for SPFx Web Parts based on SASS and CSS

Created on 6 Dec 2017 · 2Comments · Source: SharePoint/sp-dev-docs

Design and UX section for SPFx Web Parts and SASS/CSS

There is a huge interest on how to develop web parts properly so that they can be used in various base containers aka columns provided by the Communication Site template and modern Team site experience. There are a lot of patterns that can be safely used but needs to documented first.

Another missing component is on how to deal with SASS. What are common recipes that I can use in web parts. How to make style definitions reusable and how to manage design customisation from an enterprise perspective.

All theses are currently not appropriate documented in the spf-dev-docs and needs to be enhanced more.

My recommendation is to create a seperate section that will cover those common scenarios.

Happy to pick this section because I will document them on my blog anyway. It think it can be beneficial for more than just my regular blog viewers.
The latest blog on: SASS/CSS scoping though CSS Modules, which is an integral part of SPFx, draw a lot of attention recently.

docs

Source

StfBauer

👍2

Most helpful comment

I know nothing about Sass/scss (or whatever it is that spfx uses) and am trying to pick it up as I go. Would be great to have a quick intro article about how to use it specifically with SPFX . Particularly with nesting scss classes and how they re;late to nested react components. It has me totally confused!

russgove on 8 Dec 2017

👍3

All 2 comments

russgove on 8 Dec 2017

👍3

This issue is being closed as part of an issue list cleanup project. Issues with no activity in the past 6 months that aren't tracked by engineering as bugs were closed as part of this inititive. If this is still an issue, please follow the steps outlined to re-open the issue.