Lightning component linking salesforce lightning design system

Question

I'm trying to use the lightning design system into a lightning component so I can use the grid system. My problem is for installing the lighning design system : I went here and downolad the "Design System Zip" . I went into my salesforce organization and put this folder into my static ressources (and the MIME type is application/x-zip-compressed).

Then in my component i put <ltng:require styles="/resource/slds100/assets/styles/salesforce-lightning-design-system.css"/>

Here is a part of my code (lightning component):

<aura:component controller="ActuliteImageController" implements="forceCommunity:availableForAllPageTypes">

<ltng:require scripts="/resource/jqueryMin,/resource/bootstrapMinJs"
              styles="/resource/bootstrapMin, /resource/slds100/assets/styles/salesforce-lightning-design-system.css"
              afterScriptsLoaded="{!c.doInit}"/>

<aura:attribute name="act" type="Act__c[]"/>

<div class="slds-grid">
  <span class="slds-badge slds-theme--inverse">Label</span>
    <div class="conteneur slds-col slds-size--1-of-1">
        <aura:iteration var="a" items="{!v.act}">
            <div class="article slds-col slds-size--1-of-1">
            some text and image
            </div>
        </aura:iteration>
    </div>

</div>    

I tested that with the span tab "label" but it's not working, the style is not applied, neither the grid.

In the browser explorator , in the tab sources I open the folder "ressource" and then I can see another folder "slds100/assets/styles" in which I can see the sheet "salesforce-lightning-design-system.css". When I click on it, the window stay empty as if the css sheet is empty...

What I am doing wrong ? How do you do for installing lightning design system ?

Thanks

Answer 1

There's a badge for that! Trailhead has a great unit that walks you through the process. To simplify the install you can go here and install it as a managed package.

Step 2 - Install the SLDS Unmanaged Package

The easiest way to get started is to install the latest Salesforce Lightning Design System unmanaged package, which includes the Design System as a static resource zip file.

Log in to your developer org

In a separate browser window, go to the Salesforce Lightning Design System downloads page, look under the Design System Unmanaged Packages section, and click on the latest unmanaged package. Press Install to install it. This will install the package in your Salesforce org. The unmanaged package includes the Salesforce Lightning Design System as a static resource zip file