Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="root"></div>
              
            
!

CSS

              
                body {
  margin: 0;
  background-color: #171b21;
  font-family: "Roboto Mono", monospace;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffdd40;
  padding: 8px;
  position: sticky;
  top: 0;

  * {
    margin: 0;
  }

  h1 {
    font-size: 20px;
  }

  span {
    margin-left: 16px;
  }

  input {
    width: 64px;
  }

  label,
  input {
    font-size: 16px;
    margin-left: 16px;
  }
}

article {
  margin: 0 auto;
  color: #e8e9eb;

  img {
    display: block;
    width: 60%;
    margin: 1rem auto;
  }

  blockquote {
    border: 1px solid gray;
    border-radius: 4px;
    padding: 0 8px;
    margin: 0 auto;
    width: 60%;

    p {
      font-style: italic;
      font-size: 0.6em;
    }
  }
}

              
            
!

JS

              
                function clampBuilder(minWidthPx, maxWidthPx, minFontSize, maxFontSize) {
  const root = document.querySelector("html");
  const pixelsPerRem = Number(getComputedStyle(root).fontSize.slice(0, -2));

  const minWidth = minWidthPx / pixelsPerRem;
  const maxWidth = maxWidthPx / pixelsPerRem;

  const slope = (maxFontSize - minFontSize) / (maxWidth - minWidth);
  const yAxisIntersection = -minWidth * slope + minFontSize;

  return `clamp(${minFontSize}rem, ${yAxisIntersection}rem + ${
    slope * 100
  }vw, ${maxFontSize}rem)`;
}

function calculateCh(element, fontSize) {
  const zero = document.createElement("span");
  zero.innerText = "0";
  zero.style.position = "absolute";
  zero.style.fontSize = fontSize;

  element.appendChild(zero);
  const chPixels = zero.getBoundingClientRect().width;
  element.removeChild(zero);

  return chPixels;
}

const initialRootFontSize = Number(
  getComputedStyle(document.querySelector("html")).fontSize.slice(0, -2)
);

function Header({ rootFontSize, setRootFontSize }) {
  const [viewportWidth, setViewportWidth] = React.useState(innerWidth);

  React.useEffect(() => {
    addEventListener("resize", () => setViewportWidth(innerWidth));
  }, []);

  const rootFontSizeHandler = (e) => {
    setRootFontSize(e.target.value);
    document.querySelector("html").style.fontSize = `${e.target.value}px`;
  };

  return (
    <div className="header">
      <h1>Viewport width: {viewportWidth}px</h1>
      <span>|</span>
      <label htmlFor="root-font-size">Root font size (px):</label>
      <input
        id="root-font-size"
        type="number"
        value={rootFontSize}
        min={12}
        max={20}
        onChange={rootFontSizeHandler}
      />
    </div>
  );
}

function App() {
  const [rootFontSize, setRootFontSize] = React.useState(initialRootFontSize);
  const articleRef = React.useRef();

  React.useEffect(() => {
    articleRef.current.style.fontSize = clampBuilder(320, 960, 0.7, 2.1);
    articleRef.current.style.width = `${
      (320 / calculateCh(articleRef.current, "0.7rem")) * 0.8
    }ch`;
  }, [rootFontSize]);

  return (
    <div>
      <Header {...{ rootFontSize, setRootFontSize }} />
      <article ref={articleRef}>
        <img src="https://studio.uxpincdn.com/studio/wp-content/uploads/2015/10/responsive-web-design.png" />
        <h1>Responsive design</h1>
        <p>
          In the early days of web design, pages were built to target a
          particular screen size. If the user had a larger or smaller screen
          than the designer expected, results ranged from unwanted scrollbars to
          overly long line lengths, and poor use of space.
        </p>

        <p>
          As more diverse screen sizes became available, the concept of
          responsive web design (RWD) appeared, a set of practices that allows
          web pages to alter their layout and appearance to suit different
          screen widths, resolutions, etc. It is an idea that changed the way we
          design for a multi-device web, and in this article, we'll help you
          understand the main techniques you need to know to master it.
        </p>

        <h1>Diversity of devices</h1>

        <blockquote>
          <p>
            Day by day the number of devices, platforms that need to work with
            your site grows. Responsive web design presents a fundamental shift
            in how we will build websites for the decades to come.
          </p>
          <p>— Jeffrey Veen</p>
        </blockquote>

        <p>
          The display resolution or display modes of a digital television,
          computer monitor or display device is the number of distinct pixels in
          each dimension that can be displayed. It can be an ambiguous term
          especially as the displayed resolution is controlled by different
          factors in cathode ray tube (CRT) displays, flat-panel displays
          (including liquid-crystal displays) and projection displays using
          fixed picture-element (pixel) arrays.
        </p>

        <p>
          It is usually quoted as width × height, with the units in pixels: for
          example, 1024 × 768 means the width is 1024 pixels and the height is
          768 pixels. This example would normally be spoken as "ten twenty-four
          by seven sixty-eight" or "ten twenty-four by seven six eight" (in
          American English; in British English, usually "one oh two four by
          seven six eight").
        </p>
      </article>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

              
            
!
999px

Console