I’m very excited to see this update launch, so lets get into the nitty-gritty.
You’ll notice that each component has
Icon systems and the way they are used on the web has been a changing for the past few years. We’ve seen PNG icons dropped for the flexibility of font icons. To now the sharpness and flexibility of SVG. I wanted to make sure the method included in BaseWeb adheres to best practices, so now you have the option to use SVG sprites or the more recently advocated inline SVG methods.
Source now includes the simply beautiful open source icon set Feather Icons by Cole Bemis. You’ll find individual SVG icons as well as an SVG symbols sprite for all your icon needs. For more information on how to leverage these tools, check out the icons element documentation.
BaseWeb is very picky about the order that you import settings, functions and the rest of the core files. In an effort to make this process easier and incentives using BaseWeb through NPM, I’ve added import partials.
You can of course keep importing BaseWeb files piecemeal as you always have, but now you have the option to include
_baseweb-core.scss and you won’t have to worry about getting errors for importing files in the wrong order or missing changes in future updates.
Also included are
_baseweb-blocks.scss in case you want to just include everything along with all future elements or blocks. The new
baseweb.scss import file looks like this:
// Core [Required] @import "baseweb-core"; // Overrides @import "custom/overrides"; // Elements @import "baseweb-elements"; // Blocks @import "baseweb-blocks"; // Custom @import "custom/custom";
It’s important to note that
custom/overrides should be imported after core but before elements and block files. This ensures that you keep your custom framework overrides.
For more information, checkout the get started guide under the heading “BaseWeb Source”. For information on how to leverage BaseWeb and still be able to customize everything you need, check out “Reusing Design Systems with Yarn and Gulp”.
Show and Hide Utility Classes
Another cool little feature that’s been added this update is the show and hide utility classes. How these work is that they allow you to show or hide an element using a class that’s generated from whatever values are set in the
$breakpoints map. So, for example, if you added a breakpoint of
'average' with a value of
500px, BaseWeb will automatically generate the following classes:
.hide-average-up: Hides item when window is > 500px
.hide-average-down: Hides item when window is < 500px
.show-average-up: Show item when window is > 500px
.show-average-down: Show item when window is < 500px
All variations of these classes are included with the default values of
$breakpoints. For more information on show/hide utilities, check out the base elements documentation.
The other changes that were made are more minor, but they include:
:visitedstyles. They cause way more of a headache than they are worth
- Updates to the dev blog listings and single post templates
- Add “back to top” buttons for easier navigation on long pages
- General improvements to typography and styles of documentation
- Better styles for page-navigation in docs
- Added new styles for ASCII file structure views
- Added more position options for tooltips
- Updated notice close button to reflect new icon styles
- Cleaned up Jekyll includes directory of unused files
- Updated the landing page for documentation
Wow, what a great update! I’ve been having such a blast working on BaseWeb lately and I’m really excited about the components and features that are next. Let’s end the summer on a strong note!