Geekly Articles each Day
📜 ⬆️ ⬇️

Responsive and responsive typography with Hamster Framework. Treatment of hemorrhoids without surgery and pain

image


The modern Internet is developing at a tremendous pace and the number of users is growing every day. If literally 10 years ago, the average user was approximately “identical” and differed minimally in some parameters, now this difference is more significant and noticeable. Especially the difference is noticeable in difference devices and screen sizes. In daily traffic there is a very large number of users with different screen resolutions from the smallest to the largest. Poorly optimized sites have less time spent on the site. And so it is very important to optimize sites for comfortable perception of it on any device and resolution. As practice shows, most of the sites are very poorly adapted to various devices and sin with a number of typical problems. All these problems will be discussed at the beginning of the article on the example of several large sites. And then we begin to practice and we will lay out a page with an adaptive and responsive typography, for example, the documentation of the hamster framework .


If you are interested in this topic, then welcome under cat.



The problems discussed are the opinions of the author, and this opinion may differ from the user or the creators of these sites. The author does not intend to tarnish the reputation of these sites, discredit the honor, dignity and business reputation. These examples are given so that developers can improve their sites, make them closer to the end user and expand their audience. There will also be given optimization tips and examples of sites that, according to the author, are not badly optimized. For objectivity, selected examples of sites on different topics with minimal intersection.


Below are screenshots of sites with which we will work. The first two screenshots are made on a 4k monitor.


Desktop version of the site


Screen 1


image


Screen 2


image


Screen 3


image


Mobile version of the site


Screen 4


image


Problems



Tip: When prototyping a site, you should divide the screen into 4 equal parts and select 2 or 3 parts in the middle for the main content. If the main content of the site is an article, then the central unit should occupy 2/4 - 3/4 of the screen. Each line of the article should include the text of 45-70 characters, if it fits more, then you need to increase the font size for a given screen size. If the text is in the secondary block, then the optimal number of characters is 35-55. These values ​​are not taken from the ceiling, but are values ​​that were found empirically as a consequence of the development and improvement of typography over a large amount of time. The basis was the fact that this is the optimal distance for the eyes, to which they can run around the screen without turning the head and causing discomfort when reading. Visually showed the hardest movement for the eyes in the picture below. The larger the diagonal, the more difficult it is to move the eyes to the next line. This is discussed in more detail in the specialized literature.


image



Tip: Highlight the target audience of the site. Determine the main content that is used by the user; different analytical tools can help you with this (for example, popular queries that the user receives from search engines). The main content was highlighted in green. The rule is one - the main content of the block size and font, the secondary is less than or equal to the size of the main content. In some places you can add bold text. (To make the content important, there are only a couple of methods: larger size, italics (figure design), richness (massiveness in the case of the interface), color highlighting)


Tip2: To choose the optimal font size, you ideally need to have different devices. But you can use the keyboard shortcut ctrl + m in firefox. In chrome ctrl + shift + i , and then ctrl + m . The browser will open tools to test the adaptability of the site. Smoothly resize the screen and observe the changes that occur with the site. For the desktop version of the site, the optimal distance from the screen is ~ 75cm, for the tablet the arm's length, for smartphones, the distance is approximately half the arm's length. At this distance is the selection of font size! The size must be chosen in such a way that at this distance it would be comfortable to read all the visible content of the site.



You should not try to shove more blocks with a small font size. The design should be simple with a clear and understandable structure. The problem is highlighted in light red.
In this case, the red block must be reoriented to the horizontal orientation and inserted after some block. On the mobile version of the site, it is desirable to get rid of sidebars. And for the main content highlighted in green, you need to increase the font size. On the 4th site, the font for the mobile version of the site is very small for a screen width of 800 pixels. This size is the smallest among many sites. This size in my opinion is optimal for a screen width of 320-480 pixels.


Relatively well optimized sites:



At RT, it is worth noting the mobile version of the site, which is one of the best. Unfortunately, these sites are still poorly adapted to 4k resolution. The main thing to remember is that the site should be comfortably read on any device, especially at the end of the day when visual acuity decreases.


Here the reader can say: - "Everything, the problems are known. I will go to fix it faster." To which I can answer that you should not hurry. And below I will tell one psychological peculiarity of perception. I call it a bad habit.


Bad habit


If a person wore shoes for two years that rubbed on a callus and caused discomfort, then the person develops a habit. Now, if you give him comfortable and good shoes, he will simply answer: - "What terrible and uncomfortable shoes did you give me? Return my back !!!". This is due to the fact that they are very attached to this habit, and if they are drastically deprived of the opportunity to repeat this habit, then they feel discomfort as if they have lost part of themselves. For example, for this reason, psychotherapy specifically stretches the work for several sessions, although there are methods to quickly solve certain problems. Particularly gifted I can make every effort to bring this pain back and completely abandon a better life. For the same reason, all attempts to roll out a new version of the site are often met with users with discontent, and if the site is very large, then there will be a bunch of HYIP. And at this moment in any case you should not do polls types: "Do you like the new site design?". The answers are simply not indicative. And because of user dissatisfaction, it is easy to make a mistake - to return the old version of the site.


It is advisable to make all changes slowly, so that users will easily get used to the new design over time.


Well, with the theory we have finished and we can proceed to the sweetest - practice.


Practical part


We will impose a page: Documentation Hamster framework


The documentation also provides additional theoretical material that will be useful for review. Also, if something is not clear in the article, then many things are explained in the documentation.


Source codes available here: Github


If you simply describe the work of the Hamster Framework, then it is a language of macros and functions that can later be easily transformed into css code and any units of measurement. And the main advantage in comparison with preprocessors is the maximum readability of CSS and we know what properties we work with, plus a compact and simple syntax.


To begin with, if you do not have node.js installed, you need to download it from https://nodejs.org/en/ link and install it.


Create a working directory of the project. Start the console and go to the working directory with the command:


cd

Create a new project:


 npm init

Install the necessary npm extensions:


 npm install gulp gulp-sourcemaps gulp-postcss@6.4.0 precss postcss-hamster --save-dev

gulp-postcss@6.4.0 - you need to install this particular version, because at the time of publication there was a bug in the latest version and did not work correctly import .


Create in the directory gulpfile.js - this is the main file that we will run in the project.


 var gulp = require("gulp"), sourcemaps = require("gulp-sourcemaps"), postcssgulp = require("gulp-postcss"), precss = require("precss"), hamster = require("postcss-hamster"); gulp.task("css", function () { var processors = [precss({ "lookup": false }), hamster]; return gulp.src("./src/style.css") .pipe(sourcemaps.init()) .pipe(postcssgulp(processors)) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("./css")); }); gulp.task("default", ["css"]);

Next, create the base.css file in the src directory.


 /*@normalize;*/ @reset; @box-sizing-reset; nav { user-select:none; } body { font-family: @font-family; color: @font-color; background-color: #dee6ea; font-weight: @font-weight; height: 100%; position: relative; } @ruler;

@reset — Eric Meyer's “Reset CSS” 2.0 writes
@normalize - write normalize.
Choose what you prefer.


@ box-sizing-reset - will make a box-sizing reset. If you do not know what it is and what you need, you can look at this link: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/


@ruler - adds a grid for debugging vertical rhythm.


The remaining keywords starting with @ are constants that we define in the varibales.css file. Also in it are the main settings of the hamster framework. All hamster framewok settings are in the @hamster {} block - these are global settings. @ihamster {} is a local setting. @hamster end; resets local settings and returns global. For what it is necessary you can read in the documentation. Also in the documentation explained all the parameters.


For us the most important are:


font-size is the base font size, it is usually set to the p element and many string elements by default.
line-height - line spacing - vertical rhythm.
font-ratio - coefficient for modular scale.


For font sizes, we will use alpha aliases generated on the basis of a modular scale.


 @hamster { /* Base Font settings */ --font-size: 16px; /* line height in pixels like 24px or relative value like 1.5 without em, rem! */ --line-height: 1.35; --font-ratio: 1.2; --remove-comments: true; /* Vertical Rhythm settings */ --unit: rem; --px-fallback: true; --rem-fallback: false; --properties: extend; --ruler-style: switch ruler-debug; --ruler-color: rgba(2, 179, 228, .7); --ruler-icon-colors: #fff #02b3e4; --ruler-icon-position: "position:fixed;top: spacing(1.125);left: spacing(.625);"; --ruler-icon-size: spacing(.75); --ruler-pattern: 1 0 0 0; --ruler-scale: 4; --ruler-thickness: 1; --round-to-nearest-half-line: false; --min-line-padding: 1px; /* Custom Typography constants */ --font-weight: 400; --font-color: #304458; --header-color: #02b3e4; --sheader-color: #DA083D; --background-color: #f5f5f5; --block-color: #F2FBFF; --hover-color: #1bba13; --footer-color: #1C2733; --wrapper-background: #fff; --code-color: #faf9fa; --font-family: Roboto, "Open Sans", "PT Sans", "Segoe UI", "Helvetica Neue", Helvetica, Verdana, Tahoma, Arial, sans-serif; }

Next, create a file typography.css - this is the main file where the main styles for text elements will be stored. fs xxl will write the font size instead of a text alias named xxl. You can create your own aliases, as described in the hamster framework documentation.


Predefined aliases. The larger the number, the larger the font size.


 Alias Short Alias Size tiny t -2 small s -1 base b 0 medium m 1 large l 2 xlarge xl 3 xxlarge xxl 4 xxxlarge xxxl 5

The spacing () function multiplies the transmitted number in the parameters by the height of the line and returns the resulting size. For all units of measurement calculations occur automatically. The hamster framewok has several functions to calculate, but this is the most common. A full list of functions you can find on this link .


adjust-font-size : - for the font size, writes the font-size property and calculates the line spacing. The size can be set in px, em, rem.


 %strong { font-weight: 500; } %hlight { color: @sheader-color; } h1 { text-align: center; font-weight: 600; adjust-font-size: fs xxl; color: #fff; margin-top: spacing(1); margin-bottom: spacing(1); } h2 { @extend %strong; color: @header-color; adjust-font-size: fs xl; margin-top: spacing(2); margin-bottom: spacing(1); padding-left: spacing(1); padding-right: spacing(1); border-left: spacing(.2) solid @header-color; background: @code-color; } h3 { @extend %hlight; adjust-font-size: fs l; margin-top: spacing(2); margin-bottom: spacing(1); } h4 { @extend %hlight; adjust-font-size: fs m; margin-top: spacing(1); } h5 { @extend %hlight; adjust-font-size: fs b; margin-top: spacing(1); } h6 { @extend %hlight; adjust-font-size: fs s; margin-top: spacing(1); } strong { @extend %strong; } p { adjust-font-size: fs b; @hyphens; margin-bottom: spacing(1); } a { color: @header-color; &:hover { color: @font-color; } } ul, ol { adjust-font-size: fs b; list-style-position: inside; margin-bottom: spacing(1); } ul { list-style: disc inside; } ol { list-style: decimal inside; } ul a, ol a { text-decoration: none; } code, pre { font-family: "Roboto Mono", Inconsolata, monospace; margin: 0; padding: 0; text-align: left; tab-size: 4; hyphens: none; @forcewrap; }

Create the main style.css file and include the remaining files in it:


 @import "variables.css"; @import "base.css"; @import "typography.css";

Now we can safely enter in the console:


 gulp

At the output in the css directory we get the style.css file containing our styles. (The units of measurement can be any, we chose rem in the settings.)


 h1 { text-align: center; font-weight: 600; font-size: 2.0736rem; line-height: 2.7rem; color: #fff; margin-top: 1.35rem; margin-bottom: 1.35rem; } h2 { color: #02b3e4; font-size: 1.728rem; line-height: 2.7rem; margin-top: 2.7rem; margin-bottom: 1.35rem; padding-left: 1.35rem; padding-right: 1.35rem; border-left: 0.27rem solid #02b3e4; background: #faf9fa; } h3 { font-size: 1.44rem; line-height: 2.7rem; margin-top: 2.7rem; margin-bottom: 1.35rem; } ...

But one not a big deal - all the styles were generated for a base size of 16px. And our css is not at all adaptive and not responsive. We will correct this situation through media queries and generate different sizes for different screen sizes. The CSS code that we will duplicate will be copied using the macro @copy into a variable with the name "full", we can specify any arbitrary variable name. Next, by specifying the variable name with the parameter, using the @paste macro , we insert this css code. To begin with, we simply insert it as a fallback with 16 font size, if the browser does not support media queries. Media queries support ~ 98% of all browsers. And then our css in the style.css file will look like below.


 @import "variables.css"; @import "base.css"; @copy full { @import "typography.css"; } @paste full; @media screen and (max-width: 479px) { @ihamster { --font-size: 14px; --line-height: 1.25; } @baseline html; @ruler; @paste full; @hamster end; } @media screen and (min-width: 480px) and (max-width: 599px) { @ihamster { --font-size: 15px; --line-height: 1.3; } @baseline html; @ruler; @paste full; @hamster end; } @media screen and (min-width: 800px) and (max-width: 1279px) { @ihamster { --font-size: 18px; --line-height: 1.4; } @baseline html; @ruler; @paste full; @hamster end; } @media screen and (min-width: 1280px) and (max-width: 1599px) { @ihamster { --font-size: 19px; --line-height: 1.5; } @baseline html; @ruler; @paste full; @hamster end; } @media screen and (min-width: 1600px) and (max-width: 1919px){ @ihamster { --font-size: 20px; --line-height: 1.55; } @baseline html; @ruler; @paste full; @hamster end; }

Run:


 gulp

At the output we get an adapted typography for different screen sizes. Isn't it very simple? Do not worry when these manipulations will be saved all proportions of the size! All sizes are calculated as relative to the base size! For example, we can write adjust-font-size: 1.5rem, and the framework itself will calculate the size for the required units of measurement specified in the settings as unit.


It is a little inconvenient to select dimensions manually by experiment. But I went even further and made the first instrument in the world that automatically calculates the vertical rhythm based on the size of the visible area of ​​the browser.


How it works is described in the article .


Now our style.css will look like:


 @import "variables.css"; @import "base.css"; @copy full { @import "typography.css"; } @paste full; @media screen and (max-width: 799px) { @ihamster { --font-size: 14px; --line-height: 1.25; --to-font-size: 18px; --to-line-height: 1.4; --viewport: 320px 800px; --unit: vw; } @ruler; @paste full; @hamster end; } @media screen and (min-width: 800px) and (max-width: 1919px){ @ihamster { --font-size: 18px; --line-height: 1.4; --to-font-size: 21px; --to-line-height: 1.5; --viewport: 800px 1920px; --unit: vw; } @ruler; @paste full; @hamster end; } @media screen and (min-width: 1920px){ @ihamster { --font-size: 21px; --line-height: 1.5; --to-font-size: 42px; --to-line-height: 1.6; --viewport: 1920px 3840px; --unit: vw; } @ruler; @paste full; @hamster end; } 

 --font-size: 21px; //   ,     1920px --line-height: 1.5; //   ,     1920px --to-font-size: 42px; //   ,     3840px --to-line-height: 1.6; //   ,     3840px --viewport: 1920px 3840px; //      ,        . --unit: vw; //    vw +    calc

Run:


 gulp

As you can see, our css code reduced the number of media requests and reduced the size of the output file.


 @media screen and (max-width: 799px) { h1 { text-align: center; font-weight: 600; font-size: calc(1.728vw + 23.5008px); line-height: calc(3.2083vw + 24.7333px); color: #fff; margin-top: calc(1.6042vw + 12.3667px); margin-bottom: calc(1.6042vw + 12.3667px); } h2 { color: #02b3e4; font-size: calc(1.44vw + 19.584px); line-height: calc(3.2083vw + 24.7333px); margin-top: calc(3.2083vw + 24.7333px); margin-bottom: calc(1.6042vw + 12.3667px); padding-left: calc(1.6042vw + 12.3667px); padding-right: calc(1.6042vw + 12.3667px); border-left: calc(0.3208vw + 2.4733px) solid #02b3e4; background: #faf9fa; } h3 { font-size: calc(1.2vw + 16.32px); line-height: calc(3.2083vw + 24.7333px); margin-top: calc(3.2083vw + 24.7333px); margin-bottom: calc(1.6042vw + 12.3667px); } ... } @media screen and (min-width: 800px) and (max-width: 1919px){ h1 { text-align: center; font-weight: 600; font-size: calc(0.5554vw + 32.8814px); line-height: calc(1.125vw + 41.4px); color: #fff; margin-top: calc(0.5625vw + 20.7px); margin-bottom: calc(0.5625vw + 20.7px); } h2 { color: #02b3e4; font-size: calc(0.4629vw + 27.4011px); line-height: calc(1.125vw + 41.4px); margin-top: calc(1.125vw + 41.4px); margin-bottom: calc(0.5625vw + 20.7px); padding-left: calc(0.5625vw + 20.7px); padding-right: calc(0.5625vw + 20.7px); border-left: calc(0.1125vw + 4.14px) solid #02b3e4; background: #faf9fa; } h3 { font-size: calc(0.3857vw + 22.8343px); line-height: calc(1.125vw + 41.4px); margin-top: calc(1.125vw + 41.4px); margin-bottom: calc(0.5625vw + 20.7px); } .... } ...

Unfortunately, vw + calc supports only ~ 94% of browsers, plus there is an overhead for browser calculations. But this is the future and you can safely give the dimensions in vw for modern browsers.


Ps. Perhaps you may have noticed that on some screen sizes, the content on the documentation site floats slightly relative to the vertical-rhythm grid - this is due to the sub-pixel rendering technology and all browsers implement it differently and differently round the values. This is especially noticeable with the values ​​in calc. https://johnresig.com/blog/sub-pixel-problems-in-css/


If you want to speed up the project build up to 200ms, then I recommend disabling the cssnext postcss module (if you connect it in your project), and connecting the autoprefixer separately. As practice has shown, cssnext at least 5 times increases the speed of project assembly.


Let's sum up. As you can see, everything is very easy and simple, and we can generate large amounts of similar css code with minimal cost. The functionality is not limited to the generation of typography. You can generate adaptive dimensions for various elements, such as buttons, sidebar sizes, etc. Examples you can find HERE .


All suggestions and requests you can make in gitter. And you can also take part in the design and development of the project.


Support / Talk: Gitter
Documentation: RU


All easy layout and successful projects!



Regards, Hamster Framework Developer.


')

Source: https://habr.com/ru/post/328812/

More articles:


All Articles