Fomantic-UI | Fomantic-UI is the official community fork of Semantic-UI | User Interface library

I just switched from Semantic UI to the community maintained Fomantic UI in my Rails app, and get one of two obscure errors when using either the npm package or the sass rails gem.

1. With the npm package, I get Less::Error unmatched '/*' whenever the stylesheet_link_tags and such start to load fomantic assets in the document head. The fomantic styles and js are pulled into my project through the following two files:

   application.css.scss

   *= require 'semantic-ui/src/semantic

   application.js

   //= require semantic-ui/dist/semantic

   I notice that it works when I make both stylesheet and js load from semantic-ui/dist. However, doing that excludes a lot. Icons stop working. Relevant file stored in semantic-ui/src is semantic.less. Relevant files stored in semantic-ui/dist are semantic.min.css (which i do not require except for just now when switching things around to figure this out) and semantic.min.js (which i do require).

   Again, it "works" if I require the minified stylesheet in semantic-ui/dist, and it does not "work" if i require the semantic.less file in semantic-ui/src. Is this a problem with semantic.less or one of the other generated import files?

2. With the sass rails gem, I get a Sass::SyntaxError Invalid CSS after "i.icon.stopwatch.": expected class name, was "20:before".

   Looking at the source, I see a number of these declarations: i.icon.stopwatch.20:before {content: "\f96f";}.

   Why is that throwing an error?

Does this mean that the npm package and gem have invalid css or that my app is compiling incorrectly? I have no opinions about using the npm package or the gem, I just want it to work. Everything worked fine when I was using the old Semantic UI. I am extremely confused and would greatly appreciate the help. Thank you!

Any idea how to resolve this error? I get it when trying npm install:

npm ERR! Found: react@16.14.0 npm ERR! node_modules/react npm ERR! react@"^16.14.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.1" from react-card-flip@1.1.0 npm ERR! node_modules/react-card-flip npm ERR! react-card-flip@"^1.0.11" from the root project

The package.json has: "react-card-flip": "^1.0.11",

I removed the node_modules directory and the package-lock.json file.

I'm not sure where the reference to 1.1.0 is coming from. I DID try to install it earlier when trying to upgrade React 17, but ran into limitations with blueprintjs/core 3.39.0 requiring React 16.14.0.

Thanks for any ideas or help you can provide.

Full content of the package.json below in case that helps.

package.json content:

I would always have said no, but then I came across this code from Semantic UI (and Fomantic UI), a very popular front-end framework:

I'm using Fomantic-UI (Semantic-UI). I have a list with items that consist of an avatar, a text and a button. When the text is to wide to fit on one line, it should wrap to a second line. But instead, the whole line wraps to a new line under the avatar and the button. See the fiddle below:

https://jsfiddle.net/j2pguvko/8/

Without Vue/React I "developed" applications in Vanilla Javascript. There I used some libraries to reuse code from others. Take chart.js as an example: I used it to plot a chart in an election application.

Bootstrap, for example, has a package that is specific to Vue or React. What are the benefits of an specific "library" to the framework?

Now, let's see chart.js: out of my research I haven't found a specific package to Vue.js. How can I use it if so? What about CSS wrappers like Primer and Fomantic-ui? Can I do the same thing as in static applications?

Sorry if this is confuse somehow. If necessary, please ask me for clarification in the comments.

Any recommendations on how to migrate an existing Node project from using Semantic-UI to Fomantic-UI? I know Fomantic-UI is a fork of Semantic-UI and backward compatible, so I'm wondering if I can simply run:

• npm remove semantic-ui
• npm install fomantic-ui

Would I need do make any updates to the existing /semantic directory?

Thanks!

I'm building a static site with Fomantic-UI (Semantic-UI). When I created my menus, but before I wired them up to links, I noticed that the text of the dropdown link item changed when one of the submenu items was selected. Neat! But since I'm not using anything that preserves state, that change is not sustained, now that the links take you to a new page. I'm fine with that, but I don't like how the text changes briefly before the browser loads the new page. I would like to eliminate that change altogether.

Or, if there's a way to maintain that change on the new page, I'd be fine with that too.

Thanks!

Edit: Here's my code, but the fix will have to reference the framework's JS.

I'm using the latest versions of all Angular-related packages (so Angular 10).

I want to add some code to a component, but I only want this code to exist in dev, never in a production build. It needs to be completely stripped in prod builds. I found this comment, which indicates that environments do this automatically (because they're const).

I tried using that exact code in my app, but the dev code is still there in a production build. I copied the code over to a new test app that I made with ng new, and it does work properly there.

What things should I be looking for, how can I fix this? Is this possibly because I have CommonJS dependencies, and if so, can I do anything about that (since I can't remove those dependencies)?

Some notes:

• An issue has been opened on the angular-cli repo here.
• The environment object is never written to anywhere in the codebase, I've searched thoroughly. (It's only used in a few places anyway.)
• Code bounded with if (false) { } is properly stripped.
• Removing the services export from the end of environment{.prod}.ts does not fix the problem.
• Removing all CommonJS dependencies does not fix the problem.

Here's environment.prod.ts (environment.ts is the same, just with false instead of true):

I am trying to use Fomantic ui "toast". How can i provide z-index to the setting of the Toast?

I have tried this 'it works normally but not on the site i am working on'