Semantic is a UI component framework based around useful principles from natural language. Forkable JSFiddle: https://jsfiddle.net/ca0rovs3/
Anyway, for dynamic re-compilation because of changed LESS Variables, you might use in-browser LESS compilation using http://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js . This is, for example, used already on the homepage of SUI/FUI when switching between themes
@joehenry087 I'm guessing you aren't aware of the current situation so I will give you a brief summary. Semantic-UI's (SUI) last release was in Oct 2018 so nearly 1 year ago but before that releases were around every 4-5 months (they were meant to be monthly) and it was like this for about a year or so. The slowness of releases prompted a few users to open issues including these 2 popular ones Semantic-Org/Semantic-UI#6109 and Semantic-Org/Semantic-UI#6413 which the idea of a community fork was proposed early on as an active member of the SUI team with some knowledge of the frameworks code base I agreed to make the fork as we know today as Fomantic-UI (FUI). Since we started SUI we have 18 releases, 700+ more commits and 350 bug fixes and a few new components including a native calendar component.
Now to answer your questions, the migration from SUI to FUI is very simple its so simple you just need to change the name of the dependency in your package.json and then run npm install and you will then be using FUI instead of SUI. This simple migration is possible because the development of FUI is following the principles of SUI and we are keeping the library in a state so it could be merged back into SUI if development ever restarted which was our promise to the community when we first started. Since we are sticking to the same principles this also means all new components and changes also have the same look and feel of SUI components so yes if you designed a sketch file it would be compatible for both 🎉
As for "Is this forum mostly a Fomantic forum now?", no we have a community discord server https://discord.gg/YChxjJ3 but most of (if not all) the FUI core contributors lurk around in the SUI support channels to provide support for anyone in need.
Also you mentioned "I wouldn't mind hosting it on github so the fomantic people can add fomantic elements to it as well." that would be awesome, we try to keep as much as we can in open because this is a community project and we try to get as much of the community involved as we can. If you wanted you can host the repository on the fomantic GitHub org as I would be happy to create that for you.
I understand this is quite a lot of take in so feel try to ask any questions you may have and I am happy to answer them 🙂
Sorry for taking a bit long to respond back on it!
Thanks for the idea! I had enable Ctrl +/- in my Electron app and that makes it easier to resize the UI when it's too small/big for the user.
It seems that Dropdown has a
search type, but that looks to be meant for situations when the provided options are static (or change very little) and not determined on-the-fly with searchQuery changing.In contrast, it seems that Search is more suited for this, since it can be controlled using
results prop which could be provided to it when the searchQuery changes and triggers some asynchronous search on data that may not be present in its entirety on the client.
I looked at
react-toastify but didn't really like how the API is imperative.Ended up choosing a different UI approach than toasts in the end: using a Modal that will show different outcomes (sucess / error / interaction state).
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?
@media only screen and (max-width: @largestMobileScreen) {
html {
font-size: 22px; !important
}
body {
font-size: 22px; !important
}
}
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 ] } }gulp build
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
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!
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/