semantic-ui

i want to change semantic-ui default font with @font-face but no matter... i tried change in less file(site.variables) but I do not know how change it i tried add my font with other custom css file but it not work @font-face { font-family: 'fontname'; src:url('themes/basic/assets/fonts/fontname.eot'); src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'), url('themes/basic/assets/fonts/fontname.woff') format('woff'); } body{ font-family: 'fontname'; } I know two ways to change font-face, using google fonts or offline fonts: Using google fonts: We need to have the resources of

I know how to validate a form using Semantic UI , and can even read in console the message "Form has no validation errors, submitting." However, where is this submitting to? I want to actually submit the form, but the way Semantic UI is laid out I don't seem to be able to specify where to submit to or anything. I read this tutorial , but that uses Angular for submission and not just Semantic UI. Am I missing something really simple here? Agon Bina You can use jQuery's ajax: //Get value from an input field function getFieldValue(fieldId) { // 'get field' is part of Semantics form behavior API

I can't get the theme selection to work in Semantic UI. I attempt to follow the instructions provided in the workflow section of the documentation: Files in the examples/ folder of your project can be useful for testing out changes in your UI. For example, you might run gulp watch download a new theme to src/site/themes/ then adjust your theme.config file with the name of the new theme and refresh examples/kitchensink.html to inspect changes in the theme. So in the semantic ui directory, after the suitable gulp build / gulp install steps, I type gulp watch , I modify src/theme.config , for

This question already has an answer here: How to center an element in the middle of the browser window? 18 answers What is the best pattern to align a semantic ui grid in the middle of the screen? the css for this will ideal be this one. .div{ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; } But on semantic this dont look well with grids. This is part of my html. <div class="ui grid container"> <div class="ui center aligned three column grid"> <div class="column"> </div> <div class="column"> </div> </div> </div> This should work

Which is the best one to use and if possible, please provide the difference(s) and advantages of these two. Semantic-ui vs Bootstrap I am trying to build my UI and really confused as what to use. Please suggest me the best one and if possible with examples. elkebirmed I think that we can't see the differences between Bootstrap and Semantic-UI right now, Semantic-ui is new, so we have to let the time decide :) My opinion: Semantic-UI design is better than Bootstrap and more clean, easy to use, strict coding, useful components, lightweight. I see the future of Frameworks in Semantic-UI, so I

I am a big fan of Semantic UI and even more so of Semantic UI React. Aside from them being excellent libraries, their docs are amazing. However, writing and maintaining themes for their components can be cumbersome. And it becomes even more difficult to write, build, and maintain multiple themes. So the question is: How to write, build, and maintain multiple Semantic UI themes and review their state using the official Semantic UI docs? After working with Semantic UI for years and finally getting down to write a proper theme builder, I came up with this solution to the problem here . The repo

if I set up a className for certain components like <Segment className="Change" color='blue' inverted></Segment> and in my css I use .Change:hover{ background-color: black; //or any other change on hover } nothing is overriden on the hover. I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover? After reviewing the source code of Segment Component ( github ), I found it has two default classes: segment and ui