{"id":13716309,"url":"https://github.com/slavanga/baseguide","last_synced_at":"2025-05-07T05:32:34.662Z","repository":{"id":28318148,"uuid":"31831066","full_name":"slavanga/baseguide","owner":"slavanga","description":"Flexible, fluid and fun CSS framework.","archived":false,"fork":false,"pushed_at":"2022-08-11T19:29:39.000Z","size":3430,"stargazers_count":127,"open_issues_count":0,"forks_count":15,"subscribers_count":12,"default_branch":"develop","last_synced_at":"2025-04-21T01:12:35.458Z","etag":null,"topics":["css","flexbox","framework","grid","responsive","sass","scss"],"latest_commit_sha":null,"homepage":"https://basegui.de","language":"SCSS","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/slavanga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-07T23:11:32.000Z","updated_at":"2025-04-09T06:53:51.000Z","dependencies_parsed_at":"2022-08-17T17:15:16.065Z","dependency_job_id":null,"html_url":"https://github.com/slavanga/baseguide","commit_stats":null,"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavanga%2Fbaseguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavanga%2Fbaseguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavanga%2Fbaseguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavanga%2Fbaseguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slavanga","download_url":"https://codeload.github.com/slavanga/baseguide/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252572785,"owners_count":21770084,"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","flexbox","framework","grid","responsive","sass","scss"],"created_at":"2024-08-03T00:01:09.231Z","updated_at":"2025-05-07T05:32:33.974Z","avatar_url":"https://github.com/slavanga.png","language":"SCSS","readme":"# [Baseguide](https://basegui.de)\n\n[![npm version](https://badge.fury.io/js/baseguide.svg)](https://www.npmjs.com/package/baseguide)\n\nBaseguide is a lightweight and robust CSS framework for prototyping and production code.\n\n* **Responsive** and scalable components\n* **Robust** flexbox grid\n* **Extendable** breakpoint system\n* **Consistent** vertical rhythm and modular scale\n\n\n## Table of Contents\n* [Install](#install)\n* [Development](#development)\n* [Breakpoints](#breakpoints)\n* [Grid](#grid)\n* [Forms](#forms)\n* [Typography](#typography)\n* [Browser Support](#browser-support)\n* [Inspired By](#inspired-by)\n* [License](#license)\n\n\n## Install\n\n### Download\n\n* [baseguide.css](https://raw.githubusercontent.com/slavanga/baseguide/master/dist/css/baseguide.css) (uncompressed)\n* [baseguide.min.css](https://raw.githubusercontent.com/slavanga/baseguide/master/dist/css/baseguide.min.css) (compressed)\n\n### CDN\n\nThis is great for prototyping, but doesn’t allow any customization. To load Baseguide via [unpkg](https://unpkg.com), add this to your ```\u003chead\u003e```:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/baseguide@4.2.0/dist/css/baseguide.min.css\"\u003e\n```\n\n### Package Managers\n\n[npm](https://www.npmjs.com/package/baseguide): `npm install baseguide`\n\n[yarn](https://yarnpkg.com/en/package/baseguide): `yarn add baseguide`\n\n\n## Development\n\n### Dependencies\nUse `npm install` or `yarn install` to install the dev dependencies.\n\n### Gulp\nThe included gulpfile takes care of compiling, optimizing and minifying your assets.\n\n| Command           | Description                                                                                              |\n| :---------------- | :------------------------------------------------------------------------------------------------------- |\n| `gulp`            | Build files, watch for changes and start a local server using [Browsersync](https://www.browsersync.io/) |\n| `gulp build`      | Build files once                                                                                         |\n| `gulp watch`      | Watch files and build when a change occurs                                                               |\n| `gulp lint`       | Lint the scss and js source files                                                                        |\n\n### Sass\nDefault variables can be changed before importing Baseguide.\nTake a look at the [_settings.scss](https://github.com/slavanga/baseguide/blob/master/scss/baseguide/00-settings/_settings.scss) file to see all variables.\n\n```scss\n$button-bg: #bada55; // 1. Customize default variables\n\n@import 'baseguide'; // 2. Import Baseguide\n\n// 3. Add your own styles here\n```\n\n\n## Breakpoints\nBreakpoints can easily be configured using the ```$mq-breakpoints``` map. Note that the breakpoints have to be sorted from small to large.\n\nThe default configuration looks like this:\n\n```scss\n$mq-breakpoints: (\n  xs: 0,\n  sm: 400px,\n  md: 680px,\n  lg: 960px,\n  xl: 1200px\n);\n```\n\nBaseguide generates all the necessary grid and responsive visibility classes based on these breakpoints.\n\n### Media Queries\nMedia Queries are handled by [Sass MQ](https://github.com/sass-mq/sass-mq).\n\n```scss\n// include the media query mixin and pass the breakpoint key\n@include mq(md) {\n\n}\n```\n\nThe snippet above compiles to the following CSS:\n\n```css\n@media (min-width: 42.5em) {\n\n}\n```\n\nCheck out the [Sass MQ documentation](https://sass-mq.github.io/sass-mq/#mixin-mq) for more details and advanced usage of media queries.\n\n### Breakpoint Loop\nThe ```loop-breakpoints``` mixin iterates through all breakpoints. It sets three global variables and outputs the ```@content``` for each breakpoint.\n```scss\n@include loop-breakpoints($breakpoints: $mq-breakpoints, $inclusive: true, $mq: true) {\n  @debug $breakpoint;\n  @debug $is-first-breakpoint;\n  @debug $is-last-breakpoint;\n}\n```\n\nIt’s a powerful tool that for example allows the generation of additional responsive helper classes.\n```scss\n@include loop-breakpoints {\n  .text-#{$breakpoint}-left {\n    text-align: left;\n  }\n\n  .text-#{$breakpoint}-center {\n    text-align: center;\n  }\n\n  .text-#{$breakpoint}-right {\n    text-align: right;\n  }\n}\n```\n\n\n## Grid\nThe grid system is responsive and follows the mobile first pattern. It offers predefined classes for quick layouts as well as powerful mixins for more semantic layouts.\n\nThe number of columns is controlled by the ```$grid-columns``` variable which defaults to 12.\n\n\n### Basic Example\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col col-md-6\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"col col-md-6\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Gutters\nThe gutters are controlled by the ```$grid-gutter``` variable. It can either be a global value across all breakpoints or a map with gutter values per breakpoint.\n\n```scss\n// set gutter for all breakpoints\n$grid-gutter: 60px;\n\n// start with 20px gutter and increase to 40px from the md breakpoint\n// note: breakpoints can be skipped to keep the last defined value\n$grid-gutter: (\n  xs: 20px,\n  md: 40px\n);\n```\n\nAccessing gutter values is easy using the ```get-gutter``` function. The smallest gutter gets returned by default.\n\n```scss\n.col {\n  margin-bottom: get-gutter();\n\n  @include mq(md) {\n    margin-bottom: get-gutter(md);\n  }\n}\n```\n\n### Mixins\nThe grid mixins can be used to create custom containers, rows and columns.\n\n```scss\n// $gutter: gutter width in pixels or map with gutters, defaults to $grid-gutter\n// $size: column width as percentage value, decimal number or column count\n// $columns: an integer, the total number of columns, defaults to $grid-columns\n// $width: container width in pixels, defaults to $grid-container\n\n@include container($gutter, $width);\n@include row($gutter);\n\n@include column-base($gutter, $size, $columns);\n@include column($size, $columns);\n\n@include column-push($size, $columns);\n@include column-pull($size, $columns);\n@include column-offset($size, $columns);\n\n@include column-block($columns);\n```\n\n#### Two Column Layout\n\n```scss\n@include mq(sm) {\n  .col-content {\n    @include column(80%);\n  }\n\n  .col-sidebar {\n    @include column(40%);\n  }\n}\n```\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003carticle class=\"col col-content\"\u003eMain Content\u003c/article\u003e\n    \u003caside class=\"col col-sidebar\"\u003eSidebar\u003c/aside\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Gallery Layout Using Block Grid\n\n```scss\n.col-gallery {\n  @include column-base;\n  @include column-block(3);\n\n  @include mq(md) {\n    @include column-block(6);\n  }\n}\n```\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-gallery\"\u003eGallery item\u003c/div\u003e\n    \u003cdiv class=\"col-gallery\"\u003eGallery item\u003c/div\u003e\n    \u003cdiv class=\"col-gallery\"\u003eGallery item\u003c/div\u003e\n    \u003cdiv class=\"col-gallery\"\u003eGallery item\u003c/div\u003e\n    \u003cdiv class=\"col-gallery\"\u003eGallery item\u003c/div\u003e\n    \u003cdiv class=\"col-gallery\"\u003eGallery item\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n## Forms\n\n### Standard Form Controls\nAll form controls listed in ```$input-selector``` get styled by default. The variable can be changed to a custom selector like ```.form-control```. This will allow you to selectively style form controls based on that selector.\n\n### Custom Form Controls\nThe custom forms component was designed with progressive enhancement in mind.\nBrowsers that support [feature queries](https://caniuse.com/#feat=css-featurequeries) and [appearance](https://caniuse.com/#feat=css-appearance) get the fully enhanced experience.\n\n\n## Typography\n\n### Headings\nThe value for ```$type-scale-base``` defines the smallest heading (h6). From there the remaining heading font sizes are calculated using the ```$type-scale```. Major Third (1.25) is the default type scale. Check [type-scale.com](https://type-scale.com/) for more scales.\n\nBy using a map for ```$type-scale-base``` you can scale all headings up or down in harmony on a specific breakpoint.\n\n```scss\n$type-scale-base: (\n  xs: $font-size-base,\n  md: $font-size-base * 2\n);\n```\n\n\n## Browser Support\n* Latest stable: Chrome, Edge, Firefox\n* IE 11+\n* Safari 9+\n* Mobile Safari 9+\n* Android Browser 4.4+\n\nBaseguide uses [Autoprefixer](https://github.com/postcss/autoprefixer) to handle CSS vendor prefixes.\n\n\n## Inspired By…\n* [Article: Styling with STRINGS](http://simurai.com/blog/2014/05/04/cssconf)\n* [Bootstrap](https://getbootstrap.com)\n* [Bourbon](https://www.bourbon.io)\n* [Foundation](https://foundation.zurb.com)\n* [HTML5 Boilerplate](https://html5boilerplate.com)\n\n\n## License\nThe code is released under the [MIT license](https://github.com/slavanga/baseguide/blob/master/LICENSE).\n","funding_links":[],"categories":["Frameworks / Resources"],"sub_categories":["B"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslavanga%2Fbaseguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslavanga%2Fbaseguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslavanga%2Fbaseguide/lists"}