Theme¶
- How to create a multicolored theme fora modern sharepoint online site
- BRK3090 - Customizing Modern SharePoint Sites: Branding, Site Scripts and Site Designs
- https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-themes
- http://tricky-sharepoint.blogspot.ch/2017/04/using-sharepoint-themes-colors-in-spfx.html
- http://sass-lang.com/guideaspx
- How to: Use PowerShell to customize the theme of a SharePoint Modern Site
- How to make your web parts responsive to the parent container
- Brand modern SharePoint Online sites
- two approaches to applying modern theme
- SPFX integration for theme support
- Creating a Section Aware webpart in SPFx
- Adding support for theme variants in SPFx web parts
Get Theme¶
$t = Get-PnPTenantTheme -Name "Contoso Team Theme"
$t.Palette | ConvertTo-Json | Clip
Section Backgrounds¶
- Supporting section backgrounds
- Develop SPFx web parts for different section designs using CSS
- Using Custom Color for Section Backgrounds and Page Headers
- Adding support for theme variants in SPFx web parts
Office Fabric Tips¶
Responsive Tips¶
- How to test responsiveness and user experience for SPFx web parts properly
- Simulate Mobile Devices with Device Mode in Chrome DevTools
CSS Learning¶
CSS Tips¶
- CodyHouse is a library of HTML, CSS, JS nuggets
- A Complete Guide to Grid
- CSS Grid — Responsive layouts and components
- MDN: Use CSS to solve common problems
- Part 1: Style Options & How to Import
- Part 2: Dynamic Bundling of Styles
- Guidance for CSS in SharePoint Framework
CSS Grid¶
- A Complete Guide to CSS Grid
- Grid - Einfühung in 4 Schritten
- CSS Grid – Einführung in Gestaltungsraster mit dem Grid Layout Module
- Grid by Examples
Flexbox¶
CSS Box Model¶
CSS Specification¶
Tools¶
- SPFxThemeWiz
- codepen.io
- caniuse.com
- CSS Validation Service
- mozilla addon - web-developer
- open-ui.org
- shadcn/ui - Build your component library
Testing¶
Debug¶
Output theme variables¶
var palette = window.__themeState__.theme;
var containerElement = document.createElement("div");
containerElement.style.padding = "1em";
containerElement.style.fontFamily = "sans-serif";
containerElement.style.columnCount = "3";
document.body.appendChild(containerElement);
var arr = Object.keys(palette).map(k => {
var colorElement =document.createElement("div");
colorElement.style.marginTop = "1ex";
var nameElement =document.createElement("span");
nameElement.style.display = "inline-block";
nameElement.style.minWidth= "150px";
nameElement.innerHTML = k
colorElement.appendChild(nameElement );
var squareElement = document.createElement("span");
squareElement.style.display= "inline-block";
squareElement.style.border= "solid 1px #888";
squareElement.style.width = "12px";
squareElement.style.height = "12px";
squareElement.style.margin = "0 2px 0 1ex";
squareElement.style.backgroundColor = window.__themeState__.theme[k];
colorElement.appendChild(squareElement);
var hexElement =document.createElement("span");
hexElement.innerHTML = window.__themeState__.theme[k];
colorElement.appendChild(hexElement);
containerElement.appendChild(colorElement);
});
window.spModuleLoader._bundledComponents["b6917cb1-93a0-4b97-a84d-7cf49975d4ec"].PageManager._instance.pageContext.legacyPageContext
