Reusable SharePoint CSS classes

Introduction

Hi, fellow SharePoint developers and power users! 🤓

Are you working with the SharePoint Framework (SPFx), or must you style SharePoint lists with JSON formatting? Then you might want to know that there is a collection of all reusable CSS classes available on a single page: https://zerg00s.github.io/sp-modern-classes

How do I use these CSS classes?

Column formatting, view formatting, form formatting

You can use column and view formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements.

Sample JSON formatting for a SharePoint Title field:

• Format a column

• Advanced mode

• Apply a sample sp-field-dataBars CSS class to the Title field:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "attributes": {
    "class": "sp-field-dataBars"
  }
}

• Result:

Read more on JSON formatting:

• Column formatting
• View formatting
• Form formatting
• Column formatting samples. This is a open source repository to share different kind of formatting json files between community. Check column-samples, view-samples or form-samples folder for what’s currently available. Have you build one which you can share? - We do welcome contributions.

SPFx Webparts

In SPFx web parts, you can reuse the classes by using the className attribute. For example, to apply a border to a field, you can use the sp-field-borderAllDashed class:

<div className={`sp-field-dataBars sp-field-borderAllDashed`}>

Conclusion

I hope you find this collection of reusable CSS classes helpful. If you have any questions or suggestions, please leave a comment below. 🙏