/docs/getting-started.md

https://github.com/wework/ray · Markdown · 135 lines · 99 code · 36 blank · 0 comment · 0 complexity · c22dd37f3146087d16c61f8a4f2658aa MD5 · raw file 

    

  1. ---
    2. 

  2. title: Getting Started
    3. 

  3. label: Guide
    4. 

  4. ---
    5. 

  5. 

  6. Just want to get your feet wet? Check out the [codepen demo](https://codepen.io/adamraider/pen/bZoBqL).
    7. 

  7. 

  8. ## Install
    9. 

  9. 

  10. Install via yarn
    11. 

  11. 

  12. ```bash
    13. 

  13. $ yarn add @wework/ray-core
    14. 

  14. ```
    15. 

  15. 

  16. Install via npm
    17. 

  17. 

  18. ```bash
    19. 

  19. $ npm install --save @wework/ray-core
    20. 

  20. ```
    21. 

  21. 

  22. ## Import
    23. 

  23. 

  24. Ray requires both CSS and JavaScript files to be imported into your application.
    25. 

  25. 

  26. ### CSS
    27. 

  27. 

  28. We encourage the use of the Sass source files, as they give access to Ray variables and mixins. If you are using Sass for your project, simply import the Ray SCSS file into your app's main stylesheet:
    29. 

    30. 

  30. ```css
    31. 

  31. @import '@wework/ray-core/scss/ray-core';
    32. 

  32. ```
    33. 

  33. 

  34. If you prefer to use plain CSS, you can either [use our CDN](#cdn), or import the Ray CSS file at `@wework/ray-core/css/ray-core`
    35. 

  35. 

  36. ### JavaScript
    37. 

  37. 

  38. In order for certain components to work properly, you must import Ray into your app:
    39. 

  39. 

  40. ```js
    41. 

  41. import '@wework/ray-core';
    42. 

  42. ```
    43. 

  43. 

  44. For convenience, Ray will automatically instantiate any components that require JavaScript on `DOMContentLoaded`.
    45. 

  45. 

  46. If components are generated after this event (i.e. client-side rendered), or if they require additional programming, you can import individual component classes and use the APIs available on the component level throughout the documentation:
    47. 

  47. 

  48. ```js
    49. 

  49. import { Select } from '@wework/ray-core';
    50. 

    51. 

  51. // instantiate all instances found in the document
    52. 

  52. Select.createAll();
    53. 

    54. 

  54. // manually create a specific instance
    55. 

  55. const select = Select.create(document.querySelector('.ray-select'));
    56. 

    57. 

  57. // manipulate the component from code
    58. 

  58. select.set('pikachu');
    59. 

  59. ```
    60. 

  60. 

  61. ## CDN
    62. 

  62. 

  63. Ray can also be installed via CDN for rapid prototyping.
    64. 

  64. 

  65. | Resource | URL                                                               |
    66. 

  66. | -------- | ----------------------------------------------------------------- |
    67. 

  67. | CSS      | https://unpkg.com/@wework/ray-core@latest/css/ray-core.min.css    |
    68. 

  68. | ES5      | https://unpkg.com/@wework/ray-core@latest/scripts/ray-core.min.js |
    69. 

  69. 

  70. <br/>
    71. 

  71. 

  72. ```html
    73. 

  73. <html>
    74. 

  74.   <head>
    75. 

  75.     <link
    76. 

  76.       rel="stylesheet"
    77. 

  77.       href="https://unpkg.com/@wework/ray-core@latest/css/ray-core.min.css"
    78. 

  78.     />
    79. 

  79.   </head>
    80. 

    81. 

  81.   <body>
    82. 

  82.     <div class="ray-select">
    83. 

  83.       ...
    84. 

  84.     </div>
    85. 

    86. 

  86.     <script src="https://unpkg.com/@wework/ray-core@latest/scripts/ray-core.min.js"></script>
    87. 

  87.     <script>
    88. 

  88.       Ray.Core.Select.create(document.querySelector('.ray-select'));
    89. 

  89.     </script>
    90. 

  90.   </body>
    91. 

  91. </html>
    92. 

  92. ```
    93. 

  93. 

  94. ## Fonts
    95. 

  95. 

  96. You will also need to install Ray fonts, which can be done via WeWork's CDN. See instructions in the [fonts documentation](/foundations/fonts/).
    97. 

    98. 

  98. ## Structure
    99. 

  99. 

  100. `@wework/ray-core` is structured as follows:
    101. 

  101. 

  102. ```txt
    103. 

  103. .
    104. 

  104. ├── es/
    105. 

  105. │   ├── index.js
    106. 

  106. │   ├── global/
    107. 

  107. │   ├── components/
    108. 

  108. ├── umd/
    109. 

  109. │   ├── index.js
    110. 

  110. │   ├── global/
    111. 

  111. │   ├── components/
    112. 

  112. ├── scripts/
    113. 

  113. │   ├── ray-core.js
    114. 

  114. │   ├── ray-core.js.map
    115. 

  115. │   ├── ray-core.min.js
    116. 

  116. │   ├── ray-core.min.js.map
    117. 

  117. ├── scss/
    118. 

  118. │   ├── ray-core.scss
    119. 

  119. │   ├── global/
    120. 

  120. │   ├── components/
    121. 

  121. ├── css/
    122. 

  122. │   ├── ray-core.css
    123. 

  123. │   ├── ray-core.css.map
    124. 

  124. │   ├── ray-core.min.css
    125. 

  125. │   ├── ray-core.min.css.map
    126. 

  126. ├── LICENSE
    127. 

  127. └── README.md
    128. 

  128. ```
    129. 

  129. 

  130. ## Contributing
    131. 

  131. 

  132. Feeling ambitious? Good, because we’d love your input and contributions to the design system.
    133. 

  133. 

  134. - Create an issue or submit a pull request at [@wework/ray](https://github.com/wework/ray/issues).
    135. 

  135. - Join us in the [#ray-design-system](https://wework.slack.com/messages/CFLL3QWQ5) slack channel. (For WeWork employees)
    136.