UNPKG

fomantic-ui/README.md

Version:

7.45 kBMarkdownView Raw

1![Fomantic Logo](https://fomantic-ui.com/images/logo.png#128)
2
3# Fomantic-UI
4The official community fork of the popular Semantic-UI framework.
5
6[![GitHub Actions Status](https://github.com/fomantic/Fomantic-UI/workflows/CI/badge.svg)](https://github.com/fomantic/Fomantic-UI/actions)
7[![last commit (develop)](https://img.shields.io/github/last-commit/fomantic/Fomantic-UI/develop.svg?label=last%20commit%20%28develop%29)](https://github.com/fomantic/Fomantic-UI/commits/develop)
8[![License](https://img.shields.io/github/license/fomantic/Fomantic-UI?color=%233fb911)](https://github.com/fomantic/Fomantic-UI/blob/1fd94d2479f297c906bed557f0567d1d3f0a4d2c/LICENSE.md)
9
10[![Discord Server](https://discordapp.com/api/guilds/453127116427493376/widget.png?style=shield)](https://discord.gg/YChxjJ3)
11[![Follow on Twitter](https://img.shields.io/twitter/follow/fomanticui?style=social)](https://twitter.com/fomanticui)
12
13[![npm downloads](https://img.shields.io/npm/dm/fomantic-ui.svg?label=npm%20downloads)](https://www.npmjs.com/package/fomantic-ui)
14[![npm version](https://img.shields.io/npm/v/fomantic-ui)](https://www.npmjs.com/package/fomantic-ui)
15
16[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/fomantic-ui/badge?style=rounded)](https://www.jsdelivr.com/package/npm/fomantic-ui)
17[![CDNJS](https://img.shields.io/cdnjs/v/fomantic-ui?color=e95420)](https://cdnjs.com/libraries/fomantic-ui)
18
19[![CI](https://github.com/fomantic/Fomantic-UI/actions/workflows/ci.yml/badge.svg?branch=develop)](https://github.com/fomantic/Fomantic-UI/actions/workflows/ci.yml)
20[![Nightly Build](https://github.com/fomantic/Fomantic-UI/actions/workflows/nightly.yml/badge.svg?branch=develop)](https://github.com/fomantic/Fomantic-UI/actions/workflows/nightly.yml)
21
22[![Package Quality](https://npm.packagequality.com/shield/fomantic-ui.svg?label=package%20quality)](https://packagequality.com/#?package=fomantic-ui)
23[![GitHub contributors](https://img.shields.io/github/contributors/fomantic/Fomantic-UI)](https://github.com/fomantic/Fomantic-UI/graphs/contributors)
24[![Dependabot Status](https://badgen.net/github/dependabot/fomantic/Fomantic-UI/?icon=dependabot)](https://github.com/features/security)
25[![Known Build Dependency Vulnerabilities](https://snyk.io/test/github/fomantic/Fomantic-UI/badge.svg?targetFile=package.json)](https://snyk.io/test/github/fomantic/Fomantic-UI?targetFile=package.json)
26[![OpenSSF Best Practices](https://bestpractices.coreinfrastructure.org/projects/7496/badge)](https://bestpractices.coreinfrastructure.org/projects/7496)
27
28---
29
30> *NOTE:* Fomantic was created to continue active development of Semantic-UI and has the intent to be merged back into the master repository once active development can restart. For more info please read the following issues https://github.com/Semantic-Org/Semantic-UI/issues/6109 https://github.com/Semantic-Org/Semantic-UI/issues/6413
31>
32> *EDIT:* Lots has changed since we started this project and we are now starting the development of FUI v3. You can read more about the v3 proposals [here](https://github.com/fomantic/Fomantic-UI/issues/319).
33>
34> To be clear merging back into SUI is still our intention, read [this comment](https://github.com/fomantic/Fomantic-UI/issues/319#issuecomment-461736399) for more info
35
36---
37
38Fomantic allows developers to build beautiful websites fast, with **concise HTML**, **intuitive javascript**, and **simplified debugging**, helping make front-end development a delightful experience. Fomantic is responsively designed allowing your website to scale on multiple devices.
39
40## 📡 Installation
41
42```bash
43$ npm install fomantic-ui
44```
45
46Living on the edge? Try our nightly build and test new features and bug fixes early!
47```bash
48$ npm install fomantic-ui@nightly
49```
50
51Fomantic includes an interactive installer to help setup your project.
52
53* For more details on setup visit our [getting started guide](https://fomantic-ui.com/introduction/getting-started.html).
54* To learn more about theming please read our [theming guide](https://fomantic-ui.com/usage/theming.html)
55
56### 💻 Browser Support
57
58* Last 2 Versions of Firefox, Chrome, Safari Mac, Edge
59* Last 4 Versions of Android, Chrome for Android, iOS Safari[^1]
60* IE 11[^2]
61* Microsoft Edge 12-44[^2]
62
63[^1]: Fomantic-UI should basically still work in iOS Safari 9+, Android 6+, but, starting from v2.9.0, we won't support them anymore if anything works different than in recent versions.
64[^2]: Fomantic-UI should basically still work in IE11 / old Edge, but, starting from v2.9.0, we won't support them anymore in terms of dedicated bugfixes.
65
66---
67
68## 📦 Other packages
69
70| Environment | Install Command                       | Repository                                                       | Third-Party |
71|-------------|---------------------------------------|------------------------------------------------------------------|-------------|
72| CSS Only    | `npm install fomantic-ui-css`  | [Fomantic-UI-CSS](https://github.com/fomantic/Fomantic-UI-CSS)          |             |
73| LESS        | `npm install fomantic-ui-less` | [Fomantic-UI-LESS](https://github.com/fomantic/Fomantic-UI-LESS)        |             |
74| SASS        | `gem 'fomantic-ui-sass'`              | [Fomantic-UI-SASS](https://github.com/fomantic/Fomantic-UI-SASS) | ✅          |
75
76---
77
78## 💬 Community
79
80### 💡 Getting Help
81
82If you're looking for help with an issue we offer multiple ways for you to get support. You can post usage questions here on GitHub
83or you can ask in our community [Discord](https://discord.gg/YChxjJ3) server.
84
85### 🐛 Submitting Bugs and Enhancements
86[GitHub Issues](https://github.com/fomantic/Fomantic-UI/issues) is for suggesting enhancements and reporting bugs. Before submitting a bug make sure you do the following:
87* Check to see if the issue has already been raised.
88* [Fork this boilerplate JSFiddle](https://jsfiddle.net/31d6y7mn) to create a reproducible example of the bug. If a bug is apparent in the docs you can simply link to the docs example, just make it clear exactly how to reproduce the issue. Only bugs that include a test case can be triaged.
89* If submitting an enhancement try and create it in the [JSFiddle](https://jsfiddle.net/31d6y7mn) if not it's fine but explain clearly what you want.
90
91### 📝 Pull Requests
92
93Before creating a pull request be sure to read the [Contributing Guide](CONTRIBUTING.md) and our [Code of Conduct](CODE_OF_CONDUCT.md), this is where we explain everything you need to know about contributing to Fomantic.
94
95## Sponsors
96
97### Infrastructure hosted and powered by [DigitalOcean](https://www.digitalocean.com/?utm_medium=opensource&utm_source=fomantic)
98[![DigitalOcean](https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PNG/DO_Logo_Horizontal_Blue.png)](https://www.digitalocean.com/?utm_medium=opensource&utm_source=fomantic)
99
100Sign up now and get $100 in credit for 60 days! [Sign up here!](https://m.do.co/c/bece3e1afb7f)
101
102
103### Cross-browser testing provided by [BrowserStack](https://www.browserstack.com)
104[![BrowserStack](https://cdn.rawgit.com/fomantic/Fomantic-UI-Docs/35180e95/server/raw/images/browserstack.png)](https://www.browserstack.com)
105
106
107### IDE's provided by [JetBrains](https://www.jetbrains.com?from=Fomantic-UI)
108[![JetBrains](https://fomantic-ui.com/images/jetbrains.svg)](https://www.jetbrains.com?from=Fomantic-UI)
109
110---
111
112#### Credit
113Semantic-UI was beautifully crafted by [@jlukic](https://github.com/jlukic)

1	`![Fomantic Logo](https://fomantic-ui.com/images/logo.png#128)`
2
3	`# Fomantic-UI`
4	`The official community fork of the popular Semantic-UI framework.`
5
6	`[![GitHub Actions Status](https://github.com/fomantic/Fomantic-UI/workflows/CI/badge.svg)](https://github.com/fomantic/Fomantic-UI/actions)`
7	`[![last commit (develop)](https://img.shields.io/github/last-commit/fomantic/Fomantic-UI/develop.svg?label=last%20commit%20%28develop%29)](https://github.com/fomantic/Fomantic-UI/commits/develop)`
8	`[![License](https://img.shields.io/github/license/fomantic/Fomantic-UI?color=%233fb911)](https://github.com/fomantic/Fomantic-UI/blob/1fd94d2479f297c906bed557f0567d1d3f0a4d2c/LICENSE.md)`
9
10	`[![Discord Server](https://discordapp.com/api/guilds/453127116427493376/widget.png?style=shield)](https://discord.gg/YChxjJ3)`
11	`[![Follow on Twitter](https://img.shields.io/twitter/follow/fomanticui?style=social)](https://twitter.com/fomanticui)`
12
13	`[![npm downloads](https://img.shields.io/npm/dm/fomantic-ui.svg?label=npm%20downloads)](https://www.npmjs.com/package/fomantic-ui)`
14	`[![npm version](https://img.shields.io/npm/v/fomantic-ui)](https://www.npmjs.com/package/fomantic-ui)`
15
16	`[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/fomantic-ui/badge?style=rounded)](https://www.jsdelivr.com/package/npm/fomantic-ui)`
17	`[![CDNJS](https://img.shields.io/cdnjs/v/fomantic-ui?color=e95420)](https://cdnjs.com/libraries/fomantic-ui)`
18
19	`[![CI](https://github.com/fomantic/Fomantic-UI/actions/workflows/ci.yml/badge.svg?branch=develop)](https://github.com/fomantic/Fomantic-UI/actions/workflows/ci.yml)`
20	`[![Nightly Build](https://github.com/fomantic/Fomantic-UI/actions/workflows/nightly.yml/badge.svg?branch=develop)](https://github.com/fomantic/Fomantic-UI/actions/workflows/nightly.yml)`
21
22	`[![Package Quality](https://npm.packagequality.com/shield/fomantic-ui.svg?label=package%20quality)](https://packagequality.com/#?package=fomantic-ui)`
23	`[![GitHub contributors](https://img.shields.io/github/contributors/fomantic/Fomantic-UI)](https://github.com/fomantic/Fomantic-UI/graphs/contributors)`
24	`[![Dependabot Status](https://badgen.net/github/dependabot/fomantic/Fomantic-UI/?icon=dependabot)](https://github.com/features/security)`
25	`[![Known Build Dependency Vulnerabilities](https://snyk.io/test/github/fomantic/Fomantic-UI/badge.svg?targetFile=package.json)](https://snyk.io/test/github/fomantic/Fomantic-UI?targetFile=package.json)`
26	`[![OpenSSF Best Practices](https://bestpractices.coreinfrastructure.org/projects/7496/badge)](https://bestpractices.coreinfrastructure.org/projects/7496)`
27
28	`---`
29
30	`> NOTE: Fomantic was created to continue active development of Semantic-UI and has the intent to be merged back into the master repository once active development can restart. For more info please read the following issues https://github.com/Semantic-Org/Semantic-UI/issues/6109 https://github.com/Semantic-Org/Semantic-UI/issues/6413`
31	`>`
32	`> EDIT: Lots has changed since we started this project and we are now starting the development of FUI v3. You can read more about the v3 proposals [here](https://github.com/fomantic/Fomantic-UI/issues/319).`
33	`>`
34	`> To be clear merging back into SUI is still our intention, read [this comment](https://github.com/fomantic/Fomantic-UI/issues/319#issuecomment-461736399) for more info`
35
36	`---`
37
38	`Fomantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Fomantic is responsively designed allowing your website to scale on multiple devices.`
39
40	`## 📡 Installation`
41
42	```bash
43	`$ npm install fomantic-ui`
44	```
45
46	`Living on the edge? Try our nightly build and test new features and bug fixes early!`
47	```bash
48	`$ npm install fomantic-ui@nightly`
49	```
50
51	`Fomantic includes an interactive installer to help setup your project.`
52
53	`* For more details on setup visit our [getting started guide](https://fomantic-ui.com/introduction/getting-started.html).`
54	`* To learn more about theming please read our [theming guide](https://fomantic-ui.com/usage/theming.html)`
55
56	`### 💻 Browser Support`
57
58	`* Last 2 Versions of Firefox, Chrome, Safari Mac, Edge`
59	`* Last 4 Versions of Android, Chrome for Android, iOS Safari[^1]`
60	`* IE 11[^2]`
61	`* Microsoft Edge 12-44[^2]`
62
63	`[^1]: Fomantic-UI should basically still work in iOS Safari 9+, Android 6+, but, starting from v2.9.0, we won't support them anymore if anything works different than in recent versions.`
64	`[^2]: Fomantic-UI should basically still work in IE11 / old Edge, but, starting from v2.9.0, we won't support them anymore in terms of dedicated bugfixes.`
65
66	`---`
67
68	`## 📦 Other packages`
69
70	`\| Environment \| Install Command \| Repository \| Third-Party \|`
71	`\|-------------\|---------------------------------------\|------------------------------------------------------------------\|-------------\|`
72	\| CSS Only \| `npm install fomantic-ui-css` \| [Fomantic-UI-CSS](https://github.com/fomantic/Fomantic-UI-CSS) \| \|
73	\| LESS \| `npm install fomantic-ui-less` \| [Fomantic-UI-LESS](https://github.com/fomantic/Fomantic-UI-LESS) \| \|
74	\| SASS \| `gem 'fomantic-ui-sass'` \| [Fomantic-UI-SASS](https://github.com/fomantic/Fomantic-UI-SASS) \| ✅ \|
75
76	`---`
77
78	`## 💬 Community`
79
80	`### 💡 Getting Help`
81
82	`If you're looking for help with an issue we offer multiple ways for you to get support. You can post usage questions here on GitHub`
83	`or you can ask in our community [Discord](https://discord.gg/YChxjJ3) server.`
84
85	`### 🐛 Submitting Bugs and Enhancements`
86	`[GitHub Issues](https://github.com/fomantic/Fomantic-UI/issues) is for suggesting enhancements and reporting bugs. Before submitting a bug make sure you do the following:`
87	`* Check to see if the issue has already been raised.`
88	`* [Fork this boilerplate JSFiddle](https://jsfiddle.net/31d6y7mn) to create a reproducible example of the bug. If a bug is apparent in the docs you can simply link to the docs example, just make it clear exactly how to reproduce the issue. Only bugs that include a test case can be triaged.`
89	`* If submitting an enhancement try and create it in the [JSFiddle](https://jsfiddle.net/31d6y7mn) if not it's fine but explain clearly what you want.`
90
91	`### 📝 Pull Requests`
92
93	`Before creating a pull request be sure to read the [Contributing Guide](CONTRIBUTING.md) and our [Code of Conduct](CODE_OF_CONDUCT.md), this is where we explain everything you need to know about contributing to Fomantic.`
94
95	`## Sponsors`
96
97	`### Infrastructure hosted and powered by [DigitalOcean](https://www.digitalocean.com/?utm_medium=opensource&utm_source=fomantic)`
98	`[![DigitalOcean](https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PNG/DO_Logo_Horizontal_Blue.png)](https://www.digitalocean.com/?utm_medium=opensource&utm_source=fomantic)`
99
100	`Sign up now and get $100 in credit for 60 days! [Sign up here!](https://m.do.co/c/bece3e1afb7f)`
101
102
103	`### Cross-browser testing provided by [BrowserStack](https://www.browserstack.com)`
104	`[![BrowserStack](https://cdn.rawgit.com/fomantic/Fomantic-UI-Docs/35180e95/server/raw/images/browserstack.png)](https://www.browserstack.com)`
105
106
107	`### IDE's provided by [JetBrains](https://www.jetbrains.com?from=Fomantic-UI)`
108	`[![JetBrains](https://fomantic-ui.com/images/jetbrains.svg)](https://www.jetbrains.com?from=Fomantic-UI)`
109
110	`---`
111
112	`#### Credit`
113	`Semantic-UI was beautifully crafted by [@jlukic](https://github.com/jlukic)`