New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
basscss-positions
Advanced tools
basscss-positions - npm Package Compare versions
Comparing version 0.0.6 to 1.0.0
| { | ||
| "name": "basscss-positions", | ||
| "version": "0.0.6", | ||
| "version": "1.0.0", | ||
| "description": "CSS positioning utilities for Basscss", | ||
@@ -5,0 +5,0 @@ "style": "index.css", |
| These styles alter the default document flow. | ||
| <span class="red">Use positions with caution. | ||
| They are often unnecessary and commonly misused.</span><br> | ||
| See the <a href="http://basscss.com/docs/guides/basics">Guide to Basics</a> for more info. | ||
| This module includes basic positioning utilities to alter the default document flow. | ||
| ```css | ||
| .relative { position: relative } | ||
| .absolute { position: absolute } | ||
| .fixed { position: fixed } | ||
| <p class="red">Use positions with caution. They are often unnecessary and commonly misused.</p> | ||
| .top-0 { top: 0 } | ||
| .right-0 { right: 0 } | ||
| .bottom-0 { bottom: 0 } | ||
| .left-0 { left: 0 } | ||
| Use `.relative` to create a new stacking context. | ||
| .z1 { z-index: 1 } | ||
| .z2 { z-index: 2 } | ||
| .z3 { z-index: 3 } | ||
| .z4 { z-index: 4 } | ||
| ```html | ||
| <div class="relative"> | ||
| <button class="button">Button</button> | ||
| </div> | ||
| ``` | ||
| .absolute-center { | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| margin: auto; | ||
| display: table; | ||
| } | ||
| Use `.absolute` to move elements out of the default document flow. | ||
| ```html | ||
| <div class="relative mb4"> | ||
| <button class="button">Button</button> | ||
| <div class="absolute bg-white border rounded"> | ||
| <a href="#" class="block button button-transparent">Dropdown Action</a> | ||
| <a href="#" class="block button button-transparent">Action</a> | ||
| <a href="#" class="block button button-transparent">Action</a> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| Use `.fixed` to position an element relative to the viewport. | ||
| <p class="docs-show" style="display:none">Note: fixed positioning has been disabled here for demonstration only.</p> | ||
| ```html | ||
| <button class="fixed button"> | ||
| Button | ||
| </button> | ||
| ``` | ||
| Note: Fixed positioning is notoriously tricky to use well and can lead to inaccessible content and unwanted side effects. Use fixed positioning with caution. | ||
| To anchor to a particular side, use `.top-0`, `.right-0`, `.bottom-0`, or `.left-0`. Margin and padding utilities can be used to space elements apart. | ||
| ```html | ||
| <button class="fixed top-0 right-0 m2 button"> | ||
| Button | ||
| </button> | ||
| ``` | ||
| To fill an entire width or height, use opposing directions. | ||
| ```html | ||
| <div class="fixed top-0 left-0 right-0 p2 white bg-black"> | ||
| Fixed bar | ||
| </div> | ||
| ``` | ||
| To ensure the desired stacking order, use z-index utilities. | ||
| ```html | ||
| <div class="fixed z2 top-0 left-0 right-0 p2 white bg-black"> | ||
| Fixed bar | ||
| </div> | ||
| ``` | ||
| <style> | ||
| .MarkedExample .fixed { position: static } | ||
| </style> | ||
Sorry, the diff of this file is not supported yet
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by70.49%
2467
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by109.38%
67
Worsened metrics
- Lines of code
- decreased by-40%
12
No dependency changes