Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
gridline
Advanced tools
Readme
gridline
650B gzipped
➤ Install
yarn add gridline
➤ Import
CSS
@import "gridline/dist";
SCSS
@import "gridline/src";
➤ Usage
<div class="gridline">
<div>
...
</div>
...
</div>
➤ Settings
Container
HTML class | Requires a child | Description |
---|---|---|
.gridline | — | Will create a container that will occupy the full width of the layout. |
.gridline--center | — | Creates a container aligned to the center of the layout. |
.gridline--left | — | Creates a container, the left edge of which will be stretched to the left edge of the layout. |
.gridline--right | — | Creates a container, the right edge of which will be stretched to the right edge of the layout. |
.gridline--scrolling | required | Will create a container that, when overflowing with content horizontally, will receive a horizontal scroll. |
.gridline--collapse | — | Lines up the grid in a single column. |
CSS styling
Variable | Target | Default | Unit | Description |
---|---|---|---|---|
--width | .gridline | 100% | px | Width of the layout. |
--padding | .gridline | 20px | px , vw | Sets indents between columns. |
--gap | .gridline | 20px | px , vw | Sets indents between columns. 0px to turn off gap. |
--column | child | 1 | integer or decimal | Sets column width. |
--offset | child | 0 | integer or decimal | Sets the column offset to the right. |
➤ Continue to the edge
To extend the left or right column to the edge of the window, you need to add the `.edge` class to the column, or a class that has `edge` in its name.
➤ Scrolling
In order for a horizontal scroll to appear when the container overflows, it is necessary to add a styling class to the parent container `.gridline--scrolling`, and add a `.scrolling` class or a class containing `scrolling` in the name to the child block.
➤ License
gridline is released under MIT license
FAQs
Flexbox grid system to build layouts
We found that gridline demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).