EverWeb Widgets
Typing
The first typewriters were placed on the market in 1874, and the machine was soon renamed the Remington.
Features
Its original features that were still standard in machines built a century later were the cylinder with its line-spacing and carriage-return mechanism, the escapement which causes the letter spacing by carriage movement, the arrangement of the type bars so as to strike the paper at a common centre, the actuation of the type bars by means of key levers and connecting wires and printing through an inked ribbon.
The positions of the different characters on the keyboard conform almost exactly to the arrangement that is now universal.
Note
Mark Twain purchased a Remington and became the first author to submit a typewritten book manuscript.
Image + Typing Text Module
The item has an image and a text module which sit side by side on wider browser/device widths. Their relative width is discussed further down this page. On narrower screens, the text positions itself below the image.
Image
The image is inserted in an HTML5 figure element with an option to add a caption via the <figcaption> tag. The caption overlays the bottom of the image and has adjustable background opacity.
The figure element has controls for setting the border width, color and radius and can be configured as a hyperlink to open internal or external pages and in a new window if required.
Text
The text block is vertically center. It has a static heading, typed text and can have a box shadow as shown above.
There are separate selectors for selecting the caption font and the text font since the typed text would normally come from the monospace generic group.
The font used in this demo is the Google hosted "Special Elite".
Spans
The typed text can incorporate spans which have their own controls for font size, color weight and style. Follow the link below to find out more about the <span> tag.
Typed Text
The widget uses a jQuery plugin to generate the typed text. The text is actually inserted in a hidden <div> and then starts to appear in the container on page load.
The typing speed can be adjusted using a slider - the lower the setting the faster the speed. There is also a checkbox to turn on loop so that the typed text can be endlessly repeated.
Grid Item Width
With the CSS Grid Layout Module, items can have their width expressed in absolute or relative units. The most useful of these is the fractional unit .
The fractional unit is a new unit where 1fr defines 1 unit of the available space,
In the example above, when the items sit side by side, the image occupies 1fr and the text module 1.25fr. This defines their relative width to each other.
Both items are placed in grid-row 1. When the browser or device screen width is less than the break point, each item is set to occupy 1fr and the text module is placed in row 2.
Widget Item Width Controls
The controls will accept either fractional units or one item can have a fixed width by entering this as a number of pixels. Use any combination of units and values to get the required balance.
For example, on wider browser/device widths, the image could have a fixed width of 400px and the text set to 1fr to make it responsive.
Spacing
One of the really neat features about the grid layout is that the spacing between and around the grid items can be adjusted easily without breaking the grid layout. The grid-gap property adjusts both the column and the row spacing. For even more control, the gridd-column-gap and grid-row-gap can be used.
If the container's box-sizing is set to border-box, the top/bottom and left/right padding can also be adjusted without effecting the grid.
Column Footer
The footer on this page is an example of a three column grid layout. The footer is in the Grid Row [4] widgets pack. Follow the link below to see the pack contents.