Utils

Some utils classes for creating neat, fluid layout easily.

Fixed header layout `.ev-fixed-header`

Sometimes, you want a fixed header layout. Without using fixed, because you don't know the precise height of your header. And without javascript, because, well, that's not efficient. This is where the .ev-fixed-header class comes handy. It uses the flex layout (compatible IE10+, firefox, chrome).

Utilisation is quite straight forward. The containing block is specified with the class .ev-fixed-header, the header(s) with the class .ev-header and the body .ev-body.

Some example of possible layout

Header and body

Greater flamingo

The greater flamingo (Phoenicopterus roseus) is the most widespread species of the flamingo family. It is found in parts of Africa, southern Asia (coastal regions of Pakistan and India), and southern Europe (including Spain, Albania, Turkey, Greece, Cyprus, Portugal, Italy and the Camargue region of France). Some populations are short distance migrants, and sightings north of the breeding range are relatively frequent; however, given the species' popularity in captivity, whether or not these are truly wild individuals is a matter of some debate. A single bird was seen on North Keeling Island (Cocos (Keeling) Islands) in 1988.

Header, body and footer

American flamingo

The American flamingo (Phoenicopterus ruber) is a large species of flamingo closely related to the greater flamingo and Chilean flamingo. It was formerly considered conspecific with the greater flamingo, but that treatment is now widely viewed (e.g. by the American and British Ornithologists' Unions) as incorrect due to a lack of evidence. It has also been known as the Caribbean flamingo, but the species' presence in the Galápagos makes that name problematic. It is the only flamingo which naturally inhabits North America.

More infos

Imbricated headers

Chilean flamingo

Characteristics

Two body two headers

James's flamingo

Feather

Newly hatched flamingos are gray or white. They gain color after 2 or 3 years of age. The active component that gives the feathers the pink color is the proteins alpha and beta-carotene (similar to carotene in carrots). A diet rich in carotene allows them to produce pigmented feathers. An adult has 12 main feathers designed for flight on each wing. The body is covered in contour feathers, which protect the bird and also help with waterproofing from a secretion of oil at the base of the feather.

Flight

Although in zoos flamingos usually appear stationary, they are able to fly. They have specific feathers used to take flight. These feathers are easily distinguished in James's flamingo's because they're the only black feathers on the bird. In order to begin flying they run a few steps and then begin to flap their wings. When they want to land, the opposite process occurs and as they touch down to a surface they continue to run as they decelerate they stop flapping their wings.

If the body or the header have a grid layout (ie, some of the block have a .col-**-** class) then the .row class must be moved out of the block, and put at the level of the container (the one which has the .ev-fixed-header class). This will prevent some scrollbar to display due to the negative margin on the row class.

Flex columns layout `.ev-flex-columns`

This class enable the fluid width equal height column layout . When the class is attributed to a container, all of its direct child will have the same height, and align in column layout.

Example: Three column layout

European hedgehog

The European hedgehog (Erinaceus europaeus: Linnaeus, 1758), or common hedgehog is a hedgehog species found in western Europe, from the Iberian Peninsula and Italy northwards into Scandinavia.It is a generally common and widely distributed species that can survive across a wide range of habitat types.

E. europaeus has a generalised body structure with unspecialised limb girdles. The animal appears brownish with most of its body covered by up to 6,000 brown and white spines.

This species is largely nocturnal. It has a hesitant gait, frequently stopping to smell the air. Unlike the smaller, warmer-climate species, the European hedgehog may hibernate in the winter. However, most wake at least once to move their nests.

Example: Three column with fixed headers

You can change the height, and watch the magic happens

Squirrel

Mexican fox squirrel

The Mexican fox squirrel, scientific name Sciurus nayaritensis, is a species of tree squirrel found throughout the Sierra Madre Occidental of Mexico as far south as Jalisco — and northward into the Chiricahua Mountains of southeastern Arizona, U.S.

This species, or its subspecies, is sometimes called the Apache, Nayarit, or Chiricahua fox squirrel. It has been evaluated as an IUCN Red List Least Concern species.

Neotropical pygmy squirrel

The Neotropical pygmy squirrel is the smallest species of tree squirrel native to the Americas, measuring on average just 10 cm (3.9 in) in head-body length, with an 11 cm (4.3 in) tail. Adults weigh from 30 to 48 grams (1.1 to 1.7 oz). The fur is grizzled grey over the body, with paler, but not sharply contrasting, fur on the underparts. The head is slightly reddish, with distinct white markings behind the ears, which are shorter and more rounded than on most other tree squirrels.

Vertical alignement

You can specify the vertical alignement very easily by adding a class to the container. For top alignement, it's .ev-align-start , for bottom, .ev-align-end. And centering vertically is very easy: .ev-align-center

Select the alignement:
ev-align-start ev-align-center ev-align-end

Pony

A pony is a small horse (Equus ferus caballus). Depending on context, a pony may be a horse that is under an approximate or exact height at the withers, or a small horse with a specific conformation and temperament. There are many different breeds.

Compared to other horses, ponies often exhibit thicker manes, tails and overall coat, as well as proportionally shorter legs, wider barrels, heavier bone, thicker necks, and shorter heads with broader foreheads. The word "pony" derives from the old French poulenet, meaning foal, a young, immature horse, but this is not the modern meaning; unlike a horse foal, a pony remains small when fully grown.

However, on occasion, people who are unfamiliar with horses may confuse an adult pony with a foal...

Sticky elements `.ev-top-sticky` `.ev-bottom-sticky`

Experimental: This isn't supported in all browser and should only be used to improve user experience

When out of the screen, the element stays at the top/bottom like a position absolute

My sticky top header

The springbok (Antidorcas marsupialis) is a medium-sized brown and white antelope-gazelle of southwestern Africa. It is extremely fast and can reach speeds of 100 km/h (62 mph) and can leap 4 m (13 feet) through the air. The common name "springbok" comes from the Afrikaans and Dutch words spring = jump and bok = male antelope or goat. The specific epithet marsupialis (Latin: marsupium, "pocket") derives from a pocket-like skin flap which extends along the middle of the back from the tail onwards. When the male springbok is showing off his strength to attract a mate, or to ward off predators, he starts off in a stiff-legged trot, jumping up into the air with an arched back every few paces and lifting the flap along his back. Lifting the flap causes the long white hairs under the tail to stand up in a conspicuous fan shape, which in turn emits a strong scent of sweat. This ritual is known as stotting or pronking from the Afrikaans meaning to boast or show off.