-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs(readme): add FAQ #1480
docs(readme): add FAQ #1480
Changes from all commits
9663e07
dffb775
93f43b1
2aaf6b3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -40,19 +40,33 @@ Hey, we're in development. Prior to reaching [v1.0.0][6]: | |
|
||
See the [Documentation][2] for an introduction, usage information, and extensive examples. | ||
|
||
## [Documentation][2] :blue_book: | ||
## Example Projects | ||
|
||
This is a listing of example projects and guides that will help you integrate Semantic UI React into your new or existing projects. | ||
|
||
## Examples & Tutorials | ||
### [semantic-ui-react-todos][100] | ||
This example modifies the well-known [react-redux Todo List][101] to use Semantic UI components. There is also a write-up on the process in the project README. | ||
|
||
This is a listing of example projects and guides that will help you integrate Semantic-UI-React into your new or existing projects. | ||
## FAQ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Added FAQ section. |
||
|
||
- [semantic-ui-react-todos](https://github.com/wyc/semantic-ui-react-todos): This example modifies the well-known [react-redux Todo List](https://github.com/reactjs/redux/tree/master/examples/todos) to use Semantic UI components. There is also a write-up on the process in the project README. | ||
### Can I use custom Icons? | ||
Yes. Just use `<Icon className='my-icon' />` instead of `<Icon name='my-icon' />`. See https://github.com/Semantic-Org/Semantic-UI-React/issues/931#issuecomment-263643210 for detailed info and examples. | ||
|
||
### How do I setup CSS? | ||
There are several options. Refer to our doc on [CSS Usage][23]. | ||
|
||
## Built With Semantic-UI-React | ||
### Can I use a customize CSS theme? | ||
Yes. Semantic UI React includes components that render valid Semantic UI HTML, no CSS is included. This allows you to load any Semantic UI CSS theme on top of your Semantic UI React app. | ||
|
||
These great products are built on Semantic-UI-React. Add yours [here][22]. | ||
Here are some helpful links: | ||
|
||
- [Building CSS with Webpack][24] | ||
- [Building CSS with Meteor][26] | ||
- [Creating a standalone theme][25] | ||
|
||
## Built With Semantic UI React | ||
|
||
These great products are built on Semantic UI React. Add yours [here][22]. | ||
|
||
- http://stoplight.io | ||
- https://roadmap.space | ||
|
@@ -61,11 +75,11 @@ These great products are built on Semantic-UI-React. Add yours [here][22]. | |
- http://www.brewhousesolutions.com | ||
- https://www.lifebot.fr | ||
|
||
## Voice Your Opinion :speech_balloon: | ||
## Voice Your Opinion | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Some headers had emoji and others did not. Standardized README headers to not have any emoji. |
||
|
||
Help shape this library by weighing in on our [RFC (request for comments)][19] issues. | ||
|
||
## How Can I Help? :hand: | ||
## How Can I Help? | ||
|
||
Our [CONTRIBUTING.md][1] is a step-by-step setup and development guide. It is meant to be read from top to bottom. Once you're up to speed, each issue here includes more information on how you can help: | ||
|
||
|
@@ -115,7 +129,7 @@ Once you change the flag, you need to refresh your browser to see the changes in | |
|
||
## Our Principles | ||
|
||
[TechnologyAdvice][9] has been [dogfooding][10] Semantic-UI-React in production since fall of 2015. These are the guiding principles that have developed as a result: | ||
[TechnologyAdvice][9] has been [dogfooding][10] Semantic UI React in production since fall of 2015. These are the guiding principles that have developed as a result: | ||
|
||
- No jQuery dependency | ||
- No animation dependencies | ||
|
@@ -183,3 +197,10 @@ Big thanks to our [contributors][20], especially: | |
[20]: https://github.com/Semantic-Org/Semantic-UI-React/graphs/contributors | ||
[21]: https://github.com/Semantic-Org/Semantic-UI-React/labels/good%20first%20contribution | ||
[22]: https://github.com/Semantic-Org/Semantic-UI-React/edit/master/README.md | ||
[23]: http://react.semantic-ui.com/usage#css | ||
[24]: https://github.com/Semantic-Org/Semantic-UI-React/issues/802#issuecomment-258990274 | ||
[25]: http://learnsemantic.com/themes/creating.html | ||
[26]: https://github.com/Semantic-Org/Semantic-UI-Meteor | ||
<!-- Examples --> | ||
[100]: https://github.com/wyc/semantic-ui-react-todos | ||
[101]: https://github.com/reactjs/redux/tree/master/examples/todos |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,7 +3,7 @@ import { Card } from 'semantic-ui-react' | |
|
||
const CardExampleLinkCard = () => ( | ||
<Card | ||
href='#link' | ||
href='#card-example-link-card' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed link to example to use new anchor links (name of examle file). |
||
header='Elliot Baker' | ||
meta='Friend' | ||
description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.' | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
import React from 'react' | ||
import pkg from 'package.json' | ||
import { NavLink } from 'react-router-dom' | ||
import { | ||
Container, | ||
Header, | ||
|
@@ -15,7 +16,7 @@ const Usage = () => ( | |
<Segment basic textAlign='center'> | ||
<Logo centered size='small' /> | ||
<Header as='h1' textAlign='center'> | ||
Semantic-UI-React | ||
Semantic UI React | ||
<Header.Subheader> | ||
{pkg.description} | ||
</Header.Subheader> | ||
|
@@ -41,22 +42,22 @@ const Usage = () => ( | |
</p> | ||
<Header as='h3'>Examples</Header> | ||
<p> | ||
For examples on how to import and use Semantic UI React components, | ||
click the code icon next to any example. Here are a few direct links: | ||
For examples on how to import and use Semantic UI React components, | ||
click the code icon next to any example. Here are a few direct links: | ||
</p> | ||
<ul> | ||
<li> | ||
<a href='http://react.semantic-ui.com/elements/button#button'>Button</a> | ||
</li> | ||
<li> | ||
<a href='http://react.semantic-ui.com/elements/list#list'>List</a> | ||
</li> | ||
<li> | ||
<a href='http://react.semantic-ui.com/views/card#card'>Card</a> | ||
</li> | ||
<li> | ||
<a href='http://react.semantic-ui.com/modules/modal#modal'>Modal</a> | ||
</li> | ||
<li> | ||
<NavLink to='/elements/button#button-example-button'>Button</NavLink> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These were |
||
</li> | ||
<li> | ||
<NavLink to='/elements/list#list-example-list'>List</NavLink> | ||
</li> | ||
<li> | ||
<NavLink to='/views/card#card-example-card'>Card</NavLink> | ||
</li> | ||
<li> | ||
<NavLink to='/modules/modal#modal-example-modal'>Modal</NavLink> | ||
</li> | ||
</ul> | ||
</Segment> | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Standardized library name without hyphens.