Image: '/images/branding/' 50px 100pxīackground-image: all and (-webkit-min-device-pixel-ratio: 1.1.Open the less, sass, scss, styl, ts, tsx, jade, pug or js file.Ģ. This works by using a query to serve an version of the file. The image mixin allows you to define a background-image for both the normal image, and a doubled image for devices with a higher pixel ratio such as retina displays. webkit-border-bottom-right-radius: 10px Nib's border-radius supports both the regular syntax as well as augmenting it to make the value more expressive. The clearfix mixin currently takes no arguments, so it may be called as shown below: The following example will default to (0,0): The syntax is as follows:įixed|absolute|relative: top|bottom left|right The position mixins absolute, fixed, and relative provide a shorthand variant to what is otherwise three CSS properties. Units may be placed before, or after the color:īackground: linear-gradient(left, 80% red, #000) īackground: linear-gradient(top, #eee, 90% white, 10% black) Nib's gradient support is by far the largest feature it provides, not only is the syntax extremely similar to what you would normally write, it's more forgiving, expands to vendor equivalents, and can even produce a PNG for older browsers with node-canvas.īackground: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000)) Īny number of color stops may be provided:īackground: linear-gradient(bottom left, white, red, blue, black) Rather than manually nib within your Stylus source you can import it via the JavaScript API as well: styl file you can then nib, or a portion of 'nib/buttons' use(nib()) call is all that is required to expose itself to Stylusįrom within a. Once installed you can use Stylus and Nib with your Connect or Express application as shown in the following snippet. To get started you'll first want to add nib to your package.json file, along with stylus. Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier.īackground: linear-gradient(top, white, black) īackground: -webkit-linear-gradient(top, #fff 0%, #000 100%) īackground: -moz-linear-gradient(top, #fff 0%, #000 100%) īackground: linear-gradient(top, #fff 0%, #000 100%) Nib - CSS3 extensions for Stylus Nib CSS3 extensions for Stylus
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2022
Categories |