semantic-org / semantic-ui Goto Github PK
View Code? Open in Web Editor NEWSemantic is a UI component framework based around useful principles from natural language.
Home Page: http://www.semantic-ui.com
License: MIT License
Semantic is a UI component framework based around useful principles from natural language.
Home Page: http://www.semantic-ui.com
License: MIT License
I want a menu that when I click an item, it scrolls to the part of the page it's pointed at.
In both the sidebar and the main button on the homepage, this isn't very semantic.
There is a download icon available on Fontello.
Class stack you're using:
inverted circular red upload icon
What it should probably be:
inverted circular red download icon
Please rework the whole codebase, especially the examples, to make the project semantic, as it states itself to be.
Where is the semantic in styling a DIV as a button? Use the BUTTON-element instead. It has a special purpose and meaning. And purpose and meaning are what drives semantics. Not the naming of a class.
<div class="field">
<label>Username</label>
<div class="ui labeled icon input">
<input type="password" placeholder="Username">
<i class="user icon"></i>
<div class="ui corner label">
<i class="asterisk icon"></i>
</div>
</div>
</div>
How the corner label icon looks if the icon i
in the input field and the class icon
in the div
are removed:
<div class="field">
<label>Username</label>
<div class="ui labeled input">
<input type="password" placeholder="Username">
<div class="ui corner label">
<i class="asterisk icon"></i>
</div>
</div>
</div>
Also: input type should not be "password" for the username.
or width should adapt itself to the device-width ?
i want to say well done ... Good Job ๐ I think it would be nice to add more specification such as
if you have a list of items, you probably have to work with UL followed by LI
and if you have a short piece of code inside your menu, you shouldn't use DIV, because W3C recommends SMALL tag to do this.
As mentioned in MSDN (like http://msdn.microsoft.com/en-us/library/ie/hh772233(v=vs.85).aspx), -ms- prefix is not needed.
Does you have any plans to add any kind of AJAX-validations support for the form validation module? I think, it would be great.
I hope you will add autocomplete to your project soon... Thanks!
In the second example of dimmer documentation to close it you have to click out of the centered div, and could mislead the user.
I think would be better if close when you click anywhere.
I wnat to talk about the possibility of adding a select dropdown with input search, some like Select2, Selectize or Choosen... but restyled to fit to the apperance of semantic-ui.
With an animation when the dropdown appear.
Would be epic. I think would be very useful.
I was wondering if you are planning to provide multi-screen support, something like ink's:
http://ink.sapo.pt/layout#nav-screens
or twitter bootstrap responsive utilities:
http://getbootstrap.com/css/#responsive-utilities
(I think I like ink's approach better...)
It would be great if you'll make your project available in Nuget.
Thanks in advance!
The border corners in the table segments in modules/accordion
...
...should look like that of the colored segments in elements/segment
.
The tables on the doc pages of the other modules use celled definition table segments instead of colored table segments. Do the definition tables supersede the colored tables? It would be nice to have an example of a colored table segment in collections/table
.
hi
thanks a lot for your work i love semantic-ui
is there a special reason for choosing fontello ?
Hi,
I'm displaying a radio group inside a modal and the radios are not selectable (clickable). Might be a z-index problem?
<div class="ui dimmer page visible active">
<div class="ui signoff modal transition visible active" style="margin-top: -198px;">
<i class="close icon"></i>
<div class="header">
...
</div>
<div class="content">
<div class="left">
<img class="ui image" src="images/avatar.jpg">
</div>
<div class="right">
<div class="ui header">...</div>
<div class="ui form">
<div class="grouped inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example" checked="checked" value="1">
<label></label>
</div>
<label>A</label>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example" value="2">
<label></label>
</div>
<label>B</label>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example" value="3">
<label></label>
</div>
<label>C</label>
</div>
</div>
</div>
</div>
</div>
<div class="actions">
...
</div>
</div>
</div>
In the conditional buttons there is no the chance to choose the word of inside.
Imagine that someone wants to put "and" instead, or just a word in another language.
It would be just great :)
When attempting to use the Slider/Toggle they appear to be static
JSFiddle example
http://jsfiddle.net/PPHkQ/1/
I may be not that experienced with UI but let me show what happens when I try to pass onHide function into the modal.
At first, I initialise it with these params. And I can see that the params were passed successfully:
debug: false
performance: false
onHide: ->
console.log "Hided!"
onShow: ->
console.log "Shown!"
But if I try to show it:
$('.ui.modal').modal('show')
I get a modal with default params. E. g. with debug: true and without callbacks.
What am I doing wrong?
Do you have Modal module in your Semantic UI?
Thanks!
Active style of secondary menu disappear while scroll on the page UI Definitions.
should add a z-index:>10 to.ui.form.loading:after ...
<div class="field">
<label>Password</label>
<div class="ui right labeled icon input">
<input type="password">
<i class="circular inverted teal lock icon"></i>
</div>
</div>
the accordion example on the page
http://semantic-ui.com/modules/accordion.html
is not working
To make inline validation perfect (the last example here http://semantic-ui.com/modules/form.html) according to the UX, the scenario should be like that:
The icons on the last example (Inverted) on this page are cropped on top and left side.http://semantic-ui.com/elements/icon.html
This project looks amazing. I can't find any info on browser support. Did I miss it or has it not been decided yet? Will it be similar to bootstrap? http://getbootstrap.com/getting-started/#browsers
If it hasn't been decided yet, can I vote for IE8+ support as that is our clients requirements.
Hi,
I've used this lib for the first time, I love the design and feel!
I've found a couple of problems, this is related to the modal:
To show the modal I use:
$('.ui.modal.signoff').modal('toggle')
This is the inspected HTML:
<div class="ui dimmer page visible active">
<div class="ui signoff modal transition visible active" style="margin-top: -198px;">
...
</div>
</div>
After closing the modal, this is the HTML (no more classes on the modal div!):
<div class="ui dimmer page hidden">
<div class="" style="margin-top: -198px;">
....
</div>
</div>
Alex
Miscategorized
The Dropdown and Dimmer hide and show events are being enqueued and executing multiple times.
To reproduce that try clicking the dropdown or dimmer button multiple times.
It would be awesome if font-awesome-ish icon styles were added.
E.g.
for example: http://screenshot.su/show.php?img=020e2ad16a6ff85c2a957355f1dee106.jpg
google chrome
ver 29.0.1547.66 m (last)
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.