semantic-org / semantic-ui-docs Goto Github PK
View Code? Open in Web Editor NEWOfficial Documentation for Semantic UI
Home Page: http://www.semantic-ui.com
Official Documentation for Semantic UI
Home Page: http://www.semantic-ui.com
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.
//----------
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.
Eg, I want to edit http://semantic-ui.com/elements/icon.html#message example
Hi.
The doc page about the Search module has some typos:
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}
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
So that Horizontal Only Animations: Uncover Slide Along Slide Out
are demo-able.
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.
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
.
Only on http://beta.semantic-ui.com/.
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.
Hi, I found this bug related to revealing the example code:
Browser: Google Chrome 42.0.2311.135m, Windows 8 Pro 64-bit
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.
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.
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.
Layout examples should have a link to source code on github for html and js alike.
http://semantic-ui.com/ reports 404.
When looking at the example for label sizing:
http://semantic-ui.com/elements/label.html#size
The labels big and massive isn't used.
The states section is shown twice for the search documentation
http://semantic-ui.com/modules/search.html
http://semantic-ui.com/elements/container.html - normal
http://semantic-ui.com/elements/button.html - not normal
I'm not sure if is a JS issue related or something, but menu docs is broken:
Bullets are shown as their plain-text •
instead of a bullet.
http://semantic-ui.com/behaviors/form.html#/settings
forgot the add prompt
behavior.
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.
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?
Semantic-UI-Docs/server/documents/collections/grid.html.eco
Lines 249 to 253 in 1f0eff4
The correct keyword in class is "large screen" – not "large monitor".
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)
docpad upgrade
removed my NPM
installation & also removed the docpad
executable. Trying to get Semantic UI docs set up:
See here:
docpad/docpad#990
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)
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?
Should add next to 'Edit this page' button.
Currently submitting doc issue leads to main SUI bug tracker.
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.
http://semantic-ui.com/introduction/new.html
Don't think view code btns are necessary there. my opinion.
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:
Just like native html checkbox.
@jlukic , if you agree, we should amend examples with tabindex='0'
.
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.
Semantic-UI-Docs/server/files/images/avatar/large/ade.jpg is small :)
<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.
//----------
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(
Some weirdness in the Semantic UI Fixed Template layout example which made my learning experience harder than it perhaps needed to be:
<div href="#" class="header item">
- The first menu item is a <div>
with an href
<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.<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>
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.
Thanks
//----------
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.