semantic-org / semantic-ui-docs

Official Documentation for Semantic UI

Semantic Docs

This folder contains the templates used to generate the static website for semantic-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.

SUI docs use a version of DocPad compatible with Node 10. It is recommended you install NVM and a compatible node version in order to create the documentation.

nvm install 8
nvm use 8

To run docpad after cloning this repo

npm install -g [email protected]
docpad install;

Then finally to start the server

docpad run

Generating Semantic UI for Docs

Assuming two sibling folders:

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

• Clone both repos to respective folders
• npm install in both directories
• Go through Semantic 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

semantic-ui-docs's Issues

[Checkbox] - Should be tabbable by default

Just like native html checkbox.
@jlukic , if you agree, we should amend examples with tabindex='0'.

"large monitor -> "large screen"

Semantic-UI-Docs/server/documents/collections/grid.html.eco

Lines 249 to 253 in 1f0eff4

	<td>Large Monitor</td>
	<td>Above 1400px</td>
	<td>18%</td>
	<td>(x) wide large monitor</td>
	<td>$largeMonitorBreakpoint</td>

The correct keyword in class is "large screen" – not "large monitor".

Search module settings have typos

Hi.

The doc page about the Search module has some typos:

• minCharacters says its default value is 2, but it is 1 according to the module code (line 874)
• hideDelay default value is 0, not 300 (line 887)
• searchDelay default value is 100, not 300 (line 888)
• verbose default value is true, not false (line 870)
• performance default value is true, not false (line 871)

Code block font does not display

Hi, on the live site all the text in the "< code ></ code>" blocks do not display, if I inspect I do not see resource load issues or a console error, but disabling the font-family on line 62 of docs.css fixes this even just removing the font families before consolas or making "Lato" the first font makes the code blocks display text again.

"Filter Posts" dropdown incorrectly formatted for Amazon theme

Only on http://beta.semantic-ui.com/.

//--------

//----------

A typo in module dropdown

option fullTextSearch's default value should be false (https://github.com/Semantic-Org/UI-Dropdown/blob/master/dropdown.js), but in document it is true(http://semantic-ui.com/modules/dropdown.html#/settings)

Semantic UI Fixed Template ("Fixed Menu" template)

Some weirdness in the Semantic UI Fixed Template layout example which made my learning experience harder than it perhaps needed to be:

1. <div href="#" class="header item"> - The first menu item is a <div> with an href
2. <a href="#" class="ui simple dropdown item"> - The entire dropdown menu component is an enormous <a> tag. This means none of the child item links can be <a> tags. In the example the child 'links' are just plain <div>s, which is not a great starting point. Also, touch users would presumably not be able to use the dropdown - tapping it would trigger the link rather than opening the menu.
3. Perhaps the parent <div> could be a <nav> tag.

Here is the code for the menu incorporating all the above changes and making use of <a> tags for all links. I would have submitted a pull request but I couldn't find the examples code anywhere in this repo (which is perhaps a separate issue)

  <nav class="ui fixed inverted menu">
    <div class="ui container">
      <a href="#" class="header item">
        <img class="logo" src="assets/images/logo.png">
        Project Name
      </a>
      <a href="#" class="item">Home</a>
      <div class="ui simple dropdown item">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <a href="#" class="item">Link Item</a>
          <a href="#" class="item">Link Item</a>
          <div class="divider"></div>
          <div class="header">Header Item</div>
          <div class="item">
            <i class="dropdown icon"></i>
            Sub Menu
            <div class="menu">
              <a href="#" class="item">Link Item</a>
              <a href="#" class="item">Link Item</a>
            </div>
          </div>
          <a href="#" class="item">Link Item</a>
        </div>
      </div>
    </div>
  </nav>

Components missing after first run

On my first load of the site after successfully invoking docpad run, I get a string of errors that look like this:

notice: 404 Not Found: /dist/components/site.js
notice: 404 Not Found: /dist/components/state.js
notice: 404 Not Found: /dist/components/api.js
notice: 404 Not Found: /dist/components/visibility.js
notice: 404 Not Found: /dist/components/accordion.js
notice: 404 Not Found: /dist/components/checkbox.js
notice: 404 Not Found: /dist/components/dropdown.js
notice: 404 Not Found: /dist/components/modal.js
notice: 404 Not Found: /dist/components/nag.js
notice: 404 Not Found: /dist/components/progress.js
notice: 404 Not Found: /dist/components/rating.js
notice: 404 Not Found: /dist/components/search.js
notice: 404 Not Found: /dist/components/shape.js
notice: 404 Not Found: /dist/components/sticky.js
notice: 404 Not Found: /dist/components/transition.js
notice: 404 Not Found: /dist/components/video.js
notice: 404 Not Found: /dist/components/form.js
notice: 404 Not Found: /dist/components/dimmer.js
notice: 404 Not Found: /dist/components/popup.js
notice: 404 Not Found: /dist/components/sidebar.js
notice: 404 Not Found: /dist/components/tab.js

And the site doesn't look right:

Layout examples' source code

Layout examples should have a link to source code on github for html and js alike.

Javascript lower case when copy icon label

Hi,

On Icon Documentation Page ([http://semantic-ui.com/elements/icon.html]) , it would be nice if when we copy the icon title, a javascript will lowercase the title, so when we paste it in code, we have not more to lowercase it :-)

Sorry for bad English,
Have nice day

How to edit code examples in the docs?

Eg, I want to edit http://semantic-ui.com/elements/icon.html#message example

License on Avataars

I'm building an MVP for a project, in which I want to explain some features and need mock avataars in the demonstrations. The avataars used in these docs looked ideal.

Is there a license on reusing the avataars here, for our own, potentially commercial, projects? Alternatively, anyone have recommendations on where I could generate my own, especially since I need one of an elderly lady?

Add dependencies

I added the sidebar to my site. It looked like crap.
So I enabled all the other definitions of semantic ui - and now the sidebar looks like in the documentation.

The documentation is missing information about the dependencies of the semantic ui components.
Example: What other definitions need to be enabled to properly run the sidebar component?

suggestion: docs should show javascript when required

I think it would be nice if the docs went into the javascript a little bit more when that is required. The button page is a great example - I mean a button does nothing without the javascript. That may seem obvious, but other items, like reveal work as if by magic with the semantic framework javascript and nothing custom except markup. Don't need a tutorial on jquery, but a note that making the button work as in the demo requires jquery code, not just HTML markup helps context - especially if you just read about another element that just works with markup.

It isn't too hard to figure out, but you have to think a little too much when you are already just trying to wrap your head around all the cool stuff semantic has to offer.

No CSS styling in my browser for docs.

How do I get the CSS styling to work? I got the docpad working to create the static HTML in /docs/, and running docpad run, but the CSS isn't showing in my browser, only plain non-styled HTML.

Error in label sizing

When looking at the example for label sizing:
http://semantic-ui.com/elements/label.html#size

The labels big and massive isn't used.

//----------

//----------

[Discussion] How the language is changed on runtime?

I noticed that when I click on the button called Change Language.
The language list will be shown. After I selected a language, Chinese, the page will be changed to Chinese.
Some of the strings are remained to English whereas some strings are changed to Chinese.

Could I know how this process is done?
I searched the code but I cannot figure why.

1. How to the mapping between current language to target language?
2. Where is the content of target language stored?
3. Where is the method to change language?

Thanks

Some spotted display bugs

http://beta.semantic-ui.com/elements/divider.html

http://beta.semantic-ui.com/modules/transition.html#/definition
http://beta.semantic-ui.com/modules/transition.html#/examples
http://beta.semantic-ui.com/modules/transition.html#/usage

http://beta.semantic-ui.com/behaviors/api.html#/usage

Instructions adequate to build docs?

Instructions mention a ui folder, a docs folder, a vendor folder, and grunt files, but none of these were found. Missing semantics in the instructions? Nearest I got to getting it to work was using the command "docpad run" which generated the site to ./out, but errors were generated along the way, which would account for the generated pages lacking correct styling.

Menu docs won't render properly

I'm not sure if is a JS issue related or something, but menu docs is broken:

• http://www.semantic-ui.com/collections/menu.html

Icon - new small sizes tiny and mini are undocumented

Left sticky menu and right sticky rail widths.

Hello!

I can not find the code with which the width of these elements varies depending on the width of the screen.

http://semantic-ui.com/introduction/getting-started.html

Please help me understand.

Table section correction

<div class="ui warning message">Adding a classname of <code>ascending</code> or <code>descending</code> to the <code>th</code> will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="https://github.com/kylefox/jquery-tablesort">tablesort plugin</a> to provide the proper class names.
</div>

This text sd be removed from Sortable table code example.

indication of file locations

Hi, thank you for your framework, I as a newbie trying to follow a "semantic workflow" just do not know where to ever place the files this is also the case with semantic ui, I get these things build ect but am completely unsure where to place them within a project structure, such as when I build semantic ui via gulp also , could you update docs to reflect a fake project structure indicative of file location ect which files are truly used if I go with adding semantic less files to a current gulp project? hope this is clear.

Suggest to add `copy code snippet to clipboard` feature in opened `view source`

http://zeroclipboard.org/

"Form" forgot the `add prompt` behavior.

http://semantic-ui.com/behaviors/form.html#/settings
forgot the add prompt behavior.

docpad upgrade removed my NPM installation & docpad executable

docpad upgrade removed my NPM installation & also removed the docpad executable. Trying to get Semantic UI docs set up:

See here:
docpad/docpad#990

gulp build-docs does not copy 'dist' to docs/out

When I run gulp build-docs it does not copy the actual dist folder to the docs server. I have to manually copy the dist folder to make it work.

code reveal bug on elements/image/variations/avatar

Hi, I found this bug related to revealing the example code:

1. Go to http://semantic-ui.com/elements/image.html
2. Reveal code for Variations/Avatar.
3. Notice the Username appears on top of the avatar image.

Browser: Google Chrome 42.0.2311.135m, Windows 8 Pro 64-bit

Edit This Page

UI Examples (+ missing space between the buttons and the page tabs)
The 2 "Globals" pages (no missing space here)
The 3 "Behaviors" pages (+ missing space between the buttons and the page tabs)

rating module stars

It'd be nice if we could have half stars aswell because the rating average is often a float number and currently it doesn't support it.

Docs site min.css missing?

Here's my current screenshot:

States section shows twice on search page

The states section is shown twice for the search documentation
http://semantic-ui.com/modules/search.html

Classical error（FYI: screenshot） 【behaviors/visibility.html 】

//---------

//----------

build-docs doesn't copy dist\components\*.css

while running docpad server there is bunch of notices file not found:

notice: 404 Not Found: /dist/components/progress.css
notice: 404 Not Found: /dist/components/rating.css
notice: 404 Not Found: /dist/components/search.css
notice: 404 Not Found: /dist/components/shape.css
notice: 404 Not Found: /dist/components/sidebar.css
notice: 404 Not Found: /dist/components/sticky.css
notice: 404 Not Found: /dist/components/tab.css
..etc

they're all related to *.css files, I think build-docs doesn't have job copying these files? so I need manually copy all *.css from ui folder.

[Sidebar] - add horizontal sidebar to the examples

So that Horizontal Only Animations: Uncover Slide Along Slide Outare demo-able.

Some pages have sidebar toggled by default and no 'Menu' button

http://semantic-ui.com/elements/container.html - normal
http://semantic-ui.com/elements/button.html - not normal

Add 'Submit bug in the docs' button

Should add next to 'Edit this page' button.
Currently submitting doc issue leads to main SUI bug tracker.

Font Awesome 4.5 and more

just edit site/elements/icon.overrides.import.less and add the following code

/*******************************
         Site Overrides
*******************************/

/*******************************
            Icons
*******************************/

/* new 4.5.0 icons */

/* Web Content */
i.icon.hashtag:before { content: "\f292"; font-family: FontAwesome}
i.icon.percent:before { content: "\f295"; font-family: FontAwesome}
i.icon.shopping-bag:before { content: "\f290"; font-family: FontAwesome}
i.icon.shopping-basket:before { content: "\f291"; font-family: FontAwesome}

/* Brand Icons */
i.icon.bluetooth:before { content: "\f293"; font-family: FontAwesome}
i.icon.bluetooth-o:before { content: "\f294"; font-family: FontAwesome}
i.icon.codiepie:before { content: "\f284"; font-family: FontAwesome}
i.icon.edge:before { content: "\f282"; font-family: FontAwesome}
i.icon.fort-awesome:before { content: "\f286"; font-family: FontAwesome}
i.icon.mixcloud:before { content: "\f289"; font-family: FontAwesome}
i.icon.modx:before { content: "\f285"; font-family: FontAwesome}
i.icon.product-hunt:before { content: "\f288"; font-family: FontAwesome}
i.icon.reddit-alien:before { content: "\f281"; font-family: FontAwesome}
i.icon.scribd:before { content: "\f28a"; font-family: FontAwesome}
i.icon.usb:before { content: "\f287"; font-family: FontAwesome}

/* Payment Icons */
i.icon.credit-card-alt:before { content: "\f283"; font-family: FontAwesome}

/* Video Player Icons */
i.icon.pause-circle:before { content: "\f28b"; font-family: FontAwesome}
i.icon.pause-circle-o:before { content: "\f28c"; font-family: FontAwesome}
i.icon.stop-circle:before { content: "\f28d"; font-family: FontAwesome}
i.icon.stop-circle-o:before { content: "\f28e"; font-family: FontAwesome}

Add search and keyboard shortcuts

I feel I am constantly clicking the menu (slide open...), Cmd-F'ing chrome, and finding the section that I am looking for. It would be a usability improvement to add a search function to the documentation site, as well as keyboard shortcuts. I recommend the similar convention to https://help.github.com/articles/using-keyboard-shortcuts.

If desired, I can start on it. Pls suggest best way to grep code and generate json file like { title: '', description: ''} for .fn.search.

Website is down

http://semantic-ui.com/ reports 404.

Recommended directoy structure for Docs?

Hello,

I am just wondering which is the recommended directory structure for Semantic-UI-Docs!?
It's obvious that Semantic-UI's docs shall be contained in an adjacent directory to Semantic UI itself.

But....
On semantic-ui.com's documentation (http://semantic-ui.com/introduction/advanced-usage.html#a-note-about-paths) there is stated

docs/
Files from docs repo

whereas cloning Semantic-UI-Docs Github project creates a folder "Semantic-UI-Docs".
The first one ("docs") is also the one, which is Semantic UI's default setting.
Or shall "Semantic-UI-Docs" be a subfolder of "docs"?
Also, which folder is the one docpad shall be installed in?

Could you please clarify that a bit?

Many thanks,
Sascha.

add js code to 'view source'

Currently we have html but it's really not enough.
If we're aiming at more user-friendly experience in 2.0 and at attracting bigger audience - it is imperative to have many code examples and those examples being easily accessible.
Like, when I come to SUI.com and see some nice feature, l say: Wow! I want this on my site!
Then I press 'View Source', copy it to my code and everything's running smooth and easy.
Whilst now sometimes I have to rummage through the docs, spend hours (worst case scenario) in trial and error attempting to achieve the same functionality that is already present on SUI.com. This really spoils the joy of using Semantic UI(

Small ade avatar

Semantic-UI-Docs/server/files/images/avatar/large/ade.jpg is small :)

[dropdown] - message content variation is broken

view code on 'What's new' page

http://semantic-ui.com/introduction/new.html
Don't think view code btns are necessary there. my opinion.

Bulleted list items not displaying properly

Bullets are shown as their plain-text • instead of a bullet.

http://semantic-ui.com/elements/list.html