fomantic / fomantic-ui-docs

Official Documentation for Fomantic-UI

Fomantic Docs

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 Semantic-Org/Semantic-UI#6109 Semantic-Org/Semantic-UI#6413

This folder contains the templates used to generate the static website for fomantic-ui.com.

This repo can be used to create a fork of the UI documents to serve as styleguide for your project.

Installing Dependencies

You must install DocPad, the static site generator used to create the HTML for the site, to render the contents of this repository.

npm install -g [email protected]
docpad install;

Then finally to start the server

docpad run

Generating Fomantic UI for Docs

Assuming two sibling folders:

1. UI folder ./ui
2. Docs folder ./docs

Directory structure should look like this:

fomantic/
├── ui/
│   ├── node_modules/
|   ├── ...
├── docs/
│   ├── node_modules/
|   ├── ...

• Clone both repos to respective folders
• npm install in ./ui
• npm install in ./docs
• Go through Fomantic UI installer steps (auto)
• In ./ui folder gulp build-docs (builds files to ./docs)
• In ./docs folder docpad install then docpad run
• Go to http://localhost:9778/ docs should be there
• Optionally run gulp serve-docs in ./ui to serve any changes from ./ui/src to ./docs

Running the Server

Start the docs server (and generate docs):

# run from inside docs folder that will now contain the compiled docs
# windows users can then navigate to http://localhost:9778
docpad run

Watch for changes from your UI folder, and serve to the docs instance:

gulp serve-docs

Publishing to GitHub Pages

You can publish your docs to GitHub Pages from the command line automatically

docpad deploy-ghpages --env static

Help Fix Typos and Errors

If you find any typos or mistakes, submitting a fix is easy!

• Open the documents/ folder on GitHub
• Click the “Edit” button on the appropriate page
• Click to submit a pull request

fomantic-ui-docs's Issues

interpretLabel setting of slider is not documented

[fomantic-ui.com] Better searching on the fomantic-ui.com website on the icons page

Go to this link: https://fomantic-ui.com/elements/icon.html

With the browsers search feature, try searching for "folder". It shows 0 hits.

Go to the semantic version: https://semantic-ui.com/elements/icon.html

With the browsers search feature, try searching for "folder". It shows 26 hits.

I see the "Search icons ..." text box but I don't want to use that. It would be nice to be able to use the browser search and then see what other icons are related to my search. Thanks.

Stars not shown in Popup example

https://fomantic-ui.com/modules/popup.html#html

• Firefox 71.0

[website] Category search example not working

Not sure if it belongs in this repo, but the category search examples are not working:

• https://fomantic-ui.com/modules/search.html#category
• https://fomantic-ui.com/modules/search.html#horizontal-category

Local Category Search works

getting started - link and script have incorrect paths

It seems like the following link has an incorrect href and the script has an incorrect src:

<link rel="stylesheet" type="text/css" href="/semantic/dist/semantic.min.css" />
<script src="/semantic/dist/semantic.min.js"></script>

You can see the errors in the console too:

semantic.min.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
semantic.min.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

Removing the leading "/" works for me and the styles are included as expected. im working on a PR for this to update the code snippet on this page: https://fomantic-ui.com/introduction/getting-started.html

:)

fixed:

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css" />
<script src="semantic/dist/semantic.min.js"></script>

Steps to reproduce:

• create a new directory to test - mkdir fui-test/
• change into new directory - cd fui-test/
• initialize package.json - npm init (enter, enter, enter)
• install fomantic-ui (use automatic, default settings) - npm install fomantic-ui
• build fomantic-ui - cd semantic && npx gulp build
• create a sample html file - touch index.html

index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- You MUST include jQuery before Fomantic -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/semantic/dist/semantic.min.css">
    <script src="/semantic/dist/semantic.min.js"></script>
  </head>
  <body>
    <form class="ui form">
      <div class="field">
        <label>First Name</label>
        <input type="text" name="first-name" placeholder="First Name" />
      </div>
      <div class="field">
        <label>Last Name</label>
        <input type="text" name="last-name" placeholder="Last Name" />
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" tabindex="0" class="hidden" />
          <label>I agree to the Terms and Conditions</label>
        </div>
      </div>
      <button class="ui button" type="submit">Submit</button>
    </form>
  </body>
</html>

• open index.html in the browser and you should see the errors in the console

here's a sample branch i setup to view this: https://github.com/hkennyv/Fomantic-UI-Docs/tree/issue-sample/fuitest

Some images on docs are not secure (not using https)

One example is http://oi66.tinypic.com/2zr2ckk.jpg on
https://fomantic-ui.com/introduction/new.html#arrow-aligment-on-small-popups

Browsers give warnings in the URL bar.
I am afraid that users see fomantic-ui.com as an insecure site.

According to MDN and Google Developers, such insecure images are not severe issue.
However, attacker may replace insecure images with offensive ones or something like that, so it may injure a reputation of Fomantic.

I think it is good to find free-for-usage & secure (https) image hosting and switch over.

Place Algolia search widget into all docs pages as well

Description

The new Algolia search widget is only available on the frontpage. It should be available on all docs pages. (also on mobile view)

Search not relevant on icon page

Hi,
It's seem that the search box on icon page is not relevant anymore.

eg : "user" return a lot of icon except icon user based. | "chart" same thing

Is that normal ?

Best regards,
Alexander

[Form] Document className.label

className.label is added in fomantic/Fomantic-UI#866

[Chore] Implement flems.io for live examples

Description

we should implement an integrated fiddle/live playground feature for examples within the docs

As @prudho suggested https://flems.io/ seems to a very good and easy to use candidate

How to exclude components on custom build is unclear

To reduce the size of semantic(.min).css and build time, I would like to remove some unused components from my custom builds.

I browsed the below documents, but those do not mention cleary how to exclude components.
Are there any documents regarding about how to exclude components on custom build?
https://fomantic-ui.com/introduction/build-tools.html
https://fomantic-ui.com/usage/theming.html

I tried below attempts, which failed.

1. Add components which contains only used components in semantic.json then guil build (failed !!)
2. Comment out components in theme.config something like //@ad : 'default'; then gulp build (failed !!)

I think adding a dedicated section for component exclusion is helpful.

Improve html/head title

please append Docs to the html title, currently, docs pages are not hinted when something like "fomantic docs" is typed in the browser address bar

example: https://fomantic-ui.com/elements/container.html

actual html title: Container | Fomantic-UI

expected html title: Container | Fomantic-UI Docs

Enable SRI on CDN docs

Hi,

This is part feature request, part security. Subresource Integrity is encouraged on CDN files. On Getting Started, three CDNs are linked, but none of them use SRI to mitigate against the issue of CDN's delivering malware through modified JavaScript. This has happened before with a number of projects, such as jQuery.

[Visibility] ScrollSpy-like Functionality

Don't suppose the below SUI Docs item could be implemented to the FUI Docs?

Explain the “ScrollSpy” use case on the visibility component’s page #314
Semantic-Org/Semantic-UI-Docs#314

Layout examples should include an example of a sidebar layout like the one used in the documentation

I'm trying to build a page that has a sidebar (or both a sidebar and a top appbar / navbar), and none of the Layout examples are helping. I tried mixing and matching the components and I never manage to obtain quite the result that works in the documentation (e.g. the Build Tools page), a simple sidebar on the left with content on the light.

I believe that having such common examples available would increase the adoption and popularity of this framework.

[Demo] Some calendar demos don't work on Safari

Bug Report

Some demos for calendar aren't working properly and showing only "NaN" instead dates and years on Safari 14.1 on OSX 10.14.6...
It works on Chrome, but not Safari.

Steps to reproduce

1. https://fomantic-ui.com/modules/calendar.html#event-dates
2. Try all the demos below the linked one. They just show "NaN" as years and dates

Expected result

Seeing the appropriate demo working

Actual result

They just show "NaN" as years and dates.

Screenshot (if possible)

Version

According to the website 2.8.4, tested in Safari 14.1. on OSX 10.14.6

Feature request: Open all codes with a single click

On page https://fomantic-ui.com/elements/button.html (as an example) I would like to be able to open all codes with a single operation. That corresponds to simulate a click on all "<>" button on the right of every paragraph.
Is it possible? Is there otherwise a workaround with the browser shell?

[Calendar] add time picker examples

Add some examples of the time picker

$('.ui.calendar').calendar({
  type: 'time'
});

Two different build instructions

Bug Report

I followed the instructions (while bouncing around the site) to use npm to install fomantic, followed by gulp build. However, when I upload the dist file (it looks complete, lots of files and code and stuff) I do not get the same results as the examples on the site itself. One problem in general was bottom dimmer over an image would cover the entire image. I thought it was a coding mistake on my end, but when I used the CDN (jsDelivr) the code performed as directed. I recompiled again (using gulp build) and same results. I wiped the directory and reinstalled fomantic and then used "npx gulp build" and that actually built the file correctly.

Emoji documentation link not in sync

In the New for 2.8 section, the awesome addition of emoji is very welcome. However, the link to see all emoji - in the bit at start of the section

introduces the new emoji element with support for all Unicode 12.1 Emoji Characters.

actually links to 13.1 list .. minor oops but yeah :D

Search for checkbox doesn't have correct path

The page for checkboxes doesn't have the correct path. It links to checkbox.html#example, when the link should be checkbox.html#/examples. I assume the "correct" path is a bug, because all other pages I've checked use the [module].html#example format.

Formatter/Validator for HTML

Writing valid HTML and format are sometimes forgetten.
Then we need to spend energy to fix them like doing so in #151.

I think automatic and uniform way of validating/format saves our energy for sustaining docs.
Let's consider to introduce something like https://prettier.io/ into CI.

Remote request seems to be broken

The remote request seems to be broken on this page : https://fomantic-ui.com/modules/dropdown.html#return-all-choices-remotely

Strange grid example or documentation

Here:
https://fomantic-ui.com/collections/grid.html#responsive-width

There is this example:

If this line

four wide two wide large screen one wide widescreen column

has no error, what does it mean putting both four wide and two wide in front of large screen?

[Docs] Toggle inverted mode examples/code

Just an idea…

Wondering if perhaps it may be useful to have a button when viewing the docs (possibly next to where the code is expanded/shown) where the section being viewed toggles between the standard and inverted version (where inverted is of course supported)

This way could potentially not need to have so many potentially duplicated sections showing inverted variants, and could also make it easier to keep track of inverted examples and quickly see what is supported and what could potentially be improved

[build] "gulp serve-docs" do not update semantic(.min).css in docs/out

Bug Report

Steps to reproduce

Assuming the following directory

• fomantic/
  • ui
  • docs

1. Run docpad run --port 8080 in docs
2. Run gulp serve-docs in ui
3. Edit input.less in ui
4. Open http://localhost:8080/elements/input.html

Expected result

Styles in http://localhost:8080/elements/input.html get updated as edited.

Actual result

Styles not get updated.

Logs on terminal.

$ gulp serve-docs
Change detected in definition
[11:45:00] Created: ../docs/out/src/definitions/elements/input.less
[11:45:01] Starting '<anonymous>'...
[11:45:01] Starting 'Building uncompressed CSS'...
[11:45:01] Starting 'Building compressed CSS'...
[11:45:03] Created: dist/components/input.css
[11:45:03] Finished 'Building uncompressed CSS' after 1.56 s
[11:45:03] Starting 'Packing uncompressed CSS'...
[11:45:03] Created: dist/components/input.min.css
[11:45:03] Finished 'Building compressed CSS' after 1.57 s
[11:45:03] Starting 'Packing compressed CSS'...
[11:45:17] Created: ../docs/out/dist/semantic.css
[11:45:17] Finished 'Packing uncompressed CSS' after 14 s
[11:45:17] Created: ../docs/out/dist/semantic.min.css
[11:45:17] Finished 'Packing compressed CSS' after 14 s
[11:45:17] Finished '<anonymous>' after 16 s

From the above log, I assume ../docs/out/dist/semantic.css get updated, but not include changes.

Version

2.8.2

Issue templates are different between docs site and GitHub

Below is a template bound to the Submit Bug Report button on docs site.

**Steps to Reproduce**
1. Do something
2. Do something else.
3. Do one last thing.

**Expected**
The Icon should do this

**Result**
The Icon does not do this

**Testcase**
(fork this to get started)
http://jsfiddle.net/rduvhn8u/1/

Below is Bug Report template on GitHub issues of Fomantic.

# Bug Report

<!--
Title Format
  [Scope] Summary of what is broken
-->

## Steps to reproduce
1.
2.
3.

## Expected result

## Actual result

## Testcase
<!-- Fork https://jsfiddle.net/31d6y7mn -->

## Screenshot (when possible)
![]()

## Version
x.x.x

I think the template for button should use same template in GitHub, so bug report is created uniformly.

fade attribute of button is not documented

In this example:
https://fomantic-ui.com/elements/button.html#animated
there is a fade class:

but it seams to me that it is not documented on the same page.

Calendar example input isn't wide enough

nov 11 2022 11:50

adding search feature on the navbar while reading the docs

the current docs nor the semantic UI official docs don't even have search functionality, people who migrate from Bootstrap or other UI frameworks are going to have a tough time finding things. also, no section explains how computer only / mobile only works, or maybe I'm having a hard time finding it because there's no search functionality

about overlay nag component

Bug Report

Click the close icon,overlay nag does not disappear, In other cases, clicking the close icon makes the nag disappear immediately

Steps

1. click close icon

Expected result

clicking the close icon makes the nag disappear immediately

Actual result

Click the close icon,nag does not disappear

Screenshot (if possible)

Version

2.9.0

[Doc] Tab documentation page should describe about disabled tab

I've yet to find a way to disable/deactivate a single tab with the existing functionality, and not too sure whether this should really be a bug, however, it is undocumented so thinking a feature

I propose that disabled is supported and clicking on a disabled tab does not apply a border (by means of applying the active class to the tab) and nor does it transition to the attached contents/segment. The current active tab should also not change, for example, first is active, if I click on the second tab, first should still be active

<div class="ui top attached tabular menu">
	<a class="item active" data-tab="first">First</a>
	<a class="item disabled" data-tab="second">Second (Disabled)</a>
	<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
	First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
	Second (Disabled so not viewable)
</div>
<div class="ui bottom attached tab segment" data-tab="third">
	Third
</div>

This could potentially be used for some scenarios when a system feature is not turned on within a different tab or some kind of setting elsewhere, but it is wanted to be displayed to show it isn't available in the current view (but may exist in similar views)

Docs broken with latest Docpad Release

Latest release of DOCPAD does not work with current docs. Docpad is deprecated.
See Semantic-UI ticket: Semantic-Org/Semantic-UI-Docs#404

Please add link to article about using LESS package

Hello,

As promised - https://medium.com/@marekurbanowicz/how-to-customize-fomantic-ui-with-less-and-webpack-applicable-to-semantic-ui-too-fbf98a74506c

Can you add it to the documentation so people can find it? @hammy2899 @lubber-de

Opening a page using a non-existing anchor leads into wrong rendered code

Bug Report

[Edit] the search engine part of this issue is fixed, so I left the wrong render problem only.

If a page is called using non-existing anchors it looks like this
https://fomantic-ui.com/behaviors/form.html#toc

vs
https://fomantic-ui.com/behaviors/form.html

Nag is not on ToC

A page for Nag module exists
https://fomantic-ui.com/modules/nag.html

But it is not in table of contents.

[label] Examples for keyboard shortcuts using code element

A common feature within online systems may be to list keyboard shortcuts (available to use by javascript) or may want to show a field name in a block of code to stand out a little

The below has a couple of examples that could be included when using the <code> element with labels:

https://jsfiddle.net/b6nhok7m/2/

[I do wonder if the font should be changed as O looks a similar to how 0 looks albeit 0 has the line going through it, also wonder if maybe the padding should be equal]

[Docs] Many behaviors are missing basic use syntax examples

The docs fail to provide proper syntax for how many of the behaviors should be called.

For example, the dropdown docs on https://fomantic-ui.com/modules/dropdown.html#/usage say ...

Then it mentions that you can clear a dropdown without triggering the onChange ...

However it's entirely unclear as to how this is accomplished. How do you pass preventChangeTrigger? I've tried ...

$('#my_dropdown').dropdown('clear', true);
$('#my_dropdown').dropdown('clear(true)');
$('#my_dropdown').dropdown('clear', 'preventChangeTrigger', true);
$('#my_dropdown').dropdown('clear', {preventChangeTrigger: true});

All of them trigger the onChange. And this isn't just dropdown, it's everywhere in the docs.

I'd suggest the lack of example syntax is a critical problem found throughout the docs.

[flyout] cannot close position example on mobile

On mobile, when running the example for the position flyout [https://fomantic-ui.com/modules/flyout.html#position] unable to close any of the fly outs, so have to go back in the browser or reload the page. Adding a close button may help? I do wonder if, for these cases, where the developer has not included a close button if one should be injected automatically instead

[Icons] code icons overridden by docs code icon

The docs code icon is overriding any icons which have code in the name.

Popup not shown on Pre-existing example

https://fomantic-ui.com/modules/popup.html#pre-existing

I expected a popup shown when hovering on a "Watchmen" card, but popup did not show up.

• Firefox 71.0

Duplicate anchor id

Page : https://fomantic-ui.com/collections/table.html

Both the States > Colored and Variations > Colored headings have the same id, so when you click on Variations > Colored in the floating TOC on the right, it scrolls to States > Colored.

Feat: Introduce CDN links for starters

It is very happy that Fomantic-UI is now hosted on CDNJS in addition to JSDELIVR 😄

I suggest to add links to those CDN-hosted FUIs in Getting Started or new dedicated page, like jQuery CDN and Quick Start for Bootstrap doing so.

So new comers of FUI can get started very quickly 🚄 and gain performance boost thanks to CDNs🚀, just adding <link> and <script> to their HTML, no need to install & build by themselves.

And, perhaps the pre-built distributions may be enough for many users who do not need to customize.

Icons search on site is broken

Bug Report

Steps to reproduce

1. Open https://fomantic-ui.com/elements/icon.html page
2. Try to enter "language" or "settings"

Expected result

Find communication language icon or settings icon.

Actual result

Nothing relevant suggested. It seems like icons visibility is managed dynamically (style="visibility: hidden;") and searching uses only small subset of topmost icon categories.

Testcase

Screenshot (when possible)

Version

2.9.x?

[checkbox] missing behaviours

Checkbox is missing some behaviours, such as:

is disabled
is enabled
is indeterminate

[seach] the "cancel query" behavour is written twice in the Fomntic-UI website

Feature Request

hi, the "cancel query" behavour is written twice in the Fomntic-UI website

Screenshot (if possible)

metadata.json is missing

• 404 https://fomantic-ui.com/metadata.json
• 200 https://semantic-ui.com/metadata.json

[Request] Add the "ui vertical following fluid accordion text menu" to the documentation.

I noticed that they are not in the documentation nor are they in semantic ui's documentation.. I would love to see an accordion text menu with scroll spy..

ToC of "New in 2.x" shows always latest

When "New in 2.6" tab or older is selected, the ToC in right sidebar always shows "2.7".

[CI] Setup (travis?) CI to build docs on every PR/commit

Setup travis CI or (whatever is needed) to automatically build the docs on every PR/commit, so reviewing makes the life easier.