You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
gibki - npm Package Compare versions
Comparing version 2.1.2 to 3.0.0
| { | ||
| "name": "gibki", | ||
| "version": "2.1.2", | ||
| "version": "3.0.0", | ||
| "description": "Gibki is an open-source and straightforward grid system based on Flexbox.", | ||
@@ -8,20 +8,19 @@ "main": "css/gibki.css", | ||
| "devDependencies": { | ||
| "autoprefixer": "^10.4.7", | ||
| "@rollup/plugin-commonjs": "^22.0.1", | ||
| "@rollup/plugin-node-resolve": "^13.3.0", | ||
| "postcss": "^8.4.14", | ||
| "rollup": "^2.75.7", | ||
| "rollup-plugin-license": "^2.8.1", | ||
| "autoprefixer": "^10.4.14", | ||
| "@rollup/plugin-commonjs": "^25.0.3", | ||
| "@rollup/plugin-node-resolve": "^15.1.0", | ||
| "postcss": "^8.4.26", | ||
| "rollup": "^3.26.3", | ||
| "rollup-plugin-license": "^3.0.1", | ||
| "rollup-plugin-postcss": "^4.0.2", | ||
| "sass": "^1.53.0" | ||
| "sass": "^1.63.6" | ||
| }, | ||
| "browserslist": [ | ||
| "last 2 versions", | ||
| "not <= 1%", | ||
| "not IE 10", | ||
| "not IE 11" | ||
| "> 1%", | ||
| "not dead" | ||
| ], | ||
| "scripts": { | ||
| "build": "rollup -c --environment BUILD", | ||
| "buildWatch": "rollup -c -w --environment BUILD", | ||
| "build": "rollup -c --environment BUILD --bundleConfigAsCjs", | ||
| "buildWatch": "rollup -c -w --environment BUILD --bundleConfigAsCjs", | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
@@ -28,0 +27,0 @@ }, |
111
README.md
| # Gibki | ||
| Gibki is an open-source and straightforward grid system based on Flexbox. | ||
| Gibki is an open-source grid system based on Flexbox. | ||
@@ -11,14 +11,17 @@ [Open in CodePen](https://codepen.io/collection/pgogaZ) | ||
| - [Download](#download) | ||
| - [Package managers](#package-managers) | ||
| - [Package Managers](#package-managers) | ||
| - [Usage](#usage) | ||
| - [General](#general) | ||
| - [Nesting](#nesting) | ||
| - [Responsive layouts](#responsive-layouts) | ||
| - [Responsive Layouts](#responsive-layouts) | ||
| - [Wrapping](#wrapping) | ||
| - [Gutters](#gutters) | ||
| - [Directions](#directions) | ||
| - [Horizontal alignment](#horizontal-alignment) | ||
| - [Vertical alignment](#vertical-alignment) | ||
| - [Horizontal Alignment](#horizontal-alignment) | ||
| - [Vertical Alignment](#vertical-alignment) | ||
| - [Reordering](#reordering) | ||
| - [Browser support](#browser-support) | ||
| - [Variables](#variables) | ||
| - [CSS custom properties](#css-custom-properties) | ||
| - [Sass variables](#sass-variables) | ||
| - [Browser Support](#browser-support) | ||
@@ -29,10 +32,10 @@ ## Installation | ||
| CSS: `css/flex.min.css` minified, or `css/flex.css` un-minified | ||
| CSS: `css/flex.min.css` (minified) or `css/flex.css` (un-minified) | ||
| ### Package managers | ||
| ### Package Managers | ||
| You can install Gibki through npm or yarn like any other dependency: | ||
| You can install Gibki via npm or yarn just like any other dependency: | ||
| ```shell | ||
| npm install gibki --save | ||
| npm install gibki | ||
| ``` | ||
@@ -44,3 +47,3 @@ | ||
| Then you can import Gibki in your Sass codebase: | ||
| Then, you can import Gibki in your Sass codebase: | ||
@@ -58,3 +61,3 @@ ```scss | ||
| Containers provide a means to center content. Use `.container` for a responsive width: | ||
| Containers provide a way to center content. Use `.container` for a responsive width: | ||
@@ -69,3 +72,3 @@  | ||
| And if necessary additionally with `.container--small` for a smaller width: | ||
| If needed, you can also use `.container--small` for a smaller width: | ||
@@ -80,2 +83,10 @@  | ||
| or `.container--full-width` for a full width container: | ||
| ```html | ||
| <div class="container container--full-width"> | ||
| </div> | ||
| ``` | ||
| #### .flex | ||
@@ -95,3 +106,3 @@ | ||
| `.flex__` classes creates differend column sizes. | ||
| `.flex__` classes create different column sizes. | ||
@@ -115,3 +126,3 @@  | ||
| `.flex__auto` creates columns that will take up however much space is left. | ||
| `.flex__auto` creates columns that take up the remaining space. | ||
@@ -134,3 +145,3 @@  | ||
| To nest your content with the default grid, add a new `.flex` container and set of `.flex__` columns within an existing `.flex__` column. | ||
| To nest content with the default grid, add a new `.flex` container and a set of `.flex__` columns within an existing `.flex__` column. | ||
@@ -156,3 +167,3 @@  | ||
| The grid system lets you create responsive layouts by giving you the option to define different column widths for each viewport. Four different breakpoints determine the viewports. | ||
| The grid system allows you to create responsive layouts by defining different column widths for each viewport. There are four breakpoints that determine the viewports: | ||
@@ -164,2 +175,4 @@ - >= 500px: Small `sm` | ||
| These breakpoints can be customized using [Sass variables](#sass-variables). | ||
|  | ||
@@ -225,4 +238,6 @@ | ||
| The columns have horizontal and vertical padding to create the gutters between individual columns and rows. You can remove the margin from the wrapper and the padding from the columns and rows with `.flex--no-gutters`. | ||
| The columns and rows have horizontal and vertical spacing. These can be customized using [CSS custom properties](#css-custom-properties). | ||
| You can remove the spacing with `.flex--no-gutters`. | ||
|  | ||
@@ -256,3 +271,3 @@ | ||
| Or only remove the vertical gutters with `.flex--no-vertical-gutters`. | ||
| Or you remove only the vertical gutters with `.flex--no-vertical-gutters`. | ||
@@ -274,3 +289,3 @@  | ||
| The following classes define the direction in which the columns are placed in the wrapper. By default, columns are set left to right in `ltr` and right to left in `rtl`. | ||
| The following classes define the direction in which the columns are placed within the wrapper. By default, columns are set from left to right in `ltr` (left-to-right languages) and from right to left in `rtl` (right-to-left languages). | ||
@@ -290,3 +305,3 @@  | ||
| `row-reverse` sets the direction, right to left in `ltr` and left to right in `rtl`. | ||
| The columns are placed from right to left in `ltr` and left to right in `rtl`. | ||
@@ -306,3 +321,3 @@  | ||
| `.flex--column` behaves the same way as `.flex--row` but top to bottom. | ||
| `.flex--column` behaves the same way as `.flex--row` but the columns are stacked from top to bottom. | ||
@@ -322,3 +337,3 @@  | ||
| `.flex--column-reverse` behaves the same way as `.flex--row-reverse` but bottom to top. | ||
| `.flex--column-reverse` behaves the same way as `.flex--row-reverse` but the columns are stacked from bottom to top. | ||
@@ -336,5 +351,5 @@  | ||
| ### Horizontal alignment | ||
| ### Horizontal Alignment | ||
| The following classes define how columns are aligned along the main axis. It helps distribute extra space between the items when they don't reach their maximum size. By default, columns are positioned at the beginning of the container. | ||
| The following classes define how columns are aligned along the main axis. They help distribute extra space between the items when they don't reach their maximum size. By default, columns are positioned at the beginning of the container. | ||
@@ -387,3 +402,3 @@  | ||
| The columns are evenly spread horizontally; the first column is at the beginning of the container, the last column on the end of the container. Thus, space gets distributed between the columns. | ||
| The columns are evenly spread horizontally; the first column is at the beginning of the container, and the last column is at the end of the container. Space is distributed between the columns. | ||
@@ -418,3 +433,3 @@  | ||
| ### Vertical alignment | ||
| ### Vertical Alignment | ||
@@ -425,3 +440,3 @@ The following classes define how columns are aligned along the cross axis when they don't reach their maximum size. | ||
| This is the default value. You don't need to add the class to the wrapper; it stretches the height of the columns to fill the container but still respects `min-width` and `max-width`. | ||
| This is the default value. You don't need to add the class to the wrapper; it stretches the height of the columns to fill the container while respecting `min-width` and `max-width`. | ||
@@ -546,3 +561,3 @@  | ||
| Use `.flex--order-` classes for controlling the visual order of your content. | ||
| Use `.flex--order-` classes to control the visual order of your content. | ||
@@ -582,4 +597,40 @@  | ||
| ## Browser support | ||
| ## Variables | ||
| ### CSS custom properties | ||
| ```css | ||
| // Container max width | ||
| // Based on 16px | ||
| --gibki-container-max-width: 75rem; // 1200px | ||
| --gibki-small-container-max-width: 38.25rem; // 612px | ||
| // Container padding | ||
| // Based on 16px | ||
| --gibki-container-padding: 1.5rem; // 24px | ||
| // Gutter width | ||
| // Based on 16px | ||
| --gibki-gutter-vertical: 1.5rem; // 24px | ||
| --gibki-gutter-horizontal: 1.5rem; // 24px | ||
| ``` | ||
| ### Sass variables | ||
| ```scss | ||
| // Breakpoints map | ||
| // Based on 16px | ||
| $gibki-breakpoints: ( | ||
| 'sm': 31.25em, // 500px | ||
| 'md': 43.75em, // 700px | ||
| 'lg': 62.5em, // 1000px | ||
| 'xl': 75em // 1200px | ||
| ); | ||
| // Available columns | ||
| $gibki-columns: 12; | ||
| ``` | ||
| ## Browser Support | ||
| Gibki supports the following browser (all the latest versions): | ||
@@ -586,0 +637,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
90552
124.01%- Number of package files
13
18.18%- Lines of code
743
3.19%- Number of lines in readme file
619
8.98%No dependency changes