spectacle: Full width / "fit" text feature.

[ryan-roemer]

Spectacle used to have a fit prop on many components that would fill the entire width of the slide -- either as single or multiple words. Here's a presentation where I used it variously:

• Source: https://github.com/ryan-roemer/surge2015/blob/master/presentation/deck.jsx
• Rendered: http://surge2015.formidablelabs.com/#/
• PDF: https://www.slideshare.net/RyanRoemer/wrangling-large-scale-frontend-web-applications

Old examples

In a heading

• http://surge2015.formidablelabs.com/#/title
• https://github.com/ryan-roemer/surge2015/blob/master/presentation/deck.jsx#L208-L217

        <Slide id="title" bgImage={images.polygons}>
          <Text bold fit caps textColor="primary" textFont="primary">
            Wrangling
          </Text>
          <Text bold fit caps textColor="primary" textFont="primary">
            Large Scale
          </Text>
          <Text bold fit caps textColor="primary" textFont="primary">
            Frontend Web Applications
          </Text>
          {/* ... *}
        </Slide>

With appear component

(Keep hitting arrow/space to see all. I'm pretty sure our appear feature is different then this now, but you get the idea.)

• http://surge2015.formidablelabs.com/#/7
• https://github.com/ryan-roemer/surge2015/blob/master/presentation/deck.jsx#L297-L317

        <Slide bgColor="tertiary" bgImage={images.polygonsGray}
          notes={notes(
            "Each of these trends are <b>scary</b>",
            "... and present great <b>opportunity</b>"
          )}>
          <Appear fid="1">
            <Heading bold fit caps textColor="lightestGray">
              Lots of JavaScript
            </Heading>
          </Appear>
          <Appear fid="2">
            <Heading bold fit caps textColor="primary">
              In the browser
            </Heading>
          </Appear>
          <Appear fid="3">
            <Heading bold fit caps textColor="lightestGray">
              Written by large teams
            </Heading>
          </Appear>
        </Slide>

With a background

• http://surge2015.formidablelabs.com/#/23
• https://github.com/ryan-roemer/surge2015/blob/master/presentation/deck.jsx#L609-L619

        <Slide bgImage={images.bgCowboyPilot} bgDarken={0.35}>
          <Heading bold fit caps textColor="lightestGray">
            The Fundamental Challenge:
          </Heading>
          <Heading bold fit caps textColor="primary">
            JavaScript is the
          </Heading>
          <Heading bold fit caps textColor="lightestGray">
            Wild, Wild West
          </Heading>
        </Slide>

Task

• Come up with something new for current spectacle. Might be a prop or maybe just a different component that works within the other components.