Diseño de cuadrícula CSS mínimo flexible-Iota. CSS

Vista prévia

Descripción

Iota. CSS es una biblioteca de diseño CSS ligero que hace que sea más fácil generar un flexible, diseño de cuadrícula adaptable usando CSS Grid propiedades .

Funcionamiento

Instale e importe el ' Iota. css ' en su proyecto.

# NPM
$ npm install iota-layout-css --save

<link href="iota.css" rel="stylesheet">

Cree un diseño de cuadrícula CSS básico.

<div class="grid">

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

...
</div>

Utilice las clases de rejilla adicionales para diferentes dispositivos.

<div class="grid" style="--cols-xl: 2;">

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>
</div>

Uso complejo:

<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>

Personalice el ' Iota. css ' reemplazando las variables predeterminadas en el ' _ 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,

),
);