Author: | korywakefield |
---|---|
Views Total: | 928 views |
Official Page: | Go to website |
Last Update: | December 8, 2017 |
License: | MIT |
Preview:

Description:
iota.css is a lightweight CSS layout library which makes it easier to generate a flexible, responsive grid layout using CSS grid properties.
How to use it:
Install and import the ‘iota.css’ into your project.
# NPM $ npm install iota-layout-css --save
<link href="iota.css" rel="stylesheet">
Create a basic CSS grid layout.
<div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> ... </div>
Use the extra grid classes for different devices.
<div class="grid" style="--cols-xl: 2;"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
Complex usage:
<div class="grid" style="--cols-xl: 4;"> <div style="--col-xl: 1; --row-xl: 1;">1</div> <div style="--col-xl: 2; --row-xl: 1;">2</div> <div style="--col-xl: 3; --row-xl: 1;">3</div> <div style="--col-xl: 4; --row-xl: 1;">4</div> <div style="--col-xl: 4; --row-xl: 2;">5</div> <div style="--col-xl: 4; --row-xl: 3;">6</div> <div style="--col-xl: 4; --row-xl: 4;">7</div> <div style="--col-xl: 3; --row-xl: 4;">8</div> <div style="--col-xl: 2; --row-xl: 4;">9</div> <div style="--col-xl: 1; --row-xl: 4;">10</div> <div style="--col-xl: 1; --row-xl: 3;">11</div> <div style="--col-xl: 1; --row-xl: 2;">12</div> </div>
Customize the ‘iota.css’ by overriding the default variables in the ‘_variables.css’.
// ============================================================================= // _VARIABLES.SCSS // ----------------------------------------------------------------------------- // Iota variables. // ============================================================================= // ============================================================================= // TABLE OF CONTENTS // ----------------------------------------------------------------------------- // 01. Class // 02. Enable // 03. Grid Data // ============================================================================= // Class // ============================================================================= // Defines the CSS class used for Iota's grid. $iota_grid_class: grid; // Enable // ============================================================================= // Turn various features on/off as needed. $iota_enable_grid_column_property: true; $iota_enable_grid_row_property: true; $iota_enable_justify_self_property: true; $iota_enable_align_self_property: true; // Grid Data // ============================================================================= // Defines the number of breakpoints and defaults used for each property at // that breakpoint. The slug for each breakpoint will be used in the custom // properties as a responsive reference (e.g. "--gap-xs"). The value of the // first breakpoint must be set to "0" to assign the mobile-first values. $iota_grid: ( "xs": ( "breakpoint" : 0, "grid_gap" : 2rem, "grid_auto_flow" : row, "grid_auto_columns" : auto, "grid_auto_rows" : auto, "repeat_columns" : 1, "repeat_columns_size" : 1fr, "justify_content" : space-evenly, "justify_items" : stretch, "align_content" : center, "align_items" : stretch, "grid_column" : auto, "grid_row" : auto, "justify_self" : auto, "align_self" : auto, ), "sm": ( "breakpoint" : 640px, "grid_gap" : 2rem, "grid_auto_flow" : row, "grid_auto_columns" : auto, "grid_auto_rows" : auto, "repeat_columns" : 2, "repeat_columns_size" : 1fr, "justify_content" : space-evenly, "justify_items" : stretch, "align_content" : center, "align_items" : stretch, "grid_column" : auto, "grid_row" : auto, "justify_self" : auto, "align_self" : auto, ), "md": ( "breakpoint" : 860px, "grid_gap" : 2rem, "grid_auto_flow" : row, "grid_auto_columns" : auto, "grid_auto_rows" : auto, "repeat_columns" : 2, "repeat_columns_size" : 1fr, "justify_content" : space-evenly, "justify_items" : stretch, "align_content" : center, "align_items" : stretch, "grid_column" : auto, "grid_row" : auto, "justify_self" : auto, "align_self" : auto, ), "lg": ( "breakpoint" : 1080px, "grid_gap" : 2rem, "grid_auto_flow" : row, "grid_auto_columns" : auto, "grid_auto_rows" : auto, "repeat_columns" : 4, "repeat_columns_size" : 1fr, "justify_content" : space-evenly, "justify_items" : stretch, "align_content" : center, "align_items" : stretch, "grid_column" : auto, "grid_row" : auto, "justify_self" : auto, "align_self" : auto, ), "xl": ( "breakpoint" : 1300px, "grid_gap" : 2rem, "grid_auto_flow" : row, "grid_auto_columns" : auto, "grid_auto_rows" : auto, "repeat_columns" : 4, "repeat_columns_size" : 1fr, "justify_content" : space-evenly, "justify_items" : stretch, "align_content" : center, "align_items" : stretch, "grid_column" : auto, "grid_row" : auto, "justify_self" : auto, "align_self" : auto, ), );