Reduce semantic ui to bare minimum

[batata004]

Hi,

I am using "gulp build" to build semantic ui to the only really necessary code. However, after opening the generated "semantic.css" file I see there is lots of improvements that could be made. Maybe some of the ones I pointed below are already possible, so please excuse me and explain me how to proceed.

1. COLORS. Many times on my projects I use only blue/green/basic/inverted colors. So I wouldnt need that many color options inside my "semantic.css" file. Is it possible to set in the "semantic.json" file only the colors I will use?

2. BUTTONS. I dont really need "animated" buttons, "labeled" buttons, "social" buttons, "tertiary" buttons, "two, three, four..." buttons... Can I only have the option to use the most basic form of button (no icon, just text) but still being able to use the nice design of semantic?

3. SIZE. Sometimes I just use the "medium" and "small" in my entire projects. Is it really needed to import all the 8 sizes? I am not complaining about these size options, it's good and adds granularity control over the project. But sometimes I really only need 2 button sizes and nothing else.

People are talking so much on other threads regarding the dependecy or not of jquery in FOMANTIC UI, but devs should be really looking into adding more control of what users will have to download on their browsers to use FOMANTIC. There is no point removing jquery dependency (which only adds a few KBs gziped) while colors, sizes, buttons... add hundreds of KBs gziped.

[ColinFrick]

We added controls of the included colors with 2.7.0:
https://fomantic-ui.com/introduction/new.html#colors

Please keep the jQuery discussion in #374

[batata004]

Thanks! According to the documentation (in the link provided by you) I cant find the globals/colors.less file at https://github.com/fomantic/Fomantic-UI/tree/master/src/definitions/globals

I just want to know how do I specificy only some colors at site.variables to allow gulp to exclude all other colors.

Sorry about the jquery discussion here.

[lubber-de]

@batata004

Regarding the different variants of elements like buttons

We keep that in mind when designing the website to select and build only the components (and perhaps also only variants of those) you want. This of course would need to restructure all LESS files to accomplish this, so thanks for the idea, but it will take a while, i guess also as a second step.

Regarding colors

It's actually https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/colors.less
To remove colors you don't want, just remove each block starting with @ and the colorname from the @colors mixin

You don't need to change anything in site.variables, just keep everything. Colors, you dont want, won`t get compiled into the final css file, It's the final css-file that counts.

For example: If you only want to keep blue and green, remove everything else, so it results in

@colors: {
  @blue: {
    color          : @blue;
    light          : @lightBlue;
    border         : @blueBorderColor;
    background     : @blueBackground;
    header         : @blueHeaderColor;
    boxShadow      : @blueBoxShadow;
    boxFloatShadow : @blueBoxFloatingShadow;
    text           : @blueTextColor;
    lightText      : @lightBlueTextColor;
    hoverText      : @blueHoverTextColor;
    focus          : @blueFocus;
    lightFocus     : @lightBlueFocus;
    down           : @blueDown;
    lightDown      : @lightBlueDown;
    active         : @blueActive;
    lightActive    : @lightBlueActive;
    shadow         : @blueTextShadow;
    lightShadow    : @lightBlueTextShadow;
    hover          : @blueHover;
    lightHover     : @lightBlueHover;
    ribbon         : @blueRibbonShadow;
    invertedRibbon : @blueInvertedRibbonShadow;
    isDark         : false;
    isVeryDark     : false;
  };
  @green: {
    color          : @green;
    light          : @lightGreen;
    border         : @greenBorderColor;
    background     : @greenBackground;
    header         : @greenHeaderColor;
    boxShadow      : @greenBoxShadow;
    boxFloatShadow : @greenBoxFloatingShadow;
    text           : @greenTextColor;
    lightText      : @lightGreenTextColor;
    hoverText      : @greenHoverTextColor;
    focus          : @greenFocus;
    lightFocus     : @lightGreenFocus;
    down           : @greenDown;
    lightDown      : @lightGreenDown;
    active         : @greenActive;
    lightActive    : @lightGreenActive;
    shadow         : @greenTextShadow;
    lightShadow    : @lightGreenTextShadow;
    hover          : @greenHover;
    lightHover     : @lightGreenHover;
    ribbon         : @greenRibbonShadow;
    invertedRibbon : @greenInvertedRibbonShadow;
    isDark         : false;
    isVeryDark     : false;
  };  
}

[lubber-de]

Defining own color-names

As of FUI 2.7.0 you can also define any colorname you want. The name after @ defines it at a single place.

For example:
If you would like to invent the colorname batatablue to produce CSS like

.ui.batatablue.button {}
.ui.batatablue.label {}
.ui.batatablue.inverted.button {}
.ui.batatablue.inverted.segment {}

just add/change a mixin group named @batatablue

For simplicity the following example uses the same color-values/variables as usual blue, but you are free to define any color you like for each property:

@batatablue: {
    color          : @blue;
    light          : @lightBlue;
    border         : @blueBorderColor;
    background     : @blueBackground;
    header         : @blueHeaderColor;
    boxShadow      : @blueBoxShadow;
    boxFloatShadow : @blueBoxFloatingShadow;
    text           : @blueTextColor;
    lightText      : @lightBlueTextColor;
    hoverText      : @blueHoverTextColor;
    focus          : @blueFocus;
    lightFocus     : @lightBlueFocus;
    down           : @blueDown;
    lightDown      : @lightBlueDown;
    active         : @blueActive;
    lightActive    : @lightBlueActive;
    shadow         : @blueTextShadow;
    lightShadow    : @lightBlueTextShadow;
    hover          : @blueHover;
    lightHover     : @lightBlueHover;
    ribbon         : @blueRibbonShadow;
    invertedRibbon : @blueInvertedRibbonShadow;
    isDark         : false;
    isVeryDark     : false;
  };

[batata004]

@lubber-de I just did what you said and kept only two colors (primary and red) and I got 90kb reduction on the CSS file size! Pretty amazing that you devs added this type of control. Very professional of yours.

BUT after only allowing primary and red I discovered my Facebook button was still blue! It has no "blue" class, just "facebook" class and it still remains blue! I really need the "facebook" color (which is working fine!) BUT I am wondering that probably there are dozens of other classes like "twitter"... that ad color to stuff inside website. Is there a "socials.less" file so I can allow only the "facebook" color?

Side note: I loved the idea of changing any color just like the batatablue you demonstrated! Really impressive, this is a very powerful feature.

[lubber-de]

@batata004 Thanks for the praise 👍
Regarding the facebook button: Did you use ui facebook button ? This should work as before, because all social buttons have their own (official brand) color definition and are not supposed to use color names from the FUI color palette
Currently all social buttons are inside the button.less file, so separating them would be part of the above mentioned restructuring task

[batata004]

@lubber-de Exactly, I was using ui button facebook! I removed the social buttons from button.less (except facebook) and the final size of semantic.min.css got almost the same. So it does not worth changing it. BUT the colors, OMG it was incredible the reduction in size! I am very impressed.

Regarding the different sizes of elements I thank you for answering that question so I wont look no further into that. I am trying to reduce the final project size to as low as possible and the changes that you provided here and a few others that other people helped me into, saved me more than 50% of fomantic ui minified files! I really appreciate.