SVG sprite styles were removed in favor of inline SVGs.calc-em() was replaced in the Sass files with native em-based sizing.Sass mixins weren't really used, and have been removed.The build tool was removed to focus on Kraken's core strength: the CSS boilerplate.Kraken 9 is about removing a lot of the cruft from older versions. This is a break change, and the only reason for the major version bump. Grids now sit tight against one another, and using padding to provide space between content instead of margins. Kraken 10 changed the way spacing between grids works. The normalize.css reset has been dropped in favor of a more modern, minimal reset that reflects how good modern browser are at rendering things consistently.As a result, there's no good way to do a "one-size fits most" system. Between Flexbox and CSS Grid, CSS layouts are incredibly powerful today. The built-in grid system was remove entirely.The new grid is designed to be a starting point (and possibly removed altogether) rather than a complete templating system. Implemented CSS custom properties (also known as CSS variables) for all colors, typefaces, and sizes, making customization faster and easier.Īdded a simple flexbox grid back in.Switched from flexbox to CSS Grid for more predictability and control over layouts.A big button with secondary colors would look like this: A Big Button btn sets the default button styles and behavior, while. Classes can be mixed, matched and reused throughout a project.įor example. Throughout the stylesheet, you'll see base styles and modifying styles. Kraken takes an OOCSS approach to web development. Think of it as progressive enhancement for the layout. It uses (min-width: whatever) to add a grid-based layout to bigger screens. The base structure is a fully-fluid, single-column layout. It's a starting point that you can adapt to any project you're working on. Kraken isn't supposed to be a finished product. Kraken is built to be flexible and modular, with performance and accessibility in mind.
0 Comments
Leave a Reply. |