How to adjust the page width with CSS?

I am adjusting this blog to scale width dynamically. 

I am focusing on the desktop size as the mobile has a separate CSS code which works well.

What are the most popular Desktop display resolutions?

In 2022, the global statistics for the Desktop and Tablet display width are the following:

width x height	global usage %
1920×1080	21.5%
1366x768	16.7%
1536x864	10.6%
1280×720	5.8%
1440x900	5.4%
768x1024 (flipped to portrait)	3.8%

Based on the statistics, I decided to make to CUT OFF the width at about 1024 pixels wide. This matched my empirical experience of making the narrowest possible window with the tinies of fonts before the page is unusable.

Before you copy and paste my code into your page, please remember that,
like anything in life, it will require try-and-error practice.

// START HORIZONTAL / WIDTH SIZING SECTION 

body {

  width: 95%;   

//max-width: max-content;

margin: auto;

}

.columns-inner {         // container that hold both main and right columns 

width: 100%;

min-width: 670px;   // number above which the content starts sliding beyond RIGHT margin of the browser

}

.column-center-outer {

width: 75%;

}

.column-right-outer {  

width: 25%;

min-width: 14.1em;  // empirically derived, moves the RIGHT colunm to the BOTTOM if it shrinks to less than that

}

// END HORIZONTAL / WIDTH SIZING SECTION 

What were the results of the width adjustments?

The full 2K display looks like this

The minimal "full-width" page looks like this

and, the minimal page width looks like this

Summary

Overall, I am very happy with the result. It took way too long, but it was fun to get back into HTML and CSS Web development, it is something, I used to be very good at but did not practice for a while.

Resources:

• Statistics are taken from https://gs.statcounter.com/

How to add a new font to your HMML pages using the Google Fonts service?

When designing a Web page, it is crucial that the fonts we choose actually show up for the viewer. 

In order to do that we have to ensure the right font is being downloaded to the viewer's browser.

How can I find and download fonts?

Usually, you would find and download the font you like from the Internet, then post it on your Web server and reference it on the given page.

In the case of the Blogger, I do not know how to do that, but I use a handy service provided by Google Fonts that will hos the fonts for me.

How do I implement a font into my page?

Here are the simple steps (refer to the images)

1. Open Google Fonts and find the one you like, in my case Garamond.
2. Select a couple of variants in my case:
   - regular 400 weight
   - regular 400 weight, italic
   - bold 700
3. On the RIGHT panel, a <link> is created, copy it.
4. Pase the <link> into your HTML template HEAD section.
5. Please note the proper usage for the CSS rules:
   font-family: 'EB Garamond', serif;
6. Update your body HTML tag with the 
   
   

Opening Blogger Theme > Edit HTML

Example of the LINK tags

<!-- START: Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400&#38;display=swap" rel="stylesheet" />
<!-- END: Uki's changes -->


</head>

NOTE: My code differs from that provided by Google Fonts in order to FIX a couple of the parser problems:

• Attribute name "crossorigin" associated with an element type "link" must be followed by the ' = ' character.
• The reference to entity "display" must end with the ';' delimiter.

How to set up the body CSS rules

body {

  font-style: normal;

font-weight: normal;

font-family: 'EB Garamond', serif; // from "Google Fonts" service

font-size: 1.2rem; // 120% of browser setting, because bigger is better

  color: #6f6f6f;

  background: $(body.background); // mountains

}

Design Tips

• Do not use more than a couple of fonts on the page,
  in my case, I use Garamond for writing and MONO for CODE samples.
• Identify your page's font in the body CSS and nowhere else,
  other tags can change the weight (normal, bold) and size 1.6rem

Share it

If you liked this post, please share it with the following accreditation:

Uki D. Lucas. 2022. http://uki.blogspot.com/2022/07/fonts.html

References

• Google Fonts: Garamond:
  https://fonts.google.com/specimen/EB+Garamond?query=Garamond

Formatting CODE SAMPLE in Blogger

To display my code in Blogger I use this snippet of CSS in my HTML


<pre style="border: 1px dashed rgb(153, 153, 153); color: black; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; margin: 5px; width: 90%;">    
MY CODE SAMPLE
</pre>

and it looks like that:

     
MY CODE SAMPLE

Formatting CODE SAMPLE in Blogger

To display my code in Blogger I use this snippet of CSS in my HTML


<pre style="border: 1px dashed rgb(153, 153, 153); color: black; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; margin: 5px; width: 90%;">    
MY CODE SAMPLE
</pre>

and it looks like that:

     
MY CODE SAMPLE

How to create a label with an image background in GWT

In order to create a label with an image background, you will need to use an AbsolutePanel with an image background defined in CSS and add a Label to it. The reason behind using an AbsolutePanel is because this type of panel allows for positioning all children absolutely, allowing them to overlap. Keep in mind however that you will have to resize the panel to allow room for all its children because it will NOT resize automatically.

Here is a sample implementation of how this worked for me:

Java code in Samle.java:

AbsolutePanel absolutePanel = new AbsolutePanel();

absolutePanel.setStyleName("my_css_def");

Label myLabel = new Label("Hello world!");

absolutePanel.add(myLabel);

mainContainer.add(absolutePanel);

CSS definition in Sample.css file: 

.my_css_def {

background-image: url("../images/myPath/bg_image.png"); !important;

height: 73px;

width: 108px;

}

How to create a label with an image background in GWT

In order to create a label with an image background, you will need to use an AbsolutePanel with an image background defined in CSS and add a Label to it. The reason behind using an AbsolutePanel is because this type of panel allows for positioning all children absolutely, allowing them to overlap. Keep in mind however that you will have to resize the panel to allow room for all its children because it will NOT resize automatically.

Here is a sample implementation of how this worked for me:

Java code in Samle.java:

AbsolutePanel absolutePanel = new AbsolutePanel();

absolutePanel.setStyleName("my_css_def");

Label myLabel = new Label("Hello world!");

absolutePanel.add(myLabel);

mainContainer.add(absolutePanel);

CSS definition in Sample.css file: 

.my_css_def {

background-image: url("../images/myPath/bg_image.png"); !important;

height: 73px;

width: 108px;

}

Transparency Setting for ALL Browsers

Below is CSS definition that creates transparency for all browsers:

.opacity_70 {

filter:alpha(opacity=70);     /**for IE8*/

-moz-opacity:0.7;             /**for Mozilla*/

-khtml-opacity: 0.7;          /**for Safari 1.x*/

opacity: 0.7;                 /**for FireFox*/

}

Transparency Setting for ALL Browsers

Below is CSS definition that creates transparency for all browsers:

.opacity_70 {

filter:alpha(opacity=70);     /**for IE8*/

-moz-opacity:0.7;             /**for Mozilla*/

-khtml-opacity: 0.7;          /**for Safari 1.x*/

opacity: 0.7;                 /**for FireFox*/

}

CSS override

To override any CSS on an element, use !important as below

#my_widget_id {

background-color: #191919 !important;
/*#191919 is gray */

}

CSS override

To override any CSS on an element, use !important as below

#my_widget_id {

background-color: #191919 !important;
/*#191919 is gray */

}

GWT Formatting Best Practices

• Do NOT use FlexTable to create input forms.
• Use CSS to style elements 
• Use CSS to style column width and alignment
• Use modular code, i.e. group of radio buttons could be a separate method or a class 
• Do NOT use indices to format, rather use logical object and methods

Example 1
Code before re-factoring:

contentTable.getFlexCellFormatter().setWidth(BULLETIN_INDEX_6_ANNOUNCEMENT, 0, "25%");

contentTable.getFlexCellFormatter().setColSpan(BULLETIN_INDEX_12_DESTINATION_MESSAGE, 1, 2);

contentTable.getFlexCellFormatter().setAlignment(BULLETIN_INDEX_0_SPORT, 0, HasHorizontalAlignment.ALIGN_RIGHT, HasVerticalAlignment.ALIGN_MIDDLE);

Code after re-factoring:
myStyles.css:

.admin_message_form_left_column {

width: 170px;

text-align: right;

padding: 5px;

background-color: yellow;

}

.admin_message_form_right_column {

padding: 5px;

background-color: blue;

}

MyClass.java:

this.left.setStyleName("admin_message_form_left_column");

this.right.setStyleName("admin_message_form_right_column");

Example 2

Code before re-factoring:
contentTable.setWidget(BULLETIN_INDEX_1_DIVISION, 0, noWrapLabel("Division:"));
contentTable.setWidget(BULLETIN_INDEX_1_DIVISION, 1, divisionList);

Code after re-factoring:

divSelector.setLeft(noWrapLabel("Division:"));
divSelector.setRight(divisionList);
divSelector.setVisible(true);

GWT Formatting Best Practices

• Do NOT use FlexTable to create input forms.
• Use CSS to style elements 
• Use CSS to style column width and alignment
• Use modular code, i.e. group of radio buttons could be a separate method or a class 
• Do NOT use indices to format, rather use logical object and methods

Example 1
Code before re-factoring:

contentTable.getFlexCellFormatter().setWidth(BULLETIN_INDEX_6_ANNOUNCEMENT, 0, "25%");

contentTable.getFlexCellFormatter().setColSpan(BULLETIN_INDEX_12_DESTINATION_MESSAGE, 1, 2);

contentTable.getFlexCellFormatter().setAlignment(BULLETIN_INDEX_0_SPORT, 0, HasHorizontalAlignment.ALIGN_RIGHT, HasVerticalAlignment.ALIGN_MIDDLE);

Code after re-factoring:
myStyles.css:

.admin_message_form_left_column {

width: 170px;

text-align: right;

padding: 5px;

background-color: yellow;

}

.admin_message_form_right_column {

padding: 5px;

background-color: blue;

}

MyClass.java:

this.left.setStyleName("admin_message_form_left_column");

this.right.setStyleName("admin_message_form_right_column");

Example 2

Code before re-factoring:
contentTable.setWidget(BULLETIN_INDEX_1_DIVISION, 0, noWrapLabel("Division:"));
contentTable.setWidget(BULLETIN_INDEX_1_DIVISION, 1, divisionList);

Code after re-factoring:

divSelector.setLeft(noWrapLabel("Division:"));
divSelector.setRight(divisionList);
divSelector.setVisible(true);

CSS sprites

CSS sprites are a great way to SPEED UP your application, and simplify the design changes. You save in two ways:

1) amount of HTTP calls, each call has a relatively large overhead compared to small icon file it fetches

2) putting many small files into single saves a lot of "weight" as well

Take example of these icons, each about 37 kb...

When combined into a single file they weight ONLY 49 kb, that is from about total of 250 kb, including all other icons I have put into it.

You want to put your files into a narrow image to make it convenient for yourself, you will use your favorite graphic tool (Pixelmator, Photoshop) to measure where the icon starts. I made all my icons 30 pixel tall.

Here I am interested in Facebook (heart icon) and I see that it starts at about 1264 pixels (X coordinate), since Y is ALWAYS at 0 pixels, and width and height are 30 pixel, that is all I need...

Finally, I write a simple to understand CSS style:

.icon_favorite {

background: url("images/icons001.png") no-repeat;

background-position: -928px 0px;

width: 30px;

height: 30px;

cursor: pointer;

}

.icon_facebook {

background: url("images/icons001.png") no-repeat;

background-position: -1264px 0px;

width: 30px;

height: 30px;

cursor: pointer;

}

.icon_edit {

background: url("images/icons001.png") no-repeat;

background-position: -1299px 0px;

width: 30px;

height: 30px;

cursor: pointer;

}

Then GWT code to use that style, notice I use HTML, not Image for that icon.

HTML submitToFacebook = new HTML("");

submitToFacebook.setStyleName("icon_facebook");

submitToFacebook.setTitle("Click to post this recipe on Facebook");

...

HTML edit = new HTML("");

edit.setStyleName("edit_facebook");

edit.setTitle("Click to edit this recipe");

...

And that is it...

Updated (after receiving some feedback):

I still like the CSS sprites solution because it gives a full control to the graphic (HTML/CSS) designer, but GWT developers should definitely take a look at ImageBundle.

CSS sprites

CSS sprites are a great way to SPEED UP your application, and simplify the design changes. You save in two ways:

1) amount of HTTP calls, each call has a relatively large overhead compared to small icon file it fetches

2) putting many small files into single saves a lot of "weight" as well

Take example of these icons, each about 37 kb...

When combined into a single file they weight ONLY 49 kb, that is from about total of 250 kb, including all other icons I have put into it.

You want to put your files into a narrow image to make it convenient for yourself, you will use your favorite graphic tool (Pixelmator, Photoshop) to measure where the icon starts. I made all my icons 30 pixel tall.

Here I am interested in Facebook (heart icon) and I see that it starts at about 1264 pixels (X coordinate), since Y is ALWAYS at 0 pixels, and width and height are 30 pixel, that is all I need...

Finally, I write a simple to understand CSS style:

.icon_favorite {

background: url("images/icons001.png") no-repeat;

background-position: -928px 0px;

width: 30px;

height: 30px;

cursor: pointer;

}

.icon_facebook {

background: url("images/icons001.png") no-repeat;

background-position: -1264px 0px;

width: 30px;

height: 30px;

cursor: pointer;

}

.icon_edit {

background: url("images/icons001.png") no-repeat;

background-position: -1299px 0px;

width: 30px;

height: 30px;

cursor: pointer;

}

Then GWT code to use that style, notice I use HTML, not Image for that icon.

HTML submitToFacebook = new HTML("");

submitToFacebook.setStyleName("icon_facebook");

submitToFacebook.setTitle("Click to post this recipe on Facebook");

...

HTML edit = new HTML("");

edit.setStyleName("edit_facebook");

edit.setTitle("Click to edit this recipe");

...

And that is it...

Updated (after receiving some feedback):

I still like the CSS sprites solution because it gives full control to the graphic (HTML/CSS) designer, but GWT developers should definitely take a look at ImageBundle.

How to separate UI from code in GWT

1. Create a general structure in HTML with all DIVs that represent major widgets

<script type="text/javascript" language="javascript" src="myapp/myapp.nocache.js"></script>

</head>

<body>

<div id="header">

<h1>Welcome to My App</h1>

<div id="facebook_login"></div>

</div>

<div id="tool_tip"></div>

<table id="main_content">

<tr>

<td id="left_column">

<div id="list_of_products"></div>

</td>

...

2. Style the widgets in CSS

#header h1 {

background-color: yellow;

border-style: dotted;

font-size: xx-large;

}

3. Build the widgets in Java. Note: widgets are composites of various HTML elements and can have their own CSS styling.

RootPanel.get("facebook_login").clear();

RootPanel.get("facebook_login").add(new FbLogin(session));

HtML UI Standardization and CSS override

It is important in large applications to standardize HTML elements styling in order to avoid UI inconsistencies. More importantly, standardizing styling of HTML tags reduces the need for using CSS (Cascading Style Sheets) for each HTML element separately, which mean less overhead and less time to initial page load.

Here is how it works:

1. Create a HtmlUtil.java class:

    public static String h1(String text)

    {

return "<h1 class='h1'>" + text + "";

    }

2. Create main.css:

h1,.h1 {

font-size: x-large;

font-weight: bold;

padding: 4px;

margin: 4px;

}

h2,.h2 {

font-size: large;

color: gray;

padding: 4px;

margin: 5px;

}

...

3. Use HTML tag to override any CSS styling:

HTML panel = new HTML(HtmlUtil.h3("your text here..."));

Note that functions have HTML tag name as well as a CSS function name, in which you can use the latter to style Element like lable, VerticalPanel, etc.

HtML UI Standardization and CSS override

It is important in large applications to standardize HTML elements styling in order to avoid UI inconsistencies. More importantly, standardizing styling of HTML tags reduces the need for using CSS (Cascading Style Sheets) for each HTML element separately, which mean less overhead and less time to initial page load.

Here is how it works:

1. Create a HtmlUtil.java class:

    public static String h1(String text)

    {

return "<h1 class='h1'>" + text + "";

    }

2. Create main.css:

h1,.h1 {

font-size: x-large;

font-weight: bold;

padding: 4px;

margin: 4px;

}

h2,.h2 {

font-size: large;

color: gray;

padding: 4px;

margin: 5px;

}

...

3. Use HTML tag to override any CSS styling:

HTML panel = new HTML(HtmlUtil.h3("your text here..."));

Note that functions have HTML tag name as well as a CSS function name, in which you can use the latter to style Element like lable, VerticalPanel, etc.