The article is the basic building block of a responsive website and should be used in preference to content with items like text, image or video.
Smaller images and videos don't need extra code to load a smaller version for mobile devices.
Design
This grid layout design helps to break up content and create space to make items eaier to find than if they are packed into tight rows of boxes.
There really doesn't seem to much to learn about website text although there are a number of important guidelines.
Apart from the main h1 heading all the text should use the same font. Serif fonts should be avoided and it is easier on the eye if the text is black with a slightly off white background or white or off white text on a black backround.
Avoid using a light colored or white text with a light background. One of the worst is white text on a light blue background which is guarenteed to cause eyestrain!
Bold Italic
Avoid using bold or italic text and never use letter spacing. About 20% of a website's visitors will have reading difficulties such as dyslexia and using these techniques shows that the designer is ignorant of these problems.
Google Fonts
Many Google hosted fonts that would be used for a heading don't have bold and/or italic variations.
The font used on this web page is the Google hosted Stint Ultra Expanded. To make it more prominent a 1px text shadow is added along with 1px of letter spacing to compensate.
Content Width
Content width text like this block of text should be no wider than 960px. Any longer makes it more difficult for the eye to jump from the end od a line to the beginning of the next.
The article has a heading, text and an optional link.
Overlap
The overlap is created using a background linear gradient with a color to the left and transparency to the right.
Adjusting the percentage width of the transparent section adusts the overlap.
Any item that reduces the amount of on screen content height is an asset when designing a responsive website.
Computer users are used to vertical scrolling. The content scrolls horizontally on vertical mouse/trackpad scroll.
Mobile touch device users are used to swiping left/right and will be familiar with this action.
Use the scroller to replace a grid of items like testimonialss for better mobile performance.
Each item has a heading, text, styled spans and an optional link for internal or external pages.
The optional header has an SVG icon to show direction and a heading.
The SVG icon shows vertical scroll arrows on computers. The icon is rotated to indicate horizontal scroll on mobile devices.
The grid can create a row of 2, 3 or 4 items. When 3 items are present the last one is centered in row two below the breakpoint.
Content
Each item has a header with icon and heading, text and an optional link
The heading can animate in from behind the icon when the info row appears in the viewport.
Timing
The animation time and delay time are set in milliseconds.
The animation can be staggered by checking a box.