Scale down all site in Semantic UI

Question

I have a semantic ui site that I need to scale down, it all seems too zoomed in. I would like everything to be proportionally smaller, from fonts to containers and segments.

I have tried some css approaches such as zoom: 80%; but this does not work on firefox, even though it is exactly what I was looking for when testing it in google chrome.

I then tried using transform scale:

html {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8); 
    transform: scale(0.8);
}

The problem with this approach is that the header and footer that were supposed to have 100% width no longer do.

Is there a semantic ui way of doing this? I have used site.variables to change the color of some predefined color variables, but I don't know if I can do it to change default size for things, decreasing px or em for every element proportionally.

Is there a CSS or Semantic UI way of doing this?

UPDATE:
As an example, when opening the site with my resolution, segments get a width of 1135px, applied by a media css when resolution is above 1200px. I would like this width either to be applied only for resolutions above 1300 or 1400px, or instead have the width of the segments to be 1000px with 1200px resolution. I would however prefer this to be set for all components in a standard way, instead of needing to write custom css for all elements to override default behaviour.

This is the current style that is being applied to each container:

@media only screen and (min-width: 1200px)
.ui.container {
    width: 1135px;
    margin-left: auto !important;
    margin-right: auto !important;
}

Is there a better way of doing this, instead of overruling every size related style, for all width specifications? I find the site too big when I open it in a screen with a width near but above 1200.

Answer 1

Semantic UI uses Gulp to compile the CSS and Javascript for use in your project. You need the change the base font-size to make your components smaller. The thing is, you need to override this value before compiling. I'm afraid that that's why the solution of Barry127 won't work as expected, since the sizes for several components have already been calculated at this point.

Change the base size in {theme}/globals/site.variables:

/*-------------------
      Base Sizes
--------------------*/

/* This is the single variable that controls them all */
@emSize   : 14px;

/* The size of page text  */
@fontSize : 14px;

Now compile everything by running gulp build. If you don't want to use the build tools shipped with Semantic UI, use your own (custom) gulp functions. Read more about theming here.

Never up- or downscale the whole document, this is not a good practice. There are still browsers out there that don't support the transform property. Also, this may cause text and borders to appear blurry.