{"id":13858914,"url":"https://github.com/fortrabbit/teutonic-css","last_synced_at":"2025-07-14T01:32:10.067Z","repository":{"id":32683508,"uuid":"139456595","full_name":"fortrabbit/teutonic-css","owner":"fortrabbit","description":"A modern CSS framework — versatile, well documented. ","archived":true,"fork":false,"pushed_at":"2023-05-08T17:55:57.000Z","size":858,"stargazers_count":314,"open_issues_count":5,"forks_count":17,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-11-02T07:51:30.519Z","etag":null,"topics":["css","css-framework","scss"],"latest_commit_sha":null,"homepage":"https://teutonic.co","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/fortrabbit.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-07-02T14:46:48.000Z","updated_at":"2024-10-21T20:01:41.000Z","dependencies_parsed_at":"2024-02-17T01:21:12.796Z","dependency_job_id":"90a96acc-b857-4b57-b22e-131588f81fd3","html_url":"https://github.com/fortrabbit/teutonic-css","commit_stats":{"total_commits":149,"total_committers":4,"mean_commits":37.25,"dds":0.4899328859060402,"last_synced_commit":"0e9a89fd9f87e242c522f23cd31d9d1929e2141b"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortrabbit%2Fteutonic-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortrabbit%2Fteutonic-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortrabbit%2Fteutonic-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fortrabbit%2Fteutonic-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fortrabbit","download_url":"https://codeload.github.com/fortrabbit/teutonic-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225938719,"owners_count":17548540,"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","scss"],"created_at":"2024-08-05T03:02:25.962Z","updated_at":"2024-11-22T17:30:31.151Z","avatar_url":"https://github.com/fortrabbit.png","language":"SCSS","funding_links":[],"categories":["SCSS"],"sub_categories":[],"readme":"# Teutonic CSS (retired)\n\nAs of 2023-05 Teutonic CSS will no longer be continued. More details [here](https://medium.com/teutonic-css/retiring-my-own-little-css-framework-e0a130ca2a33).\n\nTeutonic CSS is a modern web design system to develop responsive, accessible websites and web applications. It's based on CSS Variables for easy customization and extension. It features cool tech like CSS Grid. The source is a collection of SCSS modules, but you can use the minified version, as it can be modified using CSS Vars.\n\nThis repo only contains the pure SCSS files to build the CSS from, also check out the [Teutonic Docs](https://github.com/fortrabbit/teutonic-css-docs).\n\n## Philosophy\n\n* Little things play together nicely\n* Slim but not skinny\n* Do more with less\n* Faster is better\n* A clean look\n* Opinionated\n\n\n## Feature galore\n\n* 2 grids: CSS Grid, Columns\n* For modern browsers only\n* CSS Vars customization\n* CSS only, BYO JavaScript\n* SCSS modules based source\n* Free and open source\n* Inverted styles\n* All responsive\n\n\n## Good to know\n\n* Only MS Edge, no Internet Explorer support\n* * { box-sizing: border-box}\n* No screen reader support\n* No JavaScript included\n\n\n## Basic usage\n\n1. Prototype: include the CSS from the CDN\n2. Customize: match your brand with CSS vars\n3. Fork: Build your own from the SCSS source\n\n\n## Use cases and applications\n\n* Websites: marketing, blogs …\n* Web based applications: dashboards, eCommerce …\n\n\n## Tested browsers\n\nTeutonic CSS is made for modern browsers.\n\n* Google Chrome 65\n* Safari 12\n* Firefox 60\n* MS Edge 42\n\nIt will not work on much older browsers, not even MS IE. Use at least CSS feature detection (@supports) to warn the user.\n\n\n## BYO JavaScript\n\nNo JavaScript here. Bring your own JS implementation.\n\n\n### Name origins\n\n_\"Teutonic by nature\"_ is a philosophy by fortrabbit …\n\n\n### The color system\n\nFull black and full white are like in [nature](https://graphicdesign.stackexchange.com/questions/5497/why-is-black-not-a-natural-color) not used in big areas here. This way the bright colors of buttons will stand out a little more. But that's just one flavor.\n\n### Pseudo-atomic design\n\nTeutonic only loosely makes use of [Atomic design](http://atomicdesign.bradfrost.com/) philosophy, currently. No fancy web components.s\n\n\n### CSS classes for humans\n\nI like to understand HTML templates when I look at them. The Teutonic CSS class names are not following any strict naming convention, like BEM or OCSS. Most classes have speaking names, like `flex` to initiate Flexbox and `grid` for CSS Grid. Often used utility classes have very short abbreviations, like `pa-t-xl` for extra large padding top. More obscure class names often have longer abbreviations. Sometimes the class name is mix between property and value, sometimes it's just the value. Memorability over convention. \n\nThis is subject to change in future versions for more strict naming conventions.\n\n#### CSS class name goals\n\n* Easy to read and write\n* Few class names as possible\n* Combine classes in meaningful ways\n* Short class names\n* Memorable names\n* Failure tolerant\n* Limited choices for a better design\n* Keep it simple stupid\n\n#### CSS class types\n\n* Grid and layout helper classes like `.grid` and `.flex`\n* Design system classes `.box`\n* Resets and default styling for HTML elements, like `.textarea`\n* Additional helper clases like `.form-label`\n* Utility classes like `.pa-s` and `.ma-top-s`\n\n\n## Features\n\n### Flexbox based grid system\n\nThere is no clearfix hack here. Teutonic CSS contains a 'rigit' Flexbox grid system. The Teutonic Flexbox CSS grid has a few unique features.  The Teutonic CSS grid is used like a traditional floating grid, where container are floating in rows. Still the grid relies on negative margins which sometimes acts a bit strange/unexpected.\n\n### CSS Grid based grid\n\nThere is an additional CSS Grid based grid. There are some shared features with the Flexbox grid system, others are unique.\n\n\n### Responsive approach\n\nTeutonic CSS is mostly \"desktop first\" framework. Simply because, it was developed on a desktop computer. But it aims to behave very well on mobile, your cooperation provided. It makes use of viewport units with `vw, vh` and relative units with `rem`. So it has very little re-writes for only three device breakpoints: Desktop, Tablet \u0026 Phone. The grid system features mobile classes for smart collapsing: A row of four items on Desktop can collapse to two rows of two items on Tablet.\n\n## Usage\n\n### SCSS built system\n\nBrowse the GitHub repo and grab whatever you like. The main `teutonic.scss` file contains all the include within the include folder.\n\nThere are NPM build scripts included here. Check the `package.json` for more.\n\n* [Usage guide on the website](https://teutonic.co/usage)\n\n### Documentation\n\nThe GitHub repo contains the SCSS source files and the documentation files. The docs are based on Jekyll and are rendered as GitHub pages here.\n\n* [The Teutonic docs on GitHub](https://github.com/fortrabbit/teutonic-css-docs)\n\n## Key- \u0026 Buzz-words\n\n* agnostic\n* boilerplate\n* design system\n* fast\n* flat\n* lightweight\n* low-friction\n* modern\n* modular\n* opinionated\n* performance\n* powerful\n* reusable\n* SCSS modules\n* skeuomorphism\n* universal\n* utilities\n* web interfaces\n\n\n## Author\n\n* [Frank Lämmer](https://twitter.com/frank_laemmer)\n\n## License\n\nCode for the Teutonic CSS released under MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffortrabbit%2Fteutonic-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffortrabbit%2Fteutonic-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffortrabbit%2Fteutonic-css/lists"}