[SalesForce] How to work with the lightning design system CSS framework

I was asked by an employer to create a basic web page using Javascript, HTML, CSS, and to use the lightning design system CSS framework.

I'm completely new to salesforce and I was wondering how would I be able to use the SLDS CSS framework?

Am I able to use it in visual studio code or do I have to work from the salesforce platform?

Any resources would be gladly appreciated, I tried doing research on my own but the salesforce documentation is a bit confusing.

Best Answer

You can use any platform you desire. Start by going to the Downloads page, download the source or precompiled CSS. Import it just as you would any other style sheet. By default, you don't need a scope, just start using CSS.

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="assets/styles/salesforce-lightning-design-system.min.css" />
  </head>
  <body>
    <!-- your markup here -->
  </body>
</html>

Using the "min" version is recommended for production use, or you can use the standard file for debugging/easier reading.

If you need a "slds" scope (useful for limiting SLDS to just part of a page), use the scoping tool found on the downloads page.

Related Topic