{"id":15041507,"url":"https://github.com/jackmcpickle/flex_e_ble","last_synced_at":"2025-04-13T05:41:30.644Z","repository":{"id":38905037,"uuid":"51365639","full_name":"jackmcpickle/flex_e_ble","owner":"jackmcpickle","description":"A simple yet flexible sass class naming structure on top of a flexbox based grid","archived":false,"fork":false,"pushed_at":"2024-12-13T02:08:56.000Z","size":924,"stargazers_count":17,"open_issues_count":13,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-28T18:02:40.355Z","etag":null,"topics":["flexbox","include-media","scss-framework"],"latest_commit_sha":null,"homepage":"http://jackmcpickle.github.io/flex_e_ble/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jackmcpickle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-09T12:35:10.000Z","updated_at":"2024-09-04T04:55:44.000Z","dependencies_parsed_at":"2023-10-12T13:40:13.688Z","dependency_job_id":"9a6c8da3-f423-4e5c-9d11-9db623eac260","html_url":"https://github.com/jackmcpickle/flex_e_ble","commit_stats":{"total_commits":433,"total_committers":9,"mean_commits":"48.111111111111114","dds":"0.49653579676674364","last_synced_commit":"8d2c795bb168c941ecc8ee3174dad321cdf5a719"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackmcpickle%2Fflex_e_ble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackmcpickle%2Fflex_e_ble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackmcpickle%2Fflex_e_ble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackmcpickle%2Fflex_e_ble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jackmcpickle","download_url":"https://codeload.github.com/jackmcpickle/flex_e_ble/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125583,"owners_count":21051769,"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":["flexbox","include-media","scss-framework"],"created_at":"2024-09-24T20:46:10.713Z","updated_at":"2025-04-13T05:41:30.423Z","avatar_url":"https://github.com/jackmcpickle.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flex_e_ble\n\n[![NPM](https://nodei.co/npm/flex_e_ble.png)](https://npmjs.org/package/flex_e_ble)\n\n[![Build Status](https://travis-ci.org/jackmcpickle/flex_e_ble.svg?branch=master)](https://travis-ci.org/jackmcpickle/flex_e_ble) [![Dev Dependencies](https://david-dm.org/jackmcpickle/flex_e_ble/dev-status.svg)](https://david-dm.org/jackmcpickle/flex_e_ble?type=dev\u0026view=list) ![Total Downloads](https://img.shields.io/npm/dt/flex_e_ble.svg) [![renovate-app badge][renovate-badge]][renovate-app]\n\n[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg\n[renovate-app]: https://renovateapp.com/\n\nA simple yet *flexible* class naming structure on top of a `flex` based grid.\n\n**Flexeble 2.0 removes support for \u003c IE 11 and as such all fall backs and flexbox namespacing**\n\nReasons\n* Can assist you in migrating your current Bootstrap and Foundation grids to flexbox as a drop in replacement.\n* Use a grid system that is the same across your projects but adapts to the naming conventions that your are used to.\n\nSee the website [flexeble.space](https://flexeble.space/) for demo examples\n\nSee all [customisable variables](https://github.com/jackmcpickle/flex_e_ble/blob/master/src/scss/modules/_vars.scss)\n\n## Requirements\n\n* [include-media](https://github.com/eduardoboucas/include-media) for responsive grid generation\n\n## Install\n\n* `npm install flex_e_ble` or copy `dist/_flex_e_ble.scss`\n\n## How it works\n\nFlex_e_ble was originally based on [purecss.io](http://purecss.io/) grid work.\n\n\nRow css looks like\n```scss\n.row {\n  display: flex;\n  flex-flow: row wrap;\n  position: relative;\n}\n\n```\n\nGrid css looks like\n```scss\n[class*=grid-] {\n  display: inline-block;\n}\n```\n\n## Usage\n\nA basic grid class structure is a follows ```.$global-name-space-$grid-name-$breakpointsize-$columnindex```\n\n\nMake a simple 5 column grid with 30px gutters either side\n```scss\n@import 'flex_e_ble';\n$total-columns: 5;\n$column-gutter: 30px;\n$auto-column-gutters: true;\n```\n\nWill output the grid as follows\n\n```css\n\n.grid-1 { width: 20%; }\n\n.grid-2 { width: 40%; }\n\n/*...etc... */\n\n```\n\n\nWant a Bootstrap class structure?\n```scss\n@import 'flex_e_ble'\n// Bootstrap like\n$grid-name: 'col-';\n$base-grid-name: 'xs';\n$column-gutter: 15px;\n$auto-column-gutters: true;\n$right-name: 'push';\n$left-name: 'pull';\n$breakpoints: (\n  'sm': 480px,\n  'md': 768px,\n  'lg': 1024px,\n  'xl': 1180px\n);\n```\n\nOutputs a grid using the bootstrap naming convention\n```css\n.col-xs-1 { width: 8.33333%; }\n\n.col-xs-2 { width: 16.66667%; }\n\n/*...etc... */\n```\n\nWant a Foundation class structure?\n```scss\n@import 'flex_e_ble';\n// foundation like;\n$column-gutter: 0.9375rem;\n$auto-column-gutters: false;\n$independant-grid-name: 'column';\n$grid-name: '';\n$base-grid-name: 'small';\n$breakpoints: (\n  'medium': 768px,\n  'large': 1024px\n);\n```\n\nWill output our grid as follows\n```css\n.small-1 { width: 8.33333%; }\n\n.small-2 { width: 16.66667%; }\n\n/*...etc... */\n```\n\nBut remember underneath the properties outputted are just the same.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackmcpickle%2Fflex_e_ble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjackmcpickle%2Fflex_e_ble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackmcpickle%2Fflex_e_ble/lists"}