Skip to content

Commit 1f64679

Browse files
justsmllayershifter
justsml
and
layershifter
authored
docs: make get started instructions around themes more clear (#3713)
* Making setup instructions around themes more clear * improve formatting * Update CodeSnippet.js * Update docs/src/pages/Usage.mdx Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
1 parent 358d142 commit 1f64679

2 files changed

Lines changed: 41 additions & 69 deletions

File tree

‎docs/src/components/CodeSnippet/CodeSnippet.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const prettifyCode = (code, parser) => {
4848
}
4949

5050
const formatters = {
51-
bash: (val = '') => val.replace(/^/g, '$ '),
51+
bash: (val = '') => val.replace(/^[\w]/gm, '$$ $&'),
5252
json: (val) => prettifyCode(val, 'json'),
5353
js: (val = '') => prettifyCode(val, 'babel'),
5454
jsx: (val = '') => prettifyCode(val, 'babel'),

‎docs/src/pages/Usage.mdx‎

Lines changed: 40 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -14,78 +14,55 @@ export const meta = {
1414
Semantic UI React provides React components while Semantic UI provides themes as CSS stylesheets.
1515
Install the React components and choose a theme that suits your needs.
1616

17-
### Components
17+
### Option 1: Package Manager
1818

19-
React components can be installed via <code>yarn</code>:
19+
React components can be installed via <code>yarn</code> or <code>npm</code>:
2020

21-
<CodeSnippet mode='bash' value={`yarn add ${props.pkg.name}`} fitted />
21+
```bash
22+
yarn add semantic-ui-react semantic-ui-css
23+
## Or NPM
24+
npm install semantic-ui-react semantic-ui-css
25+
```
26+
27+
After install, **import the minified CSS file in your app's entry file:**
28+
29+
```js fitted label=index.js
30+
import 'semantic-ui-css/semantic.min.css'
31+
```
2232

2333
<Message info size='tiny' attached='bottom'>
2434
<Icon name='idea' />
2535
Themes from Semantic UI >=2.3.x require Semantic UI React >=0.81.0.
2636
</Message>
2737

28-
If you are using TypeScript, you don't need to install anything; typings are included with the package.
29-
30-
### Theme
31-
32-
Choose a theme and delivery method that suits your needs:
33-
34-
<Tab
35-
menu={{ attached: 'top', secondary: true, pointing: true, color: 'teal' }}
36-
panes={[
37-
{
38-
menuItem: 'Default theme (CDN)',
39-
render: () => (
40-
<Tab.Pane style={{ fontSize: 'inherit' }}>
41-
<p>
42-
This is the quickest way to get started, just add this link to the{' '}
43-
<code>{'<head>'}</code> of your <code>index.html</code> file.
44-
</p>
45-
<CodeSnippet
46-
fitted
47-
label={false}
48-
mode='html'
49-
value={`
50-
<link
51-
rel="stylesheet"
52-
href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css"
53-
/>
54-
`}
55-
/>
56-
</Tab.Pane>
57-
),
58-
},
59-
{
60-
menuItem: 'Default theme (NPM)',
61-
render: () => (
62-
<Tab.Pane style={{ fontSize: 'inherit' }}>
63-
<p>
64-
The <a href={semanticUICSSRepoURL}>Semantic UI CSS package</a> is automatically synced
65-
with the main Semantic UI repository to provide a lightweight CSS only version of
66-
Semantic UI.
67-
</p>
68-
<CodeSnippet mode='bash' value={'yarn add semantic-ui-css'} />
69-
<p>After install, import the minified CSS file in your app's entry file:</p>
70-
<CodeSnippet fitted label='index.js' value="import 'semantic-ui-css/semantic.min.css'" />
71-
</Tab.Pane>
72-
),
73-
},
74-
{
75-
menuItem: 'Custom theme (NPM)',
76-
render: () => (
77-
<Tab.Pane style={{ fontSize: 'inherit' }}>
78-
Detailed documentation on Semantic UI theming is provided in our{' '}
79-
<Link to='/theming'>Theming guide</Link>.
80-
</Tab.Pane>
81-
),
82-
},
83-
]}
38+
<p>
39+
The <a href={semanticUICSSRepoURL}>Semantic UI CSS package</a> is automatically synced with the
40+
main Semantic UI repository to provide a lightweight CSS only version of Semantic UI.
41+
</p>
42+
43+
If you are using TypeScript, you don't need to install anything, typings are included with the package.
44+
45+
### Option 2: CDN (no bundler)
46+
47+
This is the quickest way to get started, just add this link and script tag to the `<head>` of your `index.html` file.
48+
49+
```html fitted label=index.html
50+
<link
51+
async
52+
rel="stylesheet"
53+
href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css"
8454
/>
55+
<script
56+
async
57+
src="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.js"
58+
></script>
59+
```
60+
61+
## Custom themes
8562

86-
<Divider hidden section />
63+
Detailed documentation on Semantic UI theming is provided in our [Theming guide](/theming).
8764

88-
## Bundling
65+
## Supported Bundling Options
8966

9067
Semantic UI React is fully supported by all modern JavaScript bundlers.
9168

@@ -95,16 +72,11 @@ Semantic UI React is fully compatible with `create-react-app` and works out the
9572

9673
### Webpack 4
9774

98-
Semantic UI React is fully supported by Webpack 4, including tree shaking as of `semantic-ui-react@0.81.2`.
99-
100-
Please ensure that you build your app in production mode before release. Semantic UI React includes several optimizations in production mode, such as stripping `propTypes` from your build.
101-
102-
<Divider hidden section />
75+
Semantic UI React is fully supported by Webpack 4. Please ensure that you build your app in [production mode](https://webpack.js.org/guides/production/) before release. Semantic UI React includes several optimizations in production mode, such as stripping `propTypes` from your build.
10376

10477
## Examples
10578

106-
For examples on how to import and use Semantic UI React components, click the code icon
107-
(<Icon name="code" />) next to any example. Here are a few direct links:
79+
For examples on how to import and use Semantic UI React components, click the code icon (<Icon name="code" />) next to any example. Here are a few direct links:
10880

10981
- [Button](/elements/button#button-example-button)
11082
- [List](/elements/list#list-example-list)

0 commit comments

Comments
 (0)