Has CSS development become too humdrum for you and just not as fun as it used to be? If that’s been what you’ve found in the last little while, then it’s a good idea to try something new and fresh, such as Rucksack. Rucksack might come in a neat, compact package, yet it’s full of goodies that will make CSS development easier.
Both modular and lightning-quick, Rucksack is built on PostCSS and comes with many features. Designers and developers want to start using tools like this right out of the box, and Rucksack doesn’t disappoint. It’s easy for them to begin integrating it into their workflow with no hassle. Plugins exist for the majority of build tools: Integrate Rucksack manually with an npm module, or process the CSS right onto the command line.
Here’s a rundown of its many features.
Options
Because it’s completely modular, Rucksack lets you turn its features on and off, so you can customize it to your tastes. Simply pass the feature name and a boolean as you initialize in your build tool. All features are set to true, by default.
Responsive typography
You can produce “automagical” fluid typography thanks to a new, responsive property on font size. Getting started is as easy as specifying responsive as a font size.
To exercise some control over the font size, you can change your defaults. The most efficient way to achieve this is through a new shorthand syntax in font size, as well as a new property called font range. The font range identifies the viewport widths between which the font size is fluid. Out of this range, the font sizes are set to minimum and maximum values.
Of course, it’s also possible to specific values like px, rem and em with independent properties.
Rucksack’s responsive typography outputs complicated calc- and vw-based font sizes, together with media queries to establish the range between which a font size is fluid.
Shorthand positioning
With Rucksack, you get the shorthand methods utilized by properties such as padding and margin to position your offsets.
Quantity pseudo-selectors
This CSS development tool will add pseudo-selectors to allow you to pick and style elements according to their quantity. Utilize them to create powerful, responsive and content-driven designs:
- :at-least applies if there’s a specific number of items or more
- :at-most applies if there are a specific number of items or less
- :between applies to all items inside of a specific range
- :exactly applies if there’s an exact number of items
- These quantity pseudo-selectors style your elements based on their sibling count
Property aliases
Rucksack lets you set aliases for long property names and save excessive keystrokes. Setting an alias is a cinch: Just add it to the @alias rule in the format (alias): (property);. You can utilize aliases anywhere including within other properties. It’s recommended to just have a single @alias rule in a project and specify all aliases in a place.
Input pseudo-elements
Rucksack’s pseudo-elements let you efficiently style the inner elements of HTML5 inputs across browsers. Right now, the range input (and the ::placeholder when you enable automatic vendor prefixing) is the only element supported, yet additional ones will be added when browser vendors allow access to their UPIs.
You can style placeholders by using the ::placeholder pseudo-element. You can apply this to any input element or at the style sheet’s root for global styling.
The range input can be extremely tricky to style, so style it with ::track and ::thumb. You can apply these to any range element or at the style sheet’s root for global styling.
The following declarations—webkit appearance: none; and -moz-appearance: none;—have been added to any relevant elements, allowing custom styles to be correctly applied.
Native clearfix
Rucksack groups common clearfix methods into native methods within the clear property. Clearfix is defined as the method by which developers make a parent element self-clear its children, so that floats are contained.
Two new methods were added: fix and fix-legacy. Each gets the same result, yet possess different degrees of browser support. Fix outputs cleaner code; it’s all that’s required for IE8.
Font src expansion
Rucksack offers a shortcut method to produce bulletproof src sets in @font-face. It also includes a new font-path property. Simply set the path to the font files you want in font-path, which will create an src-set output based on the FontSpring syntax.
Hex RGBA shortcuts
This development tool offers a simple shortcut to add an alpha channel to a hex color. Simply add the hex value that you want to convert as a substitute to the RGB value in rgba ().
All the easings
A whole slew of modern easing functions is present on Rucksack. Designers and developers can use them in both CSS transitions and animations. Any new easings are then translated to cubic-bezier () functions on output. CSS can then natively comprehend this.
Legacy fallbacks
Legacy support’s a cinch on Rucksack because of its easy provision of fallbacks for lots of properties on older browsers. This is a voluntary add-on that you can toggle on and off thanks to the fallbacks option.
Opacity generates the suitable ms filter for accomplishing transparencies in IE8.
RGBA produces a hexadecimal fallback rgba () for <IE8.
You can also convert ::pseudo elements to single-colon style, which is friendlier to CSS2.
It’s also possible to create a vm fallback to the vmin unit for any IE9s.
Automatic prefixing
If you want, you can even run your own code through Autoprefixer, which automatically applies relevant vendor prefixes according to current browser popularity and support.
To see what sorts of prefixes are going to be applied to different properties, just head over to CanIUse.com
