semantic-org / semantic-ui-less Goto Github PK

Hi all,

I'm hoping to be able to use the LESS stuff in my application, and after a comment from @splendido on crater, I thought I'd have a quick look and see what I could get done.

Here is the initial set of changes I've made to the package to allow me to import it into a Meteor application.

The changes I made are fairly lightweight, but as far as I can see will not allow for external themes to be applied over the top, but it's a start! Here are the steps I took:

1. SemanticUI-LESS$ find . -type f -name "*.overrides" -exec mv "{}" "{}".import.less \;
2. SemanticUI-LESS$ find . -type f -name "*.variables" -exec mv "{}" "{}".import.less \;
3. Create default theme.config file (I changed themes/ to themes, and site/ to _site, and theme.less to theme.less.import.less)
4. Change theme.less totheme.less.import.lessortheme.import.less` (I used the former to follow the pattern I used on the overrides/variables files)
5. Update package.js to have .import.less on the files changed, and add theme.config to the addFiles array.

If you're not familiar with the less processor in Meteor, it will ignore files ending .import.less.

The package now processes all the remaining .less files in the order they are in the array provided to api.addFiles(). This order may need changing to match the build order if some parts of the LESS depend on others. My knowledge of LESS is rather shallow, and I've only really had a short look at the gulp build stuff.

A brief experiment has shown that I cannot set something like @button: 'amazon'; and have it affect the build process inside the package. My current plan is to find out if having the Semantic-UI-LESS package include only the default theme, and reference the main repository for any theme examples. If that works (I can't see why not), then my next investigation will be into whether I can use and imply the main package in a theme package and add my LESS theme into that as a custom package... we shall see!

Anyhow, this is the start I've made, let me know what you think etc :)

Planning on using this with my Elm app, and moving away from Bootstrap. At the moment we use Webpack to copy over the node_modules/font-awesome/fonts directory to our app's assets/fonts directory. Will I need to do something similar when using this LESS framework, or does it include the fonts already? Thanks.

Thanks for making this project!

Is there a list of all the variables available that we can define in our override files?

Hi, sorry if this is a dumb question, but I'm struggling to find any documentation that helps. I'm using gulp to build from semantic.less however I'm a little confused about the best way to use the included javascript. Do I just concatenate the files from behaviors, globals and modules? Is there a 'catch all' file like semantic.less? Can I just cherry-pick from the modules that I want to use or do I need to include the behaviors and site.js for proper functionality?

Thanks in advance.

There is a duplicated variable on themes/default/elements/button.variables file.

I do not want to use react-semantic-ui because it is a pain getting modules like dropdown to render correctly. I have all the styles and actionless components working with only this build through some webpack magic, but I cannot get the js files to register.

Right now I have an app with a client.js entry that imports the following:

semantic.js

//Import jQuery and define for Semantic-UI-Less Modules
import jQuery from 'jquery'
window.jQuery = jQuery

// Import the styles.
import 'web/styles/site.less'

// Glob the module js requirements.
const importAll = r => { r.keys().forEach(r) }
importAll(require.context('semantic-ui-less/definitions/', true, /\.js$/))

The app.js build is inflated by a couple megs, and I confirmed the code in there, but I cannot perform any js actions on the modules. For instance, $.fn.* seems to be set in the semantic js code, but $.fn is undefined when I attempt to access it via console.

Any pointers on getting this working will be greatly appreciated.

Note that jQuery and $ are globally available when tested from console.

Webpack 4 builds failed which included Semantic-UI less files that featured a web font:

Can't resolve './https://fonts.googleapis.com/css?family=Roboto' in '/MY_PROJECT_DIR/node_modules/semantic-ui-less/themes/material/elements'

The following comment on another repo answered my problem; Import url tries to resolve directory #67

To assist Webpack to load Semantic-UI less files, which include web fonts downloaded from a CDN such as Google, please add Less Import Option css.

For example; themes/material/elements/button.overrides would change from;

@import url(https://fonts.googleapis.com/css?family=Roboto);

.ui.primary.button:hover {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset,
    0px 2px 3px 0px rgba(0, 0, 0, 0.35) !important
  ;
}

.ui.secondary.button:hover {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset,
    0px 2px 3px 0px rgba(0, 0, 0, 0.3) !important
  ;
}

to;

@import (css) url(https://fonts.googleapis.com/css?family=Roboto);

.ui.primary.button:hover {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset,
    0px 2px 3px 0px rgba(0, 0, 0, 0.35) !important
  ;
}

.ui.secondary.button:hover {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset,
    0px 2px 3px 0px rgba(0, 0, 0, 0.3) !important
  ;
}

Can't load icon fonts using windows 7.
Add to change fontPath var from
@fontPath : '../../themes/default/assets/fonts';
to
@fontPath : '../assets/fonts';

Please add it to npm

Module build failed (from ./node_modules/less-loader/dist/cjs.js):

@theme: @@element;
      ^
Recursive variable definition for @placeholder
      in ..\node_modules\semantic-ui-less\theme.less (line 9, column 8)

Been getting this error with the 2.4.1 release and am trying to figure out what this means.

@import (multiple) "~semantic-ui-less/theme.less";

I do have the proper import.But I am just not sure where this error is coming form?
Any suggestions to tackle this error?

Checking the compiled css though, the animation is definitely defined and the property settings seem to be good. However, the loading animation will just stop there, as if the animation was not defined / incorrectly configured.

I didn't change/overwritten anything.

By loading animation I mean the rotating circular indicator you get when adding .loading to <form>.

I have an existing build system and I would like to customize Semantic UI. Is it possible to compile semantic.less using only lessc? I tried to compile semantic.less using only lessc and was outputted an erroneous CSS file.

The below code

<Icon name="gift" size="medium" /> {item.text} </Icon>

renders the below html

<i aria-hidden="true" class="gift medium icon"></i>

Here, the gift icon is overridden by medium icon.

2.2.13 on npmjs, why not?

semantic-ui-less 2.4.1
less 3.9.0
Running in a Rails 5.2 app using webpacker 3.5.5.

@borderWidth: 1px;
@attachedHorizontalOffset: -@borderWidth;
@attachedWidth: calc(100% + (-@attachedHorizontalOffset * 2));

results in @attachedWidth being calc(100% + (--1px * 2)), which is not valid.

I'm only having this happen in my development environment. Possibly a minifier/compressor is correcting to calc(100% + 2px).

Adding this override fixes it:

@attachedWidth: calc(100% + (@attachedHorizontalOffset * -2));

The actual version is 2.1.3, but on https://www.npmjs.com/package/semantic-ui-less is available only old 2.0.8.

I notice label has this rule:

.ui.basic.blue.label {
background-color: @basicBackground !important;
color: @blue !important;
border-color: @blue !important;
}

@basicBackground is a variable designed to specify the whole background property - not simply a color (none @white). Therefore, this is an invalid value and it falls back to the blue background.

I believe background-color should simply be set to @white for this rule. I made an override locally, but am thinking to submit a PR for this.

Without new Rule:

With new Rule:

I have a VueJS App and I want to integrate Semantic UI. I installed the package and necessary loaders. I keep getting an error when trying to compile:

These relative modules were not found:

* ./themes/themes/default/assets/fonts/brand-icons.eot in ./node_modules/css-loader??ref--10-oneOf-2-1!./node_modules/postcss-loader/lib??ref--10-oneOf-2-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-2-3!./node_modules/semantic-ui-less/semantic.less

In my theme.config I have the following lines

/*******************************
            Folders
*******************************/

/* Path to theme packages */
@themesFolder : "themes";

/* Path to site override folder */
@siteFolder  : 'site';


/*******************************
         Import Theme
*******************************/

@import "node_modules/semantic-ui-less/theme.less";

/* End Config */    

The ./themes/themes[...] is very suspisious, of course that folder structure doesn't exist.

Any suggestions? Thanks!

Shouldn't this use @groupedBoxShadow? Seems this variable isn't applied to any Group Segments besides the standalone version.

when trying to set the theme as material in theme.config, I get

Module not found: Error: Can't resolve './themes/material/assets/images/flags.png' in /node_modules/semantic-ui-less

way to reproduce - jus change set the theme in theme.config as material instead of default for all components.

solution - copying the images folder from the default theme to material solves the issue.

https://github.com/Semantic-Org/Semantic-UI-LESS/blob/master/definitions/collections/menu.less#L457 <-- This line overrides the definition for disabled items in inverted menus at https://github.com/Semantic-Org/Semantic-UI-LESS/blob/master/definitions/collections/menu.less#L1367, since the rule for non-inverted menus is defined with !important.

I have my own, custom Gulp build system that I'm trying to use with this repo. It's working great, except for one thing; I can't seem to change the path that the exported CSS looks for the icon sets on the server.

I tried putting @fontPath: "fonts"; in my site.variables file, but that didn't change anything.

Is there anyway to change this?

I'm trying to use semantic-ui-less with existing vue.js 2 project.
I'm getting the following:

 ERROR  Failed to compile with 1 errors                                                                                                  

 error  in ./node_modules/semantic-ui-less/semantic.less

Module build failed:

// load the styles
var content = require("!!../css-loader/index.js??ref--9-1!../postcss-loader/lib/index.js??ref--9-2!../less-loader/dist/cjs.js??ref--9-3!./semantic.less");
          ^
Unrecognised input
      in (some_path)/node_modules/semantic-ui-less/semantic.less (line 4, column 12)

Here's my webpack config:

  module: {
    rules: [
      {
       test: /\.css$/,
       use: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
     (...)
```
Any ideas what I'm doing wrong?

Hi,
is it possible to add composer.json to this repository? I would like to use this project as dependency on environments without node.js

Thank you

Quote from readme:

Before using source files you will need to create a theme.config by renaming theme.config.example, and a site folder by renaming _site/ to site/

So when I install it as dependency e. G. via NPM, you want me to make changes in vendor directory?
The components all import theme.config from the repositories own source location, which is as dependency a vendor directory.

Normally you have:

1. Variables configuration file
2. Separate component files
3. Root file, which bundles the separate components
4. Root file, which imports 1. and then 3.

This way, you can: simply use 4. or, in my case: copy 1. in my Project folder, modify it. Import it, then import 3. - voilà. A common approach for an easy task.

My first thoughts after finding this was: Okay, maybe wrong repo which is not intended for this type of usage, but:

I'v looked through all semantic repos and could not find any repo which is themable
via variables and does not introduce vendor hacking.

Sure I can just grab all the stuff and copy it into my project, or do other possible dirty things. But I work with dozens of other modules using webpack and all deps are resolved properly. I do not have vendor in VCS and if I update deps, everything is fine resolved and rebuild. Why must this repo be handled as an outsider with manual handling and dirty hacks?

Is there a reason, why the approach I'v mentioned above is not possible or used here? I assume a reason is there I'm not aware of, or its maybe planed change?

All LESS files should have .less file extension. It not only best practice to do so but also there are issues with webpack loaders which do not recognise and do not process correctly .variables and .overrides files. theme.config file should have .less extension as well.
Furthermore when including other less files, path should have .less extension (see for example semantic.less imports)

I just installed semantic-ui-less and used less-loader in order to include in my webpack setup. When i try to compile to project i got

module.exports = __webpack_public_path__ + "static/media/theme.05e4814c.config";
             ^
Unrecognised input
      in /Users/thupiceylons/wiseflow/app/src/localdata/reactjs/node_modules/semantic-ui-less/theme.config (line 1, column 15)

webpack: 3.8.1
less-loader: 4.0.5
less: 2.7.3

As far as i know the less loader is not able read theme.config :-) Or maybe somthing could be wrong with my webpack setup :-)

As noted in #30 (comment), 3.5.x versions of less breaks compatibility for inlining @-expressions within math operations.

ERROR in ./src/assets/styles/semantic/semantic.less (./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/assets/styles/semantic/semantic.less)
Module build failed: 

@ribbonMargin: 1rem;
@ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")";
^
Operation on an invalid type
      in [project root]/node_modules/semantic-ui-less/themes/default/elements/label.variables (line 133, column 0)
 @ ./src/assets/styles/semantic/semantic.less 2:14-136 21:1-42:3 21:134-42:2 22:19-141
 @ ./src/index.jsx
 @ multi webpack-hot-middleware/client whatwg-fetch ./src/index.jsx

less/less.js#3265 (comment) states that the changes have been reverted, but a new version has yet to come out. When the next version comes out, we should assert that this version. Edit: It seems this will not fix our problem, after all (see #46 (comment)).

there are some instances, step, dropdowns, rating, checkbox, accordion that use data:

/* Dropdown Carets */
@font-face {
  font-family: 'Dropdown';
  src:
    url(data:application/x-font-ttf;charset=utf-8;bas

As per
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src

This is unsafe, could you please replace this data: with references to specific assets inside semantic-ui folders?

Webpack currently is able to build this package semantic-ui without problems, but on production this is very unsecure use of data:

The solution is simple and just replacing this for the asset could fix it

Thanks

Hi !

Is there a way to remove some colors completely to reduce size of generated css ?
I do not use 60% of the colors and there is no benefit to compile them.

The same applies to sizes..

Thanks !

So I've set semantic-ui-less as an npm dependancy for my project, I then include @import "semantic-ui-less/semantic.less"; in my project less file and add the theme.config file next to it.

Run my project gulp file to compile the less and it complains:

Error: '../../theme.config' wasn't found. Tried - node_modules/semantic-ui-less/theme.config,../theme.config,../../theme.config in file node_modules/semantic-ui-less/definitions/modules/transition.less line no. 20

Can I not simply include semantic ui as a dependancy rather than having to commit the entire thing?

Confused!

If you try to include this module using require/require.resolve() then it will fail because you use a package.js file instead of a index.js which is the default file it looks for.

You don't have to rename the file however you should just add a key in the package.json file telling it which file to look for:
main: 'packages.js'

This causes issues for anyone trying to use this for their own modules.

Anyone familiar with this error?

 Error in plugin 'gulp-less'
Message:
    'site//modules/transition.overrides' wasn't found. Tried - /Users/hey/projects/superpages/frontend/semantic/site/modules/transition.overrides,site/modules/transition.overrides in file /Users/hey/projects/superpages/frontend/semantic/theme.less line no. 47
Details:
    type: File
    filename: /Users/hey/projects/superpages/frontend/semantic/theme.less
    index: 1082
    line: 47
    callLine: NaN
    callExtract: undefined
    column: 2
    extract:   @import "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";,  @import "@{siteFolder}/@{type}s/@{element}.overrides";,}
    lineNumber: 47
    fileName: /Users/hey/projects/superpages/frontend/semantic/theme.less

shapes.less contains this:

 .ui.shape.animating .sides {
  transition: @transition;
}

After providing my own themes.config, setting @transition to 'default' I get the following in the compiled semantic.css file:

.ui.shape.animating .sides {
  -webkit-transition: 'default';
  transition: 'default';
}

So it seems that @transition is resolved with the value in the themes.config file instead of the value in the shape.variables file.
This results in the shape animation transitions not working.

This is my webpack config for less files:

  module: {
    rules: [
      { test: /\.less$/, loader: ExtractTextPlugin.extract('css-loader?sourceMap!postcss-loader!less-loader?sourceMap') }
        ...
    ]
  },
  plugins: [
    ...
    new ExtractTextPlugin('./public/[name].css')
  ],
  devtool: '#source-map',
  entry: {
    semantic: './src/semantic.less'
  },
  output: {
    filename: './public/[name].css'
  }
};

Main repo release is at 2.2.6 for some time now but the less is not updated.

Please fix this, thanks.

After upgrading to 2.2.11, the scrollbar in <Menu> is always visible. Previously, it was autohidden when the user is not scrolling. I guess this is related to this: 35ae43a#diff-3d63baaee7a5b15570f2d403e194b021R134

Is there a reason why a simple scrollbar should be forced? Is this a bug or a feature?

v2.2.10

v2.2.11

Tried to run this with the latest LESS 3.x (3.0.0-alpha.3) release and got following error:

SyntaxError: variable @googleProtocol is undefined in C:\dev\teams-client-sdk\packages\semantic-ui-less\definitions\globals\site.less
on line 25, column 1:
24
25 .loadFonts();
26

Not yet sure why though.

Everything works fine with version 2.7.2.

In v2.3.0 and v2.3.1, <Modal> components does not appear horizontally and vertically centered, but instead in the top left, half way out of the screen.

Works in v2.2.14.

Used with semantic-ui-react v0.79.1.

Steps to Reproduce

Using Semantic Container Component with fluid passed as props still gets a max-width 1480px above 1200px

Expected

The Container should have width as 100% or auto if fluid prop has been passed.

Result

The Container does not is not fluid even though it gets the class fluid because .ui.container gets a max-width css property which is not overwritten when fluid class is added.

Doesn't work

@fontPath  : '../../themes/default/assets/fonts';

Works

@fontPath  : '../../../themes/default/assets/fonts';

Steps to repro:

1. Grab fresh 2.4.1 code
2. Rename theme.config.example to theme.config
3. Compile using lessc

The compilation should fail due to font lookup from [...]/themes/themes/default[...].

While semantic-ui and semantic-ui-sass are available in bower, semantic-ui-less is not. Would it be possible to get this added to bower?

So I have the following in my theme.config:

/*******************************
            Folders
*******************************/

/* Path to theme packages */
@themesFolder : 'src/themes';

/* Path to site override folder */
@siteFolder  : 'app/styles/site';

/*******************************
         Import Theme
*******************************/

@import "app/styles/theme.less";

/* End Config */

If I copy the themes folder and put it in the app/styles directory and then change @themesFolder to point to app/styles/themes, I get this after doing ember server:

NameError: variable @positiveTextShadow is undefined in bower_components/semantic-ui/src/definitions/elements/button.less on line 3212, column 16:
3211   color: @positiveTextColor;
3212   text-shadow: @positiveTextShadow;
3213   background-image: @coloredBackgroundImage;

File: bower_components/semantic-ui/src/definitions/elements/button.less (3212)
The Broccoli Plugin: [LessCompiler] failed with:
undefined

So what am I doing wrong? I am using the ember-cli-less package. I have the following in my ember-cli-build.js file:

var app = new EmberApp(defaults, {
        lessOptions: {
            paths: [
                'bower_components/semantic-ui',
                'app/pods/components'
            ]
        },
        outputPaths: {
            app: {
                css: {
                    app: "assets/css/project.css"
                },
                js: "assets/js/project.js"
            },
            vendor: {
                css: "assets/css/vendor.css",
                js: "assets/js/vendor.js"
            }
        },
        SemanticUI: {
            css: false,
            javascript: true,
            fonts: true,
            cssPath: "assets/css"
        },
    });

I tried getting this looked at on the Semantic-UI-ember repository, but they didn't help. What is the correct way to point to your own custom themes folder?

When running gulp I get "No gulpfile found".
Am I doing something wrong? Is there a clear guide on how to install semantic-ui-less?

Thanks,

When installing from npm (yarn), all themes/*/assets are missing now.

Installed with

⟩ yarn add semantic-ui-less --dev
yarn add v1.1.0
[1/5] Resolving packages...
[2/5] Fetching packages...
[3/5] Linking dependencies...
[4/5] Building fresh packages...
[5/5] Cleaning modules...
success Saved lockfile.
success Saved 1 new dependency.
└─ [email protected]
Done in 13.40s.

Assets grep:

⟩ find node_modules/semantic-ui-less | grep assets

And of course, my webpack build fails, now.

I use this template:

<html>
    <head>
        <meta charset="UTF-8">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.css" rel="stylesheet"/>
        <!--<link href="semantic.css" rel="stylesheet"/>--> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.js"></script>
    </head>
    <body>
        <form class="ui form">
            <div class="required field">
                <label>Nick</label>
                <div class="ui input">
                    <input type="text" placeholder="Nick" name="nick">
                </div>
            </div>
            <button class="ui submit button">Submit</button>
        </form>
        <script>
        $('form').form({
            nick: {
                identifier: 'nick',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Required'
                    }
                ]
            }
        },  {
            inline: true,
            on: 'blur'
        });
        </script>
    </body>
</html>

If I use semantic.css from dist, everything works.
But, if I compile semantic.css using less, transitions don't work.
I created a theme.config by renaming theme.config.example, and a site folder by renaming _site/ to site/

I use this command:

lessc node_modules/semantic-ui-less/semantic.less semantic.css

Due to this bug the promt label won't disappear.

When I import semantic-ui-less in my Vue Project, everything is setup. Getting this error.

Module build failed:


;(function ($, window, document, undefined) {
                                          ^
Missing closing ')'
      in /Users/Developer/ui/node_modules/semantic-ui-less/definitions/modules/transition.js (line 11, column 44)

If you pick a different secondaryPointingInvertedBorderColor value than secondaryPointingBorderColor, it would not be used.

Should we swap both those rules?

Bug Report

The @brandFontName variable is not consumed in icon.overrides as it should be.

Steps

I have an open PR with the fix.

Expected Result

If I want to use different icon libraries aside from those offered by SUI, overriding the @brandFontName variable should render the icons that I want.

Actual Result

Overriding the @brandFontName variable does not render my third-party icons.