Semantic-Org/Semantic-UI

Semantic is a UI component framework based around useful principles from natural language. Forkable JSFiddle: https://jsfiddle.net/ca0rovs3/

Joe Henry

@joehenry087

For anyone who may be interested, my company, Obsidian Systems has allowed me to release the Fomantic UI Kit for Sketch under the BSD3 license. Feel free to use it and contribute! https://github.com/obsidiansystems/fomantic-sketch-ui-kit

Mustafa Kuscu

@mcku

Hi, I am using all of Semantic UI's CSS, and some of its JS modules. Namely, there are modules such as semantic-ui-transition, semantic-ui-dropdown et al, which can be found on npm and github repository of semantic-ui, which I include separately into my build.

Is there any chance that such modules could be made available through fomantic ui as well so that users like me can upgrade?

Ultimate Software Idea Generator

@UltiSoftGen_twitter

Hi is there a discord to troubleshoot issues with semantic-ui ?

Marco 'Lubber' Wienkoop

@lubber-de

@UltiSoftGen_twitter The active community Fork https://fomantic-ui.com has a Discord here https://discord.gg/YChxjJ3

bryanSME

@bryanSME

I have an add covering up some of the docs on semantic-ui.com who should this be reported to?

Marco 'Lubber' Wienkoop

@lubber-de

@bryanSME This has already been adressed here Semantic-Org/Semantic-UI#6838

Shawan Pal

@shawanpal

Can I change my date-picker language, current language is English, I want to change my language Russian.

Can any one help me

Marco 'Lubber' Wienkoop

@lubber-de

@shawanpal yes, look here https://fomantic-ui.com/modules/calendar.html#language

Daz Owens

@Dazeh_twitter

Hi guys, Can someone shine light on this issue for me. I want to add a tab dynamically via jquery. When i add it, and run $('.menu .item').tab() again the new tab becomes unresponsive. Is there a way to init the new tab?

windwardpassage

@windwardpassage

Hello! I am trying to change the body font size on mobile devices. I have tried putting the following site>globals>site.overrides but it doesn't seem to be working. Any pointers would be appreciated!

@media only screen and (max-width: @largestMobileScreen) {
html {
        font-size: 22px; !important
        }
body  {
        font-size: 22px; !important
      }
}

Marco 'Lubber' Wienkoop

@lubber-de

@windwardpassage that's invalid css, the semicolons have to be set after!important, not before

Svein Seldal

@sveinse

Ultimate n00b here (using semantic-ui-react): How can I make a component that puts A B C on the same line, with A left-most, minimal width, C right-most, minimal width, B center, as large as possible. Should I use Grid for this? Because Grid uses fixed sized boxes, right?

Ghost

@ghost~5d5a7e33d73408ce4fc8bd51

@windwardpassage this is the correct format of CSS.

@media only screen and (max-width: @largestMobileScreen) {
html {
font-size: 22px !important;
}
body {
font-size: 22px !important;
}
}

Devesh Verma

@devshiva619

Hey everyone I was trying to use semantic

and its throwing me error in /semantic/src/themes/default/collections/table.variables

 message: 'Cannot create property \'_index\' on string \'!important\' in file /Users/deveshverma/educators-dashboard/semantic/src/themes/default/collections/table.variables line no. 1',
  stack: undefined,
  type: 'Syntax',
  filename: '/Users/deveshverma/educators-dashboard/semantic/src/themes/default/collections/table.variables',
  index: NaN,
  line: 1,
  column: -1,
  callLine: NaN,
  callExtract: undefined,
  extract: 
   [ undefined,
     '/*******************************',
     '             Table' ],
  lineNumber: 1,
  fileName: '/Users/deveshverma/educators-dashboard/semantic/src/themes/default/collections/table.variables',
  name: 'Error',
  plugin: 'gulp-less',
  showProperties: true,
  showStack: false,
  __safety: { toString: [Function: bound ] } }

this error shows up when I cd into semantic and gulp build

Svein Seldal

@sveinse

I'm trying to install semantic-ui in win10 by running "npm install semantic-ui --save". And after answering the question, the step "Creating src/theme.config (LESS config)" the installation is stuck forever. Looking at the running processes, node is just sitting there. I'm kinda stuck. What can I do?

I've got npm 6.9.0, node 10.16.2 and gulp 4.0.2, gulp-cli 2.2.0 installed globally.

Svein Seldal

@sveinse

Oh.. A known unfixed bug for win10 #6641 "Installation stuck on Creating src/theme.config" :( Darn. Bootstrap here I come.

Colin Frick

@ColinFrick

@sveinse you could try the community fork: https://github.com/fomantic/Fomantic-UI

Svein Seldal

@sveinse

@ColinFrick that worked, thanks. What is the relationship between Semantic-UI and Fomantic-UI, and how are they related in respect of releases and stability?

Colin Frick

@ColinFrick

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

We don't have a fixed release cycle, but plan to release once per month.

windwardpassage

@windwardpassage

@windwardpassage this is the correct format of CSS.
@media only screen and (max-width: @largestMobileScreen) {
html {
font-size: 22px !important;
}
body {
font-size: 22px !important;
}
}

Thank you, @elkees_gitlab and @lubber-de!

windwardpassage

@windwardpassage

Hello again,
I am using the npm installation of semantic ui v 2.4.2. Everything works beautifully except for <select class="ui dropdown">. They render as expected on Chrome but on Firefox, they seem to be using Firefox's scrollbar and dropdown background. Any pointers would be appreciated! The selects on the Semantic UI website render fine even though I'm on Firefox. Thank you!

Ghost

@ghost~5d5a7e33d73408ce4fc8bd51

Modal module doesn't work inside the popover content (using the data-html tag).

<html>
<div id="cbinfo-modal-content" class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  </div>
  <div class="image content">
    <div class="ui medium image">
      <img src="https://semantic-ui.com/images/avatar2/large/rachel.png">
    </div>
    <div class="description">
      <div class="ui header">We've auto-chosen a profile image for you.</div>
      <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
      <p>Is it okay to use this photo?</p>
    </div>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>


                          <div class="cbinfo_popover" data-html="<div class='popover_content'>Lorem Ipsum is simply dummy text of the printing and typesetting industry..<a class='popover_message' id='cbinfo-modal' href='#/'>Modal Link <i class='sign out alternate icon'></i></a></div>"> <a class="cbquery" href="#/"> Popover Text</a></div>
<br>  
<br>  
<a id="cbinfo-modal" class="popover-text" href="#/"> Test me, I'm working without POPOVER data-html</a>

</html>

<style>
.cbinfo_popover {
  font-size: 18px;
  margin-left: 100px;
  margin-top: 30px;
}
.popover_content a {
    font-weight: bold;
    color: #000;
    font-size: 14px;
    float: right;
    margin: 10px 8px 0;
}
.popover-text {
  font-size: 18px;
  margin-left: 100px;
}
</style>

<script>
$(document).ready(function(){
$('#cbinfo-modal').click(function(){
$('#cbinfo-modal-content').modal('show');    
});
});

$('.cbinfo_popover')
  .popup({
    hoverable: true
  })
;
</script>

Can someone help me to fix it.?

Here is the JSFiddle link for the code: https://jsfiddle.net/PremGanga/t4gmofx0/23/

Marco 'Lubber' Wienkoop

@lubber-de

@elkees_gitlab data-html is not available at that time, but you can initialize the modal click when the popup is shown. See https://jsfiddle.net/z9ca6w7j/

Florin Asăvoaie

@FlorinAsavoaie

Hey, I get the same error as @devshiva619 ...

Florin Asăvoaie

@FlorinAsavoaie

Ah: kvadevack/site#46

Hey everyone I was trying to use semantic

kvadevack/site#46

Marco 'Lubber' Wienkoop

@lubber-de

@FlorinAsavoaie it's a bug in less 3.10 which is already addressed in the less repo. Use less 3.9 I. the meantime

Michael Bishop

@017Bluefield

Hello

Question: is it OK to use Semantic's icons for a Ren'Py game's UI?

Colin Frick

@ColinFrick

@017Bluefield do you mean the FontAwesome icons? You'd have to check their license https://fontawesome.com/

Andrew Milmoe

@amilmoe

Greetings! I discovered the Sketch template... which has a few buttons and things, but none of the page layouts present on the site. Anyone know where I might find a page layouts in Sketch for Semantic-UI / Fomantic-UI?

I'm happy to share mine as I go... but hoping to not re-invent the wheel.

Michael Bishop

@017Bluefield

@ColinFrick Thanks anyway.

Sean

@hammy2899

@amilmoe There is this FUI ui kit https://github.com/obsidiansystems/fomantic-sketch-ui-kit developed by @joehenry087 it is actively maintained and has more components then the other kits you may find

charitreddy1

@charitreddy1

Hello everyone!

I need some help in designing my web pages..... I'm completely new to reactjs, and began using semantic UI

I have tables with same header cells and same body cells, only with 2 different sources(APIs) for data.

Currently, I've made 2 pages with same code and different URLs.

How do I re-use the code?

Andrew Milmoe

@amilmoe

@hammy2899 Excellent! Thank you. This will take me a lot further. I got a bit spoiled using the Predix Sketch template:
https://www.predix-ui.com/#/about/start-designing

Which is quite comprehensive, but largely abandoned. (Which is why I'm adopting Fomantic.)

dbinhua

@dbinhua

When I install semantic-ui, I will get a lot of error messages. The version of my nodejs is 12.9.1, and the version of npm is 6.10.2. How can I solve it?

Sean

@hammy2899

@dbinhua What kind of errors are you getting?

windwardpassage

@windwardpassage

Hello all:

Sorry, I am quite new to this but I have some questions about Semantic UI and project structure.

Is it correct that the Semantic folder should sit outside of the node_modules folder?
When deploying for production, do we really only need dist/semantic.min.css?

Thank you!

Where communities thrive

People

Repo info

Activity