Currently v1.2.0 Download BaseWeb

Blocks

Blocks are a group of Elements that become an independent component. A block can be simple or compound (meaning it contains other blocks). A Block is contextually independent, but can be modified either through an internal modifier or parent block.

BaseWeb is a young framework and still being actively developed. Blocks are currently the main focus of development and many more will be available soon.

  • Upcoming Blocks
  • Modals
  • Tooltips
  • Dropdowns
  • Menus
  • Pagination
  • Tabs

Button Groups

Button groups are a way to create a set of buttons and make them visually grouped together. Button groups can either be lined up horizontally, or stacked vertically. They can also either be presented inline, or block (meaning they span the full width of their container).


<div class="button-group">
  <button class="button">Button</button>
  ...
</div>
<div class="button-group">
  <button class="button">Button</button>
  ...
</div>

By default, button groups are displayed horizontal and inline. To toggle between the vertical display button styles, you can use the .vertical class on the button group element.


<div class="demo demo-pad">
  <div class="button-group vertical">
    <button class="button">Button</button>
    ...
  </div>
  <div class="button-group vertical">
    <button class="button">Button</button>
    ...
  </div>
</div>

Block Button Groups

To create a button group that expands the full width of its container, There's the .block class.


<div class="button-group block vertical">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

If a button group is both horizontal and block, you'll need to define the number of children the button group has. For this, we use the mini grid system syntax of .has-X where X represents the number of children.


<!-- Horizontal Block Button Group with 3 Chilren -->
<div class="button-group block has-3">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

Using the .has-X modifier will give each button element equal widths to a total of 100%. But if you need to give each button element unique widths, you can use the .is-1-of-X classes where 1-of-X represents the fraction you want the button to take.


<div class="button-group block has-margin-3">
  <button class="button is-1-of-4">Button</button>
  <button class="button is-1-of-4">Button</button>
  <button class="button is-1-of-2">Button</button>
</div>

If you use the .is-1-of-X modifier, remember that the parent button group element still needs a has-margin-X class to properly apply the negative right margins of the button group.

Stack for Media Button Groups

For cases where you want button groups to be vertical block for only specific media queries, there's the stack-for-X classes. These classes are built using the max-width media queries, so the styles are applied to a specified breakpoint and below.


<div class="button-group block has-5 stack-for-medium">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>
  • Available Breakpoint Stack Classes
  • .stack-for-tiny media-max('small')
  • .stack-for-small media-max('medium')
  • .stack-for-medium media-max('large')

Button Group Wrapper

In the cases where you have multiple button groups, you have the .button-group-wrapper which applies comfortable spacing between button groups as well as individual buttons.


<div class="button-group-wrapper">
  <div class="button-group block has-3">
    ...
  </div>
  <div class="button-group">
    ...
  </div>
  <div class="button-group">
    ...
  </div>
  <button class="button">Button</button>
</div>

For more complex button layouts, you can use the mini grid system along with the button group wrapper to create a columned button layout. We also added a stack modifier for better usability on smaller devices.


<div class="button-group-wrapper has-2">
  <div>
    <div class="button-group block has-2 stack-for-medium">
      <button class="button">Button</button>
      <button class="button">Button</button>
    </div>
  </div>
  <div>
    <div class="button-group block has-2 stack-for-medium">
      <button class="button">Button</button>
      <button class="button">Button</button>
    </div>
  </div>
</div>

Button Modifier Classes

As a method to easily style a group of buttons, all button color and size modifier classes are available for button groups and button group wrappers to apply for all children button elements.


<div class="button-group-wrapper primary"> ... </div>

Button Group Variables

Button Group variables are encompassed within the $button-groups map and are used throughout all button group mixins to set default values and toggle classes output.

  • $button-groups('classes') true Whether or not we should output modifier classes. Set to false if you want to use the button group modifier mixins semantically and/or reduce CSS output.
  • $button-groups('classes-stack') true Whether or not the stack modifier classes should be output.
  • $button-groups('classes-extend') true Whether or not the button modifier classes should be extended onto button group and button group wrapper elements.
  • $button-groups('class-group') 'button-group' Class name for button group element.
  • $button-groups('class-wrapper') 'button-group-wrapper' Class name for button group wrapper element.
  • $button-groups('class-has') map-get($mini-grid, 'class-has') Class name prefix for button-group mini-grid parent elements.
  • $button-groups('class-is') map-get($mini-grid, 'class-is') Class name prefix for button-group mini-grid children elements.
  • $button-groups('fractions') map-get($mini-grid, 'fractions') Used to define the number of fraction classes to output.
  • $button-groups('spacing') 1em The amount of space that's created between button groups.

Button Group Mixins

Button group mixins are used to define and modify groups of buttons. They provide a way to toggle button groups being horizontal or vertical and inline or block along with other helpful modifiers and classes output.

  • make-button-group

    Creates the base styles for button groups.

    @mixin make-button-group( $options: () )
    // @param $options
    //   @type map
    //   @default $button-groups map
  • add-button-group-style

    Adds button styles based on orientation and display type provided.

    @mixin add-button-group-style( $orientation, $display, $has, $options: () )
    // @param $orientation
    //   @type horizontal | vertical
    //   @default null
    // @param $display
    //   @type inline | block
    //   @default null
    // @param $has
    //   @type number
    //   @default null
    // @param $options
    //   @type map
    //   @default $button-groups map
  • add-button-group-has

    Adds the button width and right margin for a horizontal block button group.

    @mixin add-button-group-has( $has )
    // @param $has
    //   @type number
    //   @default null
  • build-button-group-mini-grid-modifiers

    Builds the modifier classes for button groups mini grid system.

    @mixin build-button-group-mini-grid-modifiers( $options: () )
    // @param $options
    //   @type map
    //   @default $button-groups map
  • build-button-group-stack-modifiers

    Builds the modifier classes for applying vertical block styles to a button group based on screen size.

    @mixin build-button-group-stack-modifiers( $options: () )
    // @param $options
    //   @type map
    //   @default $button-groups map
  • make-button-group-wrapper

    Creates the styles for a button group wrapper.

    @mixin make-button-group-wrapper( $options: () )
    // @param $options
    //   @type map
    //   @default $button-groups map

Notices

Notices in BaseWeb represent content blocks that give additional contextual information. This could be helpful tips, success, warning or error messages and additional information to a document. The most basic implementation involves a <div> with the .notice class.


<div class="notice">
  <p>...</p>
</div>

This is an example notice.

You can also create dismissible notices but adding the .dismissible class and a close button. The class used for close buttons is set using the $notices('class-close') variable.


<div class="notice dismissible">
  <button class="button close">&times;</button>
  <p>...</p>
</div>
// Example jQuery implementation of dismissible notices
$('.dismissible > .close').on('click', function() {
  $(this).closest('.dismissible').fadeOut();
});

Dismissible

Dismissible

Notice Variables

Notice variables are encompassed within the $notices map and are used throughout all notice mixins to set default values.

  • $notices('classes') true Whether or not we should output notice classes. Set to false if you want to use the notice modifier mixins semantically and/or reduce CSS output.
  • $notices('class-inverted') inverted
    The class to use for inverted notice colors. If set to null, inverted color styles won't be output.
  • $notices('class-close') close
  • $notices('margin') 2em 0
  • $notices('padding') 0.25em 1.25em
  • $notices('padding-small') null
  • $notices('padding-large') null
  • $notices('padding-inline') 0 0.25em
  • $notices('font-size') 1em
  • $notices('font-size-small') 0.9em
  • $notices('font-size-large') 1.1em
  • $notices('line-height') 1.5em
  • $notices('pull-breakpoint') medium
  • $notices('pull-width') 45%
  • $notices('pull-margin-left') 0.5em 2em 1em 0
  • $notices('pull-margin-right') 0.5em 0 1em 2em
  • $notices('color') $color-dark
  • $notices('text-shadow') 0 1px 0 rgba($white, 0.25)
  • $notices('background') rgba($black, 0.05)
  • $notices('box-shadow') 0 1px 3px rgba($black, 0.05)
  • $notices('border') 1px solid rgba($black, 0.15)
  • $notices('border-radius') $border-radius
  • $buttons('inverted', 'color') $white
  • $buttons('inverted', 'text-shadow') 0 1px 0 rgba($black, 0.25)
  • $buttons('inverted', 'background') rgba($color-dark, 0.9)
  • $buttons('inverted', 'border') 1px solid rgba($black, 0.15)
  • $buttons('inverted', 'box-shadow') 0 1px 3px rgba($black, 0.05)

Notice Mixins

Notice mixins are used to create the base styles for a notice as well as their color size and display variations.

  • make-notice

    Creates the base styles for a notice block.

    @mixin make-notice( $options: () )
    // @param $options
    //   @type map
    //   @default $notices map

    Example Usage

    This example shows us using a %base-notice placeholder for the extend method. Other methods include adding make-notice() to a general class which is applied to notice elements directly (which is the method BaseWeb uses for its classes).

    %base-notice {
      @include make-notice();
    }
    .message-success {
      @extend %base-notice;
      ...
    }
    .alert-error {
      @extend %base-notice;
      ...
    }
    
  • add-notice-color

    Adds styles for a notice color with optional output type. You can either output all notice color styles, or just the ones that are different from the default settings by setting the $output parameter to 'all' or 'difference', respectively.

    @mixin add-notice-color( $options: (), $output )
    // @param $options
    //   @type map
    //   @default $notices map
    // @param $output
    //   @type string (all, difference)
    //   @default difference
    //   @desc Whether to output all styles, or just the ones that are different
    //     from the `$notices` map.

    Example Usage

    We can create custom notice color classes using this mixin while also using the .notice class to inherit the base notice styles.

    
    // We override only the color styles that change by
    // using the default $output: 'difference' parameter.
    .notice.custom {
      @include add-notice-color((
        'background' : rgba($blue-green, 0.1),
        'inverted' : (
          'background' : rgba($blue-green, 0.9)
        )
      ));
    }
    

    This is a notice with custom color styles.

    And this is that notice with inverted styles.

    Available Classes

    If you have notice class output enabled, BaseWeb will provide you with a set of notice classes and semantic aliases ready to use right away.

    
    <div class="notice">...</div>
    <div class="notice inverted">...</div>
    
    <div class="notice blue">...</div>
    <div class="notice blue inverted">...</div>
    
    <div class="notice green">...</div>
    <div class="notice green inverted">...</div>
    
    <div class="notice yellow">...</div>
    <div class="notice yellow inverted">...</div>
    
    <div class="notice orange">...</div>
    <div class="notice orange inverted">...</div>
    
    <div class="notice red">...</div>
    <div class="notice red inverted">...</div>
    
    <div class="notice violet">...</div>
    <div class="notice violet inverted">...</div>
    

    .notice

    .notice .inverted

    .notice .blue

    .notice .blue .inverted

    .notice .green

    .notice .green .inverted

    .notice .yellow

    .notice .yellow .inverted

    .notice .orange

    .notice .orange .inverted

    .notice .red

    .notice .red .inverted

    .notice .violet

    .notice .violet .inverted

    There are also available semantic class aliases for the above styles.

    // Semantic Aliases
    .notice.success { @extend .notice.green  }
    .notice.info    { @extend .notice.blue   }
    .notice.warning { @extend .notice.yellow }
    .notice.danger  { @extend .notice.red    }
    
  • add-notice-size

    Adds styles for notice size based on keyword or options map difference.

    @mixin add-notice-size( $size, $options: () )
    // @param $size
    //   @type string (small, default, large)
    // @param $options
    //   @type map
    //   @default $notices map

    Example Usage

    The first parameter is a quick way to make a notice use the default small or large size set in our $notices map. Or you can pass in a $options:() map for custom padding, font-size and line-height.

    // Use default small size
    .notice-small {
      @include add-notice-size('small');
    }
    
    // Use default large size with custom font size
    .notice-custom-large {
      @include add-notice-size('large', (
        'font-size': 20px
      ));
    }
    
    // Set a custom notice size
    .notice-custom-size {
      @include add-notice-size(20px 40px, (
        'font-size': 20px,
        'line-height': 24px
      ));
    }
    

    Available Classes

    
    <div class="notice info small">...</div>
    <div class="notice info">...</div>
    <div class="notice info large">...</div>
    

    .notice .small

    .notice

    .notice .large

  • add-notice-inline

    Adds styles for an inline or inline-block notice. Inline notice elements retain the ability to change their color styles using the available color or semantic class modifiers.

    @mixin add-notice-inline( $display, $options: () )
    // @param $display
    //   @type display property (inline, inline-block)
    //   @default inline
    // @param $options
    //   @type map
    //   @default $notices map

    Example Usage

    
    .notice.inline {
      @include add-notice-inline();
    }
    
    
    <span class="notice inline">...</span>
    
    • .inline
      Inline notice Inline inverted notice
    • .inline .info
      Inline info notice Inline inverted info notice
    • .inline .success
      Inline success notice Inline inverted success notice
    • .inline .warning
      Inline warning notice Inline inverted warning notice
    • .inline .danger
      Inline danger notice Inline inverted danger notice
  • add-notice-pull

    Adds styles for floating a notice to the left or right. By default, notice-pull modifiers are only floated when reaching the breakpoint set in $notices('pull-breakpoint') (if set to null, notice will always be floated).

    @mixin add-notice-pull( $direction, $options: () )
    // @param $direction
    //   @type string (left, right)
    // @param $options
    //   @type map
    //   @default $notices map

    Example Usage

    
    .some-custom-notice {
      @include add-notice-pull('left');
    }
    .another-custom-notice {
      @include add-notice-pull('right');
    }
    
    
    <div class="notice pull-left">...</div>
    <div class="notice pull-right">...</div>
    

    .pull-left

    .pull-right