Building your first page

Its really simple to build your first page with BAgel using a few components

First component

To get started with BAgel the first component you should add to your page is the ba-page-segment component.
<ba-page-segment> gives components within it the correct horizontal spacing on a page and also allows you to set a theme for the background, which all subsequent components within it will follow.

Adding `ba-page-segment` to your page

<script>
  <html>
    <head>
      <script>
        window.BAGEL_HELPER_ENABLED = true
      </script>
    </head>
    <body>
      <main>
        <ba-page-segment></ba-page-segment>
      </main>
    </body>
  </html>
</script>

You can also add multiple ba-page-segments to a page. Segments of the same theme will have their top padding removed.

Adding `ba-page-segment` to your page

<script>
  <html>
    <head>
      <script>
        window.BAGEL_HELPER_ENABLED = true
      </script>
    </head>
    <body>
      <main>
        <ba-page-segment>
          <!-- Has padding top and padding bottom -->
        </ba-page-segment>
        <ba-page-segment>
          <!-- Has only padding bottom -->
        </ba-page-segment>
        <ba-page-segment theme="sale">
          <!-- Has padding top and padding bottom -->
        </ba-page-segment>
        <ba-page-segment theme="sale">
          <!-- Has only padding bottom -->
        </ba-page-segment>
      </main>
    </body>
  </html>
</script>

Adding a grid

One of the easiest ways of creating web pages is by laying items out on a grid, for this we have ba-grid.

<ba-grid> allows you to layout your components on a grid in a variety of ways, with the ability to control the spacing, number of columns and adapt this across breakpoints.

Adding `ba-grid` to your page

<script>
  <html>
    <head>
      <script>
        window.BAGEL_HELPER_ENABLED = true
      </script>
    </head>
    <body>
      <main>
        <ba-page-segment>
          <ba-grid></ba-grid>
        </ba-page-segment>
        <ba-page-segment theme="blue-200">
          <ba-grid columns-640vw="2"></ba-grid>
          <!-- Setting 1 column at the 320px viewport and 2 columns at the 640px viewport and wider -->
        </ba-page-segment>
        <ba-page-segment theme="midnight-500">
          <ba-grid columns-800vw="4" columns-1024vw="2"></ba-grid>
          <!-- Setting 4 columns at the 800px viewport, and then reducing to 2 columns at the 1024px viewport and wider -->
        </ba-page-segment>
      </main>
    </body>
  </html>
</script>

Adding content

When adding content to your page there are 2 main ways.

For text content use the ba-content component. This component is a wrapper to be used around any text content, and provides the correct font, spacing and styling to all text.
For images use the ba-image component. <ba-image> is used to accessibly show images on a page and provides popular aspect ratios for displaying them.

Adding content to your page

<script>
  <html>
    <head></head>
    <body>
      <main>
        <ba-page-segment>
          <ba-grid>
            <ba-content>
              <h1>Minim tempor do laborum laborum.</h1>
              <p>
                Aliquip dolor deserunt non duis adipisicing occaecat Lorem voluptate. Sit enim officia dolore nostrud ex
                commodo mollit adipisicing consequat cupidatat. Duis cupidatat incididunt ex dolore magna. Tempor reprehenderit occaecat sint cillum
                adipisicing dolore et et do. Aliquip occaecat ipsum adipisicing culpa non fugiat veniam ut incididunt mollit veniam ad.
              </p>
            </ba-content>
          </ba-grid>
        </ba-page-segment>

        <ba-page-segment theme="blue-200">
          <ba-grid columns-640vw="2">
            <ba-image src="/demo-image.jpg" alt="Demo image" aspect-ratio="16-9"></ba-image>
            <ba-content>
              <p>
                Aliquip dolor deserunt non duis adipisicing occaecat Lorem voluptate. Sit enim officia dolore nostrud ex
                commodo mollit adipisicing consequat cupidatat. Duis cupidatat incididunt ex dolore magna. Tempor reprehenderit occaecat sint cillum
                adipisicing dolore et et do. Aliquip occaecat ipsum adipisicing culpa non fugiat veniam ut incididunt mollit veniam ad.
              </p>
            </ba-content>
          </ba-grid>
        </ba-page-segment>

        <ba-page-segment theme="midnight-500">
          <ba-grid columns-800vw="4" columns-1024vw="2">
            <ba-content>
              <p>
                Aliquip dolor deserunt non duis adipisicing occaecat Lorem voluptate. Sit enim officia dolore nostrud ex
                commodo mollit adipisicing consequat cupidatat. Duis cupidatat incididunt ex dolore magna. Tempor reprehenderit occaecat sint cillum
                adipisicing dolore et et do. Aliquip occaecat ipsum adipisicing culpa non fugiat veniam ut incididunt mollit veniam ad.
              </p>
            </ba-content>
            <ba-content>
              <p>
                Aliquip dolor deserunt non duis adipisicing occaecat Lorem voluptate. Sit enim officia dolore nostrud ex
                commodo mollit adipisicing consequat cupidatat. Duis cupidatat incididunt ex dolore magna. Tempor reprehenderit occaecat sint cillum
                adipisicing dolore et et do. Aliquip occaecat ipsum adipisicing culpa non fugiat veniam ut incididunt mollit veniam ad.
              </p>
            </ba-content>
            <ba-image src="/demo-image.jpg" alt="Demo image" aspect-ratio="4-3"></ba-image>
            <ba-image src="/demo-image.jpg" alt="Demo image" aspect-ratio="4-3"></ba-image>
          </ba-grid>
        </ba-page-segment>
      </main>
    </body>
  </html>
</script>

You have now created a simple page in using BAgel components. Combine the components above with all of the other components contained within BAgel to create more complex layouts. Information on all our components can be found in our components section here on the docs.

For some complex examples see our pattern-library on storybook.