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
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">×</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 tofalse
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 tonull
, 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 addingmake-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 tonull
, 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