You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

116 lines
5.5 KiB

10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
10 years ago
  1. ![Semantic](http://www.semantic-ui.com/images/logo.png)
  2. # Semantic UI
  3. Semantic is a highly-themable UI framework with intuitive naming conventions built around common usage.
  4. Key Features
  5. * 50+ UI Elements
  6. * 3000 + CSS Variables
  7. * 3 Levels of Variable Inheritance (Similar to SublimeText)
  8. * Built using EM values for responsive design
  9. > Semantic UI is now at 1.0, be sure to check out our [release notes](https://github.com/Semantic-Org/Semantic-UI/blob/master/RELEASE-NOTES.md#version-100---november-24-2014) for changes from the pre-release.
  10. ## International
  11. * **Chinese** A Chinese mirror site is available at [http://www.semantic-ui.cn](http:/www.semantic-ui.cn)
  12. * **Right-to-Left (RTL)** - An RTL version can be created using our build tools by selecting `rtl` from the install script
  13. * **Translation** - To help translate see the [Wiki Guide](https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs) for translations
  14. ## Release Schedule
  15. Semantic follows a weekly schedule for feature updates. To see what changes are scheduled for upcoming releases, be sure to visit the [release milestone](https://github.com/Semantic-Org/Semantic-UI/milestones) page.
  16. ## Community Support
  17. * **Want to learn about Semantic?** [Request an Invite](https://docs.google.com/forms/d/1hI1z136sXLkTQKtsv8SIvjjAvzpH77YzMQKrU-P8GAc/viewform?usp=send_form) to join [our Slack chatroom](http://semanticui.slack.com) for support and project discussions
  18. * **Have a bug?** Make a test case by forking this [jsfiddle](http://jsfiddle.net/efp8z6Ln/), then submit a [bug on GitHub](https://github.com/Semantic-Org/Semantic-UI/issues)
  19. * **Having issues with your code?** Submit a question on [StackOverflow](http://www.stackoverflow.com) or ask our [Google Group](https://groups.google.com/forum/#!forum/semantic-ui)
  20. * **Looking for a specific integration like Dart, Wordpress, Angular, or Rails?** Check out our [integration page](https://github.com/Semantic-Org/Semantic-UI/wiki/Integration)
  21. ## Contributing
  22. * **Missing documentation in your language?** Help us make Semantic available in more languages by [joining our translation community](https://www.transifex.com/organization/semantic-org/)
  23. * **Want to help with integration?** Projects are organizing for official [Meteor](https://github.com/Semantic-Org/Semantic-UI-Meteor), and [Angular](https://github.com/Semantic-Org/Semantic-UI-Angular) integrations as well as a [Sass](https://github.com/Semantic-Org/Semantic-UI-SASS) port. Join the discussion on their respective boards.
  24. * **Want to help others learn concepts behind Semantic?** [Learnsemantic.com](http://www.learnsemantic.com) needs articles to help others get others up to speed with Semantic UI. [Send me an e-mail](mailto:jack@semantic-ui.com) if you are interested.
  25. ## Getting Started
  26. ### Basic Usage (Default Theme)
  27. We recommend setting up the Semantic build workflow to support on-the-fly
  28. theming and customization, but it is not required.
  29. To use the "ready-to-use" distribution version, which includes all components, simply link to
  30. `dist/semantic.js` and `dist/semantic.css` (or their minified counterparts) in your page.
  31. ``` html
  32. <link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">
  33. <script src="/dist/semantic.min.js"></script>
  34. ```
  35. You may also prefer to use individual components found in `dist/components` to reduce the libraries file size.
  36. ``` html
  37. <link rel="stylesheet" type="text/css" href="/dist/components/icon.css">
  38. ```
  39. ### Recommended Usage (Themed)
  40. Semantic is best used actively during development. We have included build tools for updating your site's theme as you work.
  41. ![Getting Started](https://dl.dropboxusercontent.com/u/2657007/install.gif)
  42. ```
  43. npm install
  44. gulp
  45. ```
  46. Running gulp for the first time will start the interactive set-up.
  47. This helps you create two important files ``semantic.json`` which stores your folder set-up, and ``themes.config`` a central file for setting ui themes.
  48. The install utility will also help you set-up which components you want to include in your packaged release, ignoring parts of Semantic you may not use.
  49. Once set-up you can use these commands to maintain your project
  50. ```nodejs
  51. gulp // defaults to watch after install
  52. gulp build // build all files from source
  53. gulp clean // clears your dist folder
  54. gulp watch // watch files
  55. gulp install // re-runs install
  56. gulp help // list all commands
  57. ```
  58. For more detail into how work with Semantic when building a site please [read out customization guide](http://learnsemantic.com/developing/customizing.html) on [LearnSemantic.com](http://learnsemantic.com/)
  59. ## Meteor
  60. To use Semantic with the [Meteor.js](https://www.meteor.com) framework, run
  61. $ meteor add semantic:ui
  62. Learn more by reading the [Meteor integration README](https://github.com/Semantic-Org/Semantic-UI/blob/master/meteor/README.md).
  63. ## Browser Support
  64. * Last 2 Versions FF, Chrome, IE (aka 10+)
  65. * Safari 6
  66. * IE 9+ (Browser prefix only)
  67. * Android 4
  68. * Blackberry 10
  69. ## Pull Requests
  70. When adding pull requests be sure to merge into [next](https://github.com/Semantic-Org/Semantic-UI/tree/next) branch. If you need to demonstrate a fix in ``next`` release, you can use [this jsfiddle](http://jsfiddle.net/rduvhn8u/1/)
  71. ## Reaching Out
  72. If you'd like to start a conversation about Semantic feel free to reach out by e-mail [jack@semantic-ui.com](mailto:jack@semantic-ui.com)
  73. [![Flattr This](https://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=jlukic&url=https%3A%2F%2Fgithub.com%2Fjlukic%2FSemantic-UI)