{"id":16665281,"url":"https://github.com/kenangundogan/flexible-grid","last_synced_at":"2025-04-09T12:07:22.958Z","repository":{"id":56846706,"uuid":"100852146","full_name":"kenangundogan/flexible-grid","owner":"kenangundogan","description":"Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)","archived":false,"fork":false,"pushed_at":"2019-02-12T13:06:34.000Z","size":145,"stargazers_count":155,"open_issues_count":0,"forks_count":24,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-04-13T21:09:02.424Z","etag":null,"topics":["css","css-framework","flex","flexbox","flexbox-grid","flexible","flexible-grid","grid","html","sass","scss"],"latest_commit_sha":null,"homepage":"http://www.flexible-grid.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kenangundogan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-20T09:47:46.000Z","updated_at":"2024-03-11T16:58:12.000Z","dependencies_parsed_at":"2022-08-21T13:50:46.500Z","dependency_job_id":null,"html_url":"https://github.com/kenangundogan/flexible-grid","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenangundogan%2Fflexible-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenangundogan%2Fflexible-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenangundogan%2Fflexible-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenangundogan%2Fflexible-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenangundogan","download_url":"https://codeload.github.com/kenangundogan/flexible-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247953862,"owners_count":21024102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-framework","flex","flexbox","flexbox-grid","flexible","flexible-grid","grid","html","sass","scss"],"created_at":"2024-10-12T11:06:29.488Z","updated_at":"2025-04-09T12:07:22.938Z","avatar_url":"https://github.com/kenangundogan.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://flexible-grid.com\"\u003e\n    \u003cimg src=\"http://flexible-grid.com/assets/images/logo/logo-symbol-green.svg\" width=60\u003e\n    \u003cbr\u003e\n    \u003cimg src=\"http://flexible-grid.com/assets/images/logo/logo-green.svg\" width=200\u003e\n  \u003c/a\u003e\n  \n  \u003cp align=\"center\"\u003e\n    For users who can embrace the newest of technology, Flexiblegrid comes with an flex based grid. It’s the same grid you know and love, but with even better source ordering and alignment options.\n    \u003cbr\u003e\n    \u003ca href=\"http://www.flexible-grid.com/documentation\"\u003e\u003cstrong\u003eFlexibleGrid docs\u003c/strong\u003e\u003c/a\u003e \u0026middot;\n    \u003ca href=\"http://www.flexible-grid.com/installation\"\u003e\u003cstrong\u003eFlexibleGrid inst\u003c/strong\u003e\u003c/a\u003e \u0026middot;\n    \u003ca href=\"http://flexible-grid.com/flexible-grid\"\u003e\u003cstrong\u003eFlexibleGrid example\u003c/strong\u003e\u003c/a\u003e \u0026middot;\n    \u003ca href=\"http://flexible-grid.com/examples\"\u003e\u003cstrong\u003eFlexibleGrid sample\u003c/strong\u003e\u003c/a\u003e\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.org/package/flexiblegrid\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/flexiblegrid.svg?style=flat\" alt=\"npm\"\u003e\n    \u003c/a\u003e    \n  \u003c/p\u003e\n\u003c/p\u003e\n\n\n\n## Flexible Grid Components\n1. [Wrapper](#flex)\n2. [Direction](#flex-direction)\n3. [Wrap](#flex-wrap)\n4. [Justify Content](#flex-justify-content)\n5. [Align Items](#flex-align-items)\n6. [Align Self](#flex-align-self)\n7. [Align Content](#flex-align-content)\n8. [Auto Margin](#flex-margin-auto)\n9. [Order](#flex-order)\n\n\n## Quick start\n[![Build Status](https://travis-ci.org/kenangundogan/flexible-grid.svg?branch=master)](https://travis-ci.org/kenangundogan/flexible-grid) [![npm version](https://badge.fury.io/js/flexiblegrid.svg)](https://badge.fury.io/js/flexiblegrid) [![Bower version](https://badge.fury.io/bo/flexiblegrid.svg)](https://badge.fury.io/bo/flexiblegrid) [![PHP version](https://badge.fury.io/ph/kenangundogan%2Fflexiblegrid.svg)](https://badge.fury.io/ph/kenangundogan%2Fflexiblegrid) [![Meteor Atmosphere](https://img.shields.io/badge/meteor-kenangundogan/flexiblegrid-blue.svg)](https://atmospherejs.com/kenangundogan/flexiblegrid) [![Gem Version](https://badge.fury.io/rb/flexible-grid.svg)](https://badge.fury.io/rb/flexible-grid)\n[![CSS gzip size](http://img.badgesize.io/kenangundogan/flexible-grid/master/dist/css/flexible-grid.min.css?compression=gzip\u0026label=CSS+gzip+size)](https://github.com/kenangundogan/flexible-grid/master/dist/css/flexible-grid.min.css)\n\n- [Download the latest release.](http://flexible-grid.com/flexible-grid-compiled.zip)\n- Clone the repo: `git clone https://github.com/kenangundogan/flexible-grid.git`\n- Install with [npm](https://www.npmjs.com/package/flexiblegrid): `npm install flexiblegrid`\n- Install with [bower](https://bower.io): `bower install flexiblegrid`\n- Install with [composer](https://packagist.org/packages/kenangundogan/flexiblegrid): `composer require kenangundogan/flexiblegrid`\n- Install with [yarn](https://yarnpkg.com/en/package/flexiblegrid): `yarn add flexiblegrid`\n- Install with [meteor](https://atmospherejs.com/kenangundogan/flexiblegrid): `meteor add kenangundogan:flexiblegrid`\n- Install with [rubygems](https://rubygems.org/gems/flexible-grid): `gem install flexible-grid`\n\n\nRead the [Getting started page](http://flexible-grid.com/documentation) for information on the framework contents, templates and examples, and more.\n\n## What's included\nWithin the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. \n\n#### Outuput File\n\n```\nflexible-grid/\n├── css/\n    ├── flexible-grid.css\n    ├── flexible-grid.css.map\n    ├── flexible-grid.min.css\n    └── flexible-grid.min.css.map\n```\n\n#### Source File\n```\nflexible-grid/\n├── scss/\n    ├── flexible-grid.scss\n    ├── _variables.scss\n    ├── _definitions.scss\n    ├── _array-list.scss\n    ├── _wrapper.scss\n    ├── _grid.scss\n    ├── _attribute.scss\n    └── _normalize.scss\n```\n\n## Versioning\nFlexible Grid will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:\n```\n\u003cmajor\u003e.\u003cminor\u003e.\u003cpatch\u003e\n```\nFor more information on SemVer, please visit http://semver.org.\n\n\n\n## Flexible Grid, Item Screen Size (-xs -sm -md -lg -xl)\n\n| Media Screen Size  | \u003c 424px       | \u003c 768px      | \u003c 1024px     | \u003c 1279px     | \u003c 1366px     |\n| :----------------- |:-------------:|-------------:|-------------:|-------------:|-------------:|\n| column             |.xs-1          |.sm-1         |.md-1         |.lg-1         |.xl-1         |\n| column             |.xs-2          |.sm-2         |.md-2         |.lg-2         |.xl-2         |\n| column             |.xs-3          |.sm-3         |.md-3         |.lg-3         |.xl-3         |\n| column             |.xs-4          |.sm-4         |.md-4         |.lg-4         |.xl-4         |\n| column             |.xs-5          |.sm-5         |.md-5         |.lg-5         |.xl-5         |\n| column             |.xs-6          |.sm-6         |.md-6         |.lg-6         |.xl-6         |\n| column             |.xs-7          |.sm-7         |.md-7         |.lg-7         |.xl-7         |\n| column             |.xs-8          |.sm-8         |.md-8         |.lg-8         |.xl-8         |\n| column             |.xs-9          |.sm-9         |.md-9         |.lg-9         |.xl-9         |\n| column             |.xs-10         |.sm-10        |.md-10        |.lg-10        |.xl-10        |\n| column             |.xs-11         |.sm-11        |.md-11        |.lg-11        |.xl-11        |\n| column             |.xs-12         |.sm-12        |.md-12        |.lg-12        |.xl-12        |\n\n\n\n## Flexible Grid, Attribute Screen Size (-xs -sm -md -lg -xl)\n\n| Media Screen Size          | \u003c 424px        | \u003c 768px        | \u003c 1024px       | \u003c 1279px       | \u003c 1366px       |\n|:---------------------------|:--------------:|:--------------:|:--------------:|:--------------:|:--------------:|\n| .display-flex              | -xs            | -sm            | -md            | -lg            | -xl            |\n| .display-inline-flex       | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-d-row                | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-d-rowreverse         | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-d-column             | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-d-column-reverse     | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-wrap                 | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-wrap-reverse         | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-nowrap               | -xs            | -sm            | -md            | -lg            | -xl            |\n| .justify-content-start     | -xs            | -sm            | -md            | -lg            | -xl            |\n| .justify-content-end       | -xs            | -sm            | -md            | -lg            | -xl            |\n| .justify-content-center    | -xs            | -sm            | -md            | -lg            | -xl            |\n| .justify-content-baseline  | -xs            | -sm            | -md            | -lg            | -xl            |\n| .justify-content-arround   | -xs            | -sm            | -md            | -lg            | -xl            |\n| .justify-content-between   | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-items-start         | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-items-end           | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-items-center        | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-items-baseline      | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-items-stretch       | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-selft-start         | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-selft-end           | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-selft-center        | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-selft-baseline      | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-selft-stretch       | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-content-start       | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-content-end         | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-content-center      | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-content-between     | -xs            | -sm            | -md            | -lg            | -xl            |\n| .align-content-around      | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-order-first          | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-order-last           | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-order-unordered      | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-ml-auto              | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-mr-auto              | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-mt-auto              | -xs            | -sm            | -md            | -lg            | -xl            |\n| .flex-mb-auto              | -xs            | -sm            | -md            | -lg            | -xl            |\n\n\n\n\n## Browser support\n- Google Chrome\n- Opera\n- Firefox\n- Safari 6.2+\n- Internet Explorer 10+\n- iOS 7+\n- Android 4.4+\n- Windows Phone 8.1+\n\n## Copyright and license\nDesigned and built by @kenangundogan\n\u003cbr\u003e\n2017 Currently - Code licensed [MIT License](https://github.com/kenangundogan/flexible-grid/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenangundogan%2Fflexible-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenangundogan%2Fflexible-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenangundogan%2Fflexible-grid/lists"}