Other Helpers

<!-- Display types -->
<div class="is-block">Block element</div>
<span class="is-inline">Inline element</span>
<span class="is-inline-block">Inline-block element</span>
<div class="is-flex">Flex container</div>
<div class="is-inline-flex">Inline flex container</div>
<div class="is-grid">Grid container</div>

<!-- Block on mobile, flex on tablet+ -->
<div class="is-block-mobile is-flex-tablet">
  Responsive display
</div>

<!-- Inline on touch, block on desktop -->
<span class="is-inline-touch is-block-desktop">
  Changes display type
</span>

<!-- Completely hidden (not in layout) -->
<div class="is-hidden">This is hidden</div>
<div class="is-display-none">Also hidden</div>

<!-- Invisible but takes up space -->
<div class="is-invisible">Invisible but present</div>
<div class="is-visibility-hidden">Also invisible</div>

<!-- Screen reader only -->
<span class="is-sr-only">Only visible to screen readers</span>

<!-- Hidden on mobile only -->
<div class="is-hidden-mobile">
  Not visible on mobile
</div>

<!-- Visible only on tablet -->
<div class="is-hidden-mobile is-hidden-desktop">
  Only visible on tablet
</div>

<!-- Hidden on touch devices -->
<div class="is-hidden-touch">
  Only visible on desktop+
</div>

<!-- Float left -->
<div class="is-pulled-left">Floated left</div>
<div class="is-float-left">Also floated left</div>

<!-- Float right -->
<div class="is-pulled-right">Floated right</div>
<div class="is-float-right">Also floated right</div>

<!-- No float -->
<div class="is-float-none">Not floated</div>

<!-- Clearfix -->
<div class="is-clearfix">
  <div class="is-pulled-left">Floated content</div>
  <!-- Parent will contain floated children -->
</div>

<div class="is-clear-both">Clear both sides</div>
<div class="is-clear-left">Clear left</div>
<div class="is-clear-right">Clear right</div>
<div class="is-clear-none">No clear</div>

<!-- Clipped overflow -->
<div class="is-clipped" style="height: 100px;">
  Content that overflows will be hidden
</div>

<!-- Auto overflow -->
<div class="is-overflow-auto" style="height: 100px;">
  Scrollable when content overflows
</div>

<!-- Hidden overflow -->
<div class="is-overflow-hidden" style="height: 100px;">
  Overflow is hidden
</div>

<!-- Visible overflow -->
<div class="is-overflow-visible">
  Overflow is visible
</div>

<!-- Scroll overflow -->
<div class="is-overflow-scroll" style="height: 100px;">
  Always shows scrollbars
</div>

<!-- Clip overflow -->
<div class="is-overflow-clip" style="height: 100px;">
  Content is clipped
</div>

<!-- Horizontal overflow -->
<div class="is-overflow-x-auto" style="width: 200px;">
  <div style="width: 500px;">Wide content</div>
</div>

<!-- Vertical overflow -->
<div class="is-overflow-y-scroll" style="height: 100px;">
  <div style="height: 300px;">Tall content</div>
</div>

<div class="box is-radiusless">
  No border radius
</div>

<div class="box is-shadowless">
  No box shadow
</div>

<div class="is-clickable">
  Shows pointer cursor
</div>

<div class="is-unselectable">
  Text cannot be selected
</div>

<nav class="navbar">
  <div class="navbar-brand">
    <span>Logo</span>
  </div>
  
  <!-- Hidden on mobile, visible on desktop -->
  <div class="navbar-menu is-hidden-mobile">
    <a class="navbar-item">Home</a>
    <a class="navbar-item">About</a>
    <a class="navbar-item">Contact</a>
  </div>
  
  <!-- Visible on mobile only -->
  <button class="button is-hidden-tablet">
    Menu
  </button>
</nav>

<div class="is-overflow-x-auto is-overflow-y-hidden">
  <div class="is-flex">
    <img src="1.jpg" class="mr-2">
    <img src="2.jpg" class="mr-2">
    <img src="3.jpg" class="mr-2">
    <img src="4.jpg" class="mr-2">
  </div>
</div>

<a href="#main-content" class="is-sr-only">
  Skip to main content
</a>

<main id="main-content">
  <!-- Content -->
</main>

<div class="box">
  <div class="is-flex-tablet is-block-mobile">
    <img src="thumbnail.jpg" 
         class="is-pulled-left-tablet mr-4-tablet mb-3-mobile">
    <div>
      <h4>Card Title</h4>
      <p>Card content that flows around the image on tablet+</p>
    </div>
  </div>
  <div class="is-clearfix"></div>
</div>

<div class="modal is-active">
  <div class="modal-background is-clickable"></div>
  <div class="modal-content is-overflow-y-auto" style="max-height: 90vh;">
    <!-- Scrollable modal content -->
  </div>
  <button class="modal-close is-clickable"></button>
</div>