Scaling an entire site in Semantic UI

Question

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

I tried some CSS approaches like zoom: 80%; , but this does not work on firefox, although this is exactly what I was looking for when testing in google chrome.

Then I tried to use the conversion 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, which should have been 100% wide, are no longer executed.

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

Is there a CSS way or semantic user interface?

UPDATE:
For example, when you open a site with my resolution, the segments get a width of 1135 pixels, used by media css when the resolution is above 1200 pixels. I would like this width to be applied only for resolutions above 1300 or 1400 pixels, or instead the width of the segments was 1000 pixels with a resolution of 1200 pixels. I would prefer this to be set for all components in a standard way, instead of writing my own CSS for all elements to override the default behavior.

This is the current style that applies 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 to do this, instead of overriding any style related to size for all width specifications? I find the site too large when I open it on a screen with a width of about 1200.

Answer 1

I found a solution for this, so I am sharing it with the audience in case anyone else stumbles upon this problem.

I didn’t want to just redefine the CSS rules, since it seems very difficult to maintain, so I wanted to make it the standard semantic way of the user interface.

I ended up changing src/site/elements/container.variables and changing the default width for the large monitor, which is set to 1200 pixels by default:

@largeMonitorBreakpoint:1000px;

Thus, I guarantee that the breakpoint for large monitors is 1000 pixels instead of 1200 pixels, so the width of the containers is based on this value, so each container will take up to 935 pixels.

Answer 2

Semantic UI uses Gulp to compile CSS and Javascript for use in your project. You need to change the base font size so that your components are smaller. The point is that you must override this value before compiling. I am afraid that the Barry127 solution will not work properly, as the dimensions for several components have already been calculated at this point.

Change the size of the base 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 do not want to use the build tools provided with the Semantic UI, use your own (custom) Gulp functions. Read more about the topic here .

Never enlarge or reduce the entire document, this is not a good practice. There are also browsers that do not support the transform property. In addition, this can blur text and borders.

Answer 3

I think the semantic interface uses relative sizes for all elements, so setting a font size like this should do the trick:

 html, body { font-size: 14px; } 

The default value is mostly 16px