Blockquotes

Adorama offers the best selection and prices on digital cameras, lenses, pro video, televisions and computers from top brands such as Canon, Nikon, Apple and Sony. Adorama Camera

<blockquote>
  Adorama offers the best selection and prices on digital cameras...
  <cite><a href="https://www.adorama.com/">Adorama Camera</a></cite>
</blockquote>

Buttons

<button class="button">Adorama</button>

The .button class is always required as a base class to style any button.

Sizes

Button Types

Modifier Classes

React CSS Modules

// First, import the button Sass partial in to your component stylesheet.

@import "path/to/buttons.scss";

.button {
  @include button;
}

// Then, call your button class on your element.

import Styles from './Styles.module.scss';

<button className={Styles.button}>Button</button>

Helpers

Helpers placeholder.

Icons

Download the latest iCons.ttf (version 4.0, updated 09/12/19)

Checkboxes

Radio Buttons

Text Inputs

Basic Text Input

Error Input

Form Group

Form Group Error

Responsive

Size Options

Standard media queries

Use these most of the time.

.class {
  display: none;

  @include small {
    display: block;
  }
}

Media query ranges

Use this when you want to only show content within specific screen sizes.

.class {
  display: none;

  @include mq($medium-only) {
    display: block;
  }
}

Media query upper ranges

Use this when you want to only show content until specific screen sizes. These media query variables will only work on the upper end. So you can only have one per selector at a time.

.class {
  display: none;

  @include mq($break-medium) {
    display: block;
  }
}

💡 Notes

We develop using mobile first media queries. All base styles are established on the base class for any given element. Media queries are used to extend new styles and functionality to elements.

Tooltips

Color Variables

Greys

Branding

Everything else

Layer Variables

Typography Variables

Headers

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Paragraph tags

Although few models were introduced, Nikon made movie cameras as well. The R10 and R8 SUPER ZOOM Super 8 models (introduced in 1973) were the top of the line and last attempt for the amateur movie field. The cameras had a special gate and claw system to improve image steadiness and overcome a major drawback of Super 8 cartridge design. The R10 model has a high speed 10X macro zoom lens.

Between 1933 and 1936 ‘The Kwanon’, a copy of the Leica design, Japan’s first 35 mm focal-plane-shutter camera, was developed in prototype form. In 1940 Canon developed Japan's first indirect X-ray camera. Canon introduced a field zoom lens for television broadcasting in 1958 and in 1959 introduced the Reflex Zoom 8, the world’s first movie camera with a zoom lens, and the Canonflex.

Fuji Photo Film Co., Ltd. was established in 1934 with the aim of being the first Japanese producer of photographic films. Over the following 10 years, the company produced photographic films, motion-picture films and X-ray films. In the 1940s, Fuji Photo entered the optical glasses, lenses and equipment markets. After the Second World War, Fuji Photo diversified, penetrating the medical (X-ray diagnosis), printing, electronic imaging and magnetic materials fields. In 1962, Fuji Photo and U.K.-based Rank Xerox Limited (now Xerox Limited) launched Fuji Xerox Co., Ltd. through a joint venture.

The company began in December 1949 in Nagano, Japan, when the Yashima Seiki Company was founded with an initial investment of $566. Its eight employees originally manufactured components for electric clocks. Later, they began making camera components, and by June 1953 had introduced their first complete camera, the Yashimaflex, a twin-lens reflex (TLR) medium-format camera designed for 6x6 cm medium format film. While the Yashimaflex used lenses labeled Tri-Lausar, successive models used Yashikor and Yashinon lenses. All of these lenses were manufactured for Yashica by the Tomioka Optical Works, beginning a relationship that would last for many years. Late in 1953, Yashima Seiki Company became Yashima Optical Industry Company, Ltd.

Font Weights

Visibility

Generic Show / Hide

Use these seletors for hiding elements.

If you need to show an element and use some other display property, like flex or table, don't use this style.

Logged in / Logged out

A class is added to the body to reflect the users logged in status.

Example

  <!-- .logged-in and .logged-out are the added classes on body -->

  <body class="logged-in">
    <p class="show-if-logged-in">Hello, Tsvetana</p>
    <p class="show-if-logged-out">Welcome to Adorama</p>
  </body>