When developing in my sandbox and using the SLDS framework, referencing a SVG throws a console error of "Unsafe attempt....".

My developer console will be: https://cs41.salesforce.com/...
And my actual sandbox URL will be: https://c.cs41.visual.force.com/...

I assumed that added a whitelisted CORS URL would resolve this, but it does not. I ASSUME that all will be well in production, but how do I actually know?

Browser: Chrome (latest)
Graphics that fails: but ALL of them do

Any guidance?

Thanks,
Paul

I can create a button with dropdown menu and there are examples of markup in official page.
But when it comes to set a dropdown menu button in button group, it seems there is no example.

I tried following:

  <div class="slds-button-group" role="group">
    <button class="slds-button slds-button--neutral">Save</button>
    <div class="slds-dropdown-trigger">
      <button class="slds-button slds-button--icon-border-filled">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Actions</span>
      </button>
      <div class="slds-dropdown slds-dropdown--left slds-text-heading--label slds-dropdown--menu">
        <ul class="slds-dropdown__list" role="menu">
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Save as</a></li>
          <li href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Delete</a></li>
        </ul>
      </div>
    </div>
  </div>

But the result includes spacer in buttons (not grouped).

Is there any correct way to achieve the UI ?

https://www.lightningdesignsystem.com/components/grid-system

Click any SMALL tab. Press right-arrow.

Expected:
MEDIUM tab selected

Actual:
SMALL tab stays selected

React dev tools shows that currentIndex state doesn't set on first click.

According to the documentation for buttons
https://www.lightningdesignsystem.com/components/buttons
it should be possible to use html button or a elements.

It does not work for icons.
In the example, the first is a button slds-button--icon-border-filled
the second/third is a a slds-button--icon-container
same is if the a is a slds-button--icon-border/-filled

The exception would be that the icon is centered (as with buttons).

I'm trying to display a button if the form factor of the device is x-small or small, but hide if for medium and large. The behaviour I am looking for is essentially hidden-md and hidden-lg from Boostrap.

I've tried using the visibility classes : slds-x-small-show-only and slds-small-show-only, but the problem is these default to hiding the element and only showing it if the form factor matches the media query:

  .slds .slds-x-small-show-only {
    display: none; }
  @media (min-width: 320px) and (max-width: 479px) {
      .slds .slds-x-small-show-only {
        display: block; }

thus whichever style class appears last hides the element if the media query doesn't match.

In version 0.9.2 slds-small-show-only appears after slds-x-small-show-only, so the content is hidden on x-small by the small default of display:none

I have found out, that some of the CSS is missing in 0.9.2 even when we have working example under components section.
For example there is validation example under forms section, but when I use the same exact classes nothing works until I manually copy CSS from example page into my page.

In https://www.lightningdesignsystem.com/components/dropdowns#role=regular&status=all

first example is

<div class="slds-dropdown-trigger" aria-haspopup="true">
  <button class="slds-button slds-button--icon-container">

-- should be --

<div class="slds-dropdown-trigger">
  <button class="slds-button slds-button--icon-container" aria-haspopup="true">  

based on 0.9.0 comments (minor)

Is this intentional? Seems misleading if it is.

Under the Design tree on the "Displaying Data" page there seems to be missing component. The "Discussion Feed" mentioned on this page is not featured under the Components tree. How would I implement something like the "All Updates" discussion feed in my app?

https://www.lightningdesignsystem.com/design/displaying-data#role=regular&status=all

Should be fairly easy per these instructions: http://bower.io/docs/creating-packages/#register

Doing this would make it easier to import the design-system into stand alone web apps. SF Foundation did this with bootstrap-sf1 as seen here: https://github.com/SalesforceFoundation/bootstrap-sf1/blob/master/bower.json and http://bower.io/search/?q=bootstrap-sf1

If it were up to me, I'd name it something short like slds, but that might be so short as to not be descriptive enough.

In using the picklist-multi-select, the ul lacks overflow: auto which allows child scrolling.

<ul class="slds-picklist__options slds-picklist__options--multi shown" style="overflow: auto;">

without overflow:auto

with overflow:auto

Hi There,

Is there any pre-requisite javascript required for loading these components?Can you please help us on same.

I saw your solution to #11 in v0.9.2

The approach is "unusual" as checkboxes usually do not have multiple labels - only if you represent multi-select as checkboxes. Also I think, it should be possible to flip between horizontal and stacked layout - i.e. with the same html code.

Suggestion:

<div class="slds-form-element">
  <div class="slds-placeholder"><!-- empty --></div>
  <label class="slds-checkbox"> .... </label>
</div>

where the
slds-placeholder basically acts like a form-element__label

• display: inline-block if within form--horizontal otherwise none
• width 33%

and adding to slds-checkbox if within form--horizontal

• width: calc(66% - (0.75rem * 2));
• text-align: left

... or

<div class="slds-form-element">
  <div class="slds-form-element__label"><!-- empty --></div>
  <label class="slds-form-element__control"> .... </label>
</div>

Advantage:

• same html structure as normal fields, just with empty label
• fewer, less complex css changes (just handling empty label in stacked)

Hi There, I am trying to get slds-dropdown-trigger to work on touch in the Salesforce1 mobile application. From what I can tell this doesn't seem to be supported/documented?

I saw your solution to #17 in 0.9.2

just to note that

  &[size] {
    ....
    option {
      padding: $spacing-x-small;
    }
  }

• the actual select layout height depends on how many options there are
  (e.g. with size=4 and two selects side-by-side the height is different, if the first contains 3 and the second has 4 options)
• causes the select list and window to resize/re-render, when fewer as the [size] options are displayed (e.g. dynamically setting/removing options)

the options I think are either

• calculating/setting the height in px of the select element based on the [size] value
• remove the padding as the (mobile) browser handles it natively (my suggestion)

I'm currently using a icon button to fire an actionFunction. I've found that when the svg has a 'use' tag referencing to icons or images the action is fired but the page is not rerendered. There's also have a status component that is displayed but never goes out, seems like the action never end.
Using svg with <circle ... for example works fine.

Can you add search functionality to the docs at : https://www.lightningdesignsystem.com/ - often I'd like to find the usage/definition of a specific style class and being able to search for that from the page would be great. Thanks!

Hi,
I am using this SLDS in my one of visualforce page. I was checking the picklist component. one thing i found upon selecting any picklist value it is not reflecting means changing to the picklist value.In the documentation https://www.lightningdesignsystem.com/components/picklists/ how the picklist is properly behaving. Do i need to add any js file or what to do . And what is this attribute 'data-reactid'.Is it anything related to the above problem. Also is this script creating 'reactid' .
"LIGHTNING_DESIGN_SYSTEM.init('components/picklists/index.jsx')"
sorry for if it sounds silly. But I really need to make it work on my this VF page.
Please reply asap.

Thank You.

Hi,
As this is not an issue but i had one question regarding this please check below
how to display the fields in horizontal way inside apex:repeat tag of salesforce with SLDS classes

<
<apex:inputField styleclass="slds-input--small" value="" rendered="" required=""/>

</apex:repeat>

When rendering a horizontal list with dividers, everything is fine the content fits on one line

            <ul class="slds-list--horizontal slds-has-dividers">
              <li class="slds-list__item">Dart Language Overview</li>
              <li class="slds-list__item">Development environment, Tooling</li>
              <li class="slds-list__item">Lightning Design System</li>
              <li class="slds-list__item">Demo</li>
            </ul>

if the content does not fit on one line, the items themselves are adjusted with the dots as the last character in the previous entry.

The expectation is that the list items are wrapped e.g.

* Dart Language Overview * Development Environment, Tooling
* Lightning Design System * Demo

although would be fine if wrapped on word break, e.g.

* Dart Language Overview * Development Environment, Tooling * Lightning 
Design System * Demo

The Checkbox and the slds-form-element__help span are right aligned in a plain horizontal form.

can be fixed by using the approach for compound form, but should I think be properly aligned on the same level as the other fields in a horizontal form.

Hello,

As I'd like to use only one framework and that collisions will not be possible, I'm wondering if there is a way to remove the slds body class and the slds- class suffix ?

Have a nice day.

The components that are in "dev ready" stage have been successfully implemented in Visualforce and lightning but those components in "prototype" stage like "picklist,lookups" and many others are not working as desired using the code provided.
Should we wait for any other release when these components will be changed to "Dev Ready" state or we are missing on implementing it using some javascript.

Kindly guide on same.

This is more of a request than an issue. I believe it would be beneficial to have margin and padding override classes for 'none,' which would be used to add 0 value directionally. This could be useful for custom elements that may react unexpectedly as siblings to the provided Lightning Design components.

$spacing-none: 0 !default;

The default css ignores the size setting for select elements.
.slds-select sets the height to 2.125rem

a fix could be

.slds-select[size] {
  height: inherit;
}

but requires that for single selects the size attribute is not set

https://www.lightningdesignsystem.com/components/lookups/#multi-scope

• click in lookup

focus border blinks and disappears

Using manual sizing like slds-size--1-of-2 with slds-grid--vertical does not work.
Apparently slds-size--xxxx is implemented using width : xxxx which obviously does not work with column (should be height : xxxx in that case...).
Maybe a more generic approach using flex-basis : xxxx could solve the problem ?

Hi,

I was using 'tabs--scoped' and noticed that there currently isn't a style for disabled tabs. I think this would be a nice feature (style) going forward. I know some may say just remove the tabs but in some cases you may not want to completely hide the tab.

Example : enable tabs when an action has been completed

Any thoughts for or against this style?

Thanks
Nelson Ramalho

At: https://github.com/salesforce-ux/design-system/blob/winter-16/ui/components/trees/flavors/base/index.scss#L66

...we have:

  .#{$css-prefix}is-open .#{$css-prefix}button__icon {
    transform: rotate(90deg);
  }

...which is causing all button icons within an open branch to be rotated, even those in sub-branches that are not open.

Yikes!

A very quick and may need more thought fix:

  .#{$css-prefix}is-open > .#{$css-prefix}tree__item > .#{$css-prefix}button > .#{$css-prefix}button__icon {
    transform: rotate(90deg);
  }

dangerouslySetInnerHTML in SvgIcon could be replaced with <use xlinkHref={href}></use> since react 0.14 has support for it.

http://www.lightningdesignsystem.com/components/activity-timeline/#role=regular&status=all

"The activity timeline displays each of the users upcoming, current, and past activities"

Typo (missing apostrophe). Depending on intent, should be

a. "The activity timeline displays each of the users' upcoming, current, and past activities"
or
b. "The activity timeline displays each of the user's upcoming, current, and past activities"

It seems like any button icon's color should match the text color IF the button is disabled. Is the intent to have the icon be the same blue all of the time?

Working with a customer they noted that there was an issue with checkboxes on VF in Salesforce1. Funny thing is that this issue was only with iOS9. Simple code to re-produce this was:

After looking into this very extensively, I noticed the issue was caused by the ~'s in the CSS.
.slds .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox--faux:after{
}

Easy fix was to just swap the "~" for a "+".
Does anyone have any idea why this might be?

Please consider adding engine to the package.json, so people like me don't try node v4.x. Thanks

I used node v0.12, npm i, then npm run dev and ...

Error: Option safe was removed. Use parser: require("postcss-safe-parser")
    at parse (/Users/admin/box/web/design-system/node_modules/postcss/lib/parse.js:18:15)
    at new LazyResult (/Users/admin/box/web/design-system/node_modules/postcss/lib/lazy-result.js:57:24)
    at Processor.process (/Users/admin/box/web/design-system/node_modules/postcss/lib/processor.js:36:16)
    at collectSassVariables (/Users/admin/box/web/design-system/node_modules/@salesforce-ux/aura-css-utils/dist/util.js:108:65)
    at Array.map (native)
    at collectSassVariablesFromFiles (/Users/admin/box/web/design-system/node_modules/@salesforce-ux/aura-css-utils/dist/util.js:129:6)
    at Object.<anonymous> (/Users/admin/box/web/design-system/node_modules/@salesforce-ux/design-system-utils/dist/index.js:75:25)
    at /Users/admin/box/web/design-system/node_modules/stampit/dist/stampit.js:185:31
    at arrayEach (/Users/admin/box/web/design-system/node_modules/lodash/internal/arrayEach.js:15:9)
    at /Users/admin/box/web/design-system/node_modules/lodash/internal/createForEach.js:15:9

It would be great if this worked right after clone. Consider something like for the engine requirement:

    "predev": "node -e 'if(/^v(2|3|4)/.test(process.version)===true){console.log(\"node engine error, looking for node v0.10 <= v0.12\");process.exit(1);}'",

Starting to begin a tablet app that incorporates the new Lightning Design System that you guy's have created. Was looking to see if I could get my hands on a UI kit (psd or sketch) for the design system so I can closely stick to this new UI that has been designed. Thanks!

For data-tables, what is your expected Pagination look?

Contributing doc refs to nonexistent master branch

Everything in the styleguide has downloadable counterparts, except the layouts.
I imagine it would be nice to have these available (including responsive versions) as well.

Good evening,

I stumbled onto an issue that appears to be a bug within Salesforce that hasn't been solved for quite a few years. When referencing SVG tags in Visualforce, the renderer seems to trip up when encountering XML namespace attributes. For example, if I reference the SVG component as suggested in the document, the "slds-media__body" tag is rewritten to be inside the "slds-media__figure" tag even though it is declared to be a sibling in the template.

<apex:page >
    <apex:stylesheet value="{!URLFOR($Resource.SLDS092, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <apex:form styleClass="slds">
        <!-- Without custom component for SVG -->
        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-opportunity">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS092, 'assets/icons/standard-sprite/svg/symbols.svg#opportunity')}" />
                            </svg>
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Opportunity</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle" title="Test Opportunity">Test Opportunity</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>

My solution thus far has been to create a custom component for the SVG tag, which appears to ensure that the template gets written correctly:

Component:

<apex:component >
    <apex:attribute name="styleClass" type="String" description="Class for svg tag" />
    <apex:attribute name="path" type="String" description="Path for svg tag" />
    <svg aria-hidden="true" class="{!styleClass}">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS092, path)}" />
    </svg>
</apex:component>

Page:

<apex:page >
    <apex:stylesheet value="{!URLFOR($Resource.SLDS092, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <apex:form styleClass="slds">
        <!-- With custom component for SVG -->
        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <c:svg styleClass="slds-icon slds-icon--large slds-icon-standard-opportunity" path="assets/icons/standard-sprite/svg/symbols.svg#opportunity" />
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Opportunity</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle" title="Test Opportunity">Test Opportunity</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'i',
1 verbose cli 'salesforce-ux/design-system' ]
2 info using [email protected]
3 info using [email protected]
4 verbose install initial load of /Users/vivekmanoharan/Sites/lightning/package.json
5 verbose readDependencies loading dependencies from /Users/vivekmanoharan/Sites/lightning/package.json
6 silly cache add args [ 'salesforce-ux/design-system', null ]
7 verbose cache add spec salesforce-ux/design-system
8 silly cache add parsed spec Result {
8 silly cache add raw: 'salesforce-ux/design-system',
8 silly cache add scope: null,
8 silly cache add name: null,
8 silly cache add rawSpec: 'salesforce-ux/design-system',
8 silly cache add spec: 'github:salesforce-ux/design-system',
8 silly cache add type: 'hosted',
8 silly cache add hosted:
8 silly cache add { type: 'github',
8 silly cache add ssh: '[email protected]:salesforce-ux/design-system.git',
8 silly cache add sshUrl: 'git+ssh://[email protected]/salesforce-ux/design-system.git',
8 silly cache add httpsUrl: 'git+https://github.com/salesforce-ux/design-system.git',
8 silly cache add gitUrl: 'git://github.com/salesforce-ux/design-system.git',
8 silly cache add shortcut: 'github:salesforce-ux/design-system',
8 silly cache add directUrl: 'https://raw.githubusercontent.com/salesforce-ux/design-system/master/package.json' } }
9 verbose addRemoteGit caching salesforce-ux/design-system
10 verbose addRemoteGit salesforce-ux/design-system is a repository hosted by github
11 silly tryGitProto attempting to clone git://github.com/salesforce-ux/design-system.git
12 silly tryClone cloning salesforce-ux/design-system via git://github.com/salesforce-ux/design-system.git
13 verbose tryClone git-github-com-salesforce-ux-design-system-git-019fd4aa not in flight; caching
14 info git [ 'clone',
14 info git '--template=/Users/vivekmanoharan/.npm/_git-remotes/_templates',
14 info git '--mirror',
14 info git 'git://github.com/salesforce-ux/design-system.git',
14 info git '/Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-019fd4aa' ]
15 verbose mirrorRemote salesforce-ux/design-system git clone git://github.com/salesforce-ux/design-system.git
16 verbose setPermissions salesforce-ux/design-system set permissions on /Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-019fd4aa
17 verbose resolveHead salesforce-ux/design-system original treeish: master
18 info git [ 'rev-list', '-n1', 'master' ]
19 error git rev-list -n1 master: fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
19 error git rev-list -n1 master: Use '--' to separate paths from revisions, like this:
19 error git rev-list -n1 master: 'git [...] -- [...]'
20 silly tryHTTPS attempting to clone git+https://github.com/salesforce-ux/design-system.git
21 silly tryClone cloning salesforce-ux/design-system via git+https://github.com/salesforce-ux/design-system.git
22 verbose tryClone https-github-com-salesforce-ux-design-system-git-176b616a not in flight; caching
23 info git [ 'clone',
23 info git '--template=/Users/vivekmanoharan/.npm/_git-remotes/_templates',
23 info git '--mirror',
23 info git 'https://github.com/salesforce-ux/design-system.git',
23 info git '/Users/vivekmanoharan/.npm/_git-remotes/https-github-com-salesforce-ux-design-system-git-176b616a' ]
24 verbose mirrorRemote salesforce-ux/design-system git clone https://github.com/salesforce-ux/design-system.git
25 verbose setPermissions salesforce-ux/design-system set permissions on /Users/vivekmanoharan/.npm/_git-remotes/https-github-com-salesforce-ux-design-system-git-176b616a
26 verbose resolveHead salesforce-ux/design-system original treeish: master
27 info git [ 'rev-list', '-n1', 'master' ]
28 error git rev-list -n1 master: fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
28 error git rev-list -n1 master: Use '--' to separate paths from revisions, like this:
28 error git rev-list -n1 master: 'git [...] -- [...]'
29 silly trySSH attempting to clone [email protected]:salesforce-ux/design-system.git
30 silly tryClone cloning salesforce-ux/design-system via [email protected]:salesforce-ux/design-system.git
31 verbose tryClone git-github-com-salesforce-ux-design-system-git-5b98b807 not in flight; caching
32 info git [ 'clone',
32 info git '--template=/Users/vivekmanoharan/.npm/_git-remotes/_templates',
32 info git '--mirror',
32 info git '[email protected]:salesforce-ux/design-system.git',
32 info git '/Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807' ]
33 error git clone --template=/Users/vivekmanoharan/.npm/_git-remotes/_templates --mirror [email protected]:salesforce-ux/design-system.git /Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807: Cloning into bare repository '/Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807'...
33 error git clone --template=/Users/vivekmanoharan/.npm/_git-remotes/_templates --mirror [email protected]:salesforce-ux/design-system.git /Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807: Warning: Permanently added the RSA host key for IP address '192.30.252.129' to the list of known hosts.
33 error git clone --template=/Users/vivekmanoharan/.npm/_git-remotes/_templates --mirror [email protected]:salesforce-ux/design-system.git /Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807: Permission denied (publickey).
33 error git clone --template=/Users/vivekmanoharan/.npm/_git-remotes/_templates --mirror [email protected]:salesforce-ux/design-system.git /Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807: fatal: Could not read from remote repository.
33 error git clone --template=/Users/vivekmanoharan/.npm/_git-remotes/_templates --mirror [email protected]:salesforce-ux/design-system.git /Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807:
33 error git clone --template=/Users/vivekmanoharan/.npm/_git-remotes/_templates --mirror [email protected]:salesforce-ux/design-system.git /Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807: Please make sure you have the correct access rights
33 error git clone --template=/Users/vivekmanoharan/.npm/_git-remotes/_templates --mirror [email protected]:salesforce-ux/design-system.git /Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807: and the repository exists.
34 verbose stack Error: Command failed: git clone --template=/Users/vivekmanoharan/.npm/_git-remotes/_templates --mirror [email protected]:salesforce-ux/design-system.git /Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807
34 verbose stack Cloning into bare repository '/Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807'...
34 verbose stack Warning: Permanently added the RSA host key for IP address '192.30.252.129' to the list of known hosts.
34 verbose stack Permission denied (publickey).
34 verbose stack fatal: Could not read from remote repository.
34 verbose stack
34 verbose stack Please make sure you have the correct access rights
34 verbose stack and the repository exists.
34 verbose stack
34 verbose stack at ChildProcess.exithandler (child_process.js:203:12)
34 verbose stack at emitTwo (events.js:87:13)
34 verbose stack at ChildProcess.emit (events.js:172:7)
34 verbose stack at maybeClose (internal/child_process.js:817:16)
34 verbose stack at Socket. (internal/child_process.js:319:11)
34 verbose stack at emitOne (events.js:77:13)
34 verbose stack at Socket.emit (events.js:169:7)
34 verbose stack at Pipe._onclose (net.js:469:12)
35 verbose cwd /Users/vivekmanoharan/Sites/lightning
36 error Darwin 14.0.0
37 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "salesforce-ux/design-system"
38 error node v4.1.1
39 error npm v2.14.4
40 error code 128
41 error Command failed: git clone --template=/Users/vivekmanoharan/.npm/_git-remotes/_templates --mirror [email protected]:salesforce-ux/design-system.git /Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807
41 error Cloning into bare repository '/Users/vivekmanoharan/.npm/_git-remotes/git-github-com-salesforce-ux-design-system-git-5b98b807'...
41 error Warning: Permanently added the RSA host key for IP address '192.30.252.129' to the list of known hosts.
41 error Permission denied (publickey).
41 error fatal: Could not read from remote repository.
41 error
41 error Please make sure you have the correct access rights
41 error and the repository exists.
42 error If you need help, you may report this error at:
42 error https://github.com/npm/npm/issues
43 verbose exit [ 1, true ]

I'm using several instances of the generic title outlined here: http://www.lightningdesignsystem.com/components/tiles in a lightning component.

One thing I've noticed is that if the <p class="slds-truncate"> tag is missing content (rather it is empty), then the next row is pushed up into its place, resulting in a mismatch between the label and the element.

The easy fix currently is to add a non-breaking space at the end of the values, but regardless there should be a less hacky way to handle empty p tags.

Hi, wanted to start using the lightning system for a new app I'm developing,
but the hard requirement of having IE11 or the latest version of chrome/ firefox scares me a bit.

I think especially in the corporate world where there are companies that can't upgrade all of their systems that easily will still make use of older browsers.

Are there any plans to support some fallback css/ js to make sure the pages aren't completely broken on those systems?

I see in sources mixed ways how modules used. One file can contain both ES6 and CommonJS ways.
Is it normal or should be done in consistent way?

I played with the Tabs Component, and I used the Expected Markup section to make it work using JS. This section mentions 3 markups:

• aria-selected
• tabindex
• aria-labelledby

As this was not working, I easily found that I need to change slds-show and slds-hide, which are described in another page.

Lastly, I also had to switch the slds-active class.

I know all this seems obvious once understood, but all this is pretty new, and also most of us are back-end apex developers that have been relying on apex tags to manage all this CSS stuff for us.

So my point is:

• Maybe the slds-active class should be documented in the Expected Markup section (otherwise I'm pretty sure some guys will forget to switch it)
• I understand the slds-show and slds-hide because that's true it's pretty obvious and writing about it on all component wouldn't be the best choice, but maybe having a way to search true the whole documentation would be great. I guess there will be more and more components, and having a search engine would be a nice way to find information on classes that are explained somewhere else.

I'm noticing an issue where slds-is-required isn't working with Visualforce pages. I believe this has to do with .slds being specified after the >. For example:

.slds-is-required > .slds .slds-radio

...should be...

.slds-is-required > .slds-radio

The note in Step 1 offering to let you clone an existing repository should be before Step 1.

The note says after cloning you can go to step 5. That's incorrect. You have to do a "npm install" before going to step 5.

Hi I created a Visualforce page using SLDS and created a tab to show on Salesforce1 Mobile. Everything works fine but icons doesn't show up, they look fine on the regular browser.

I'm trying to implement JS for the datepicker, and looking at the preview for the New Lightning Experience in a Winter '16 org, it looks like the year dropdown is using a <select> where as the SLDS's markup uses a <button> tag. Which one do you recommend we use? Also, should we base the datepicker's behavior (what triggers it to open, where it focuses, how it closes) on the New Lightning Experience's behavior? Thanks

Hi There

I have used Toast Messages for various notifications in my app (VF page with JS remoting using SLDS), this all works fine in the browser, but in the Salesforce1 app the alerts appear at the top of the document regardless of where on the page the user is currently scrolled.

I assume this is due to the way the pages are framed in, as I've had problems with this in SF1 app before, just wondering if their are any suggested workarounds?

Cheers
Chris