Teutonic 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.
This repo only contains the pure SCSS files to build the CSS from, also check out the Teutonic Docs.
- Little things play together nicely
- Slim but not skinny
- Do more with less
- Faster is better
- A clean look
- Opinionated
- 3 grids: CSS Grid, Flexbox, Columns
- For modern browsers only
- CSS Vars customization
- CSS only, BYO JavaScript
- SCSS modules based source
- Free and open source
- Inverted styles
- All responsive
- Only MS Edge, no Internet Explorer support
-
- { box-sizing: border-box}
- No screen reader support
- No JavaScript included
- Prototype: include the CSS from the CDN
- Customize: match your brand with CSS vars
- Fork: Build your own from the SCSS source
- Websites: marketing, blogs …
- Web based applications: dashboards, eCommerce …
Teutonic CSS is made for modern browsers.
- Google Chrome 65
- Safari 12
- Firefox 60
- MS Edge 42
It will not work on much older browsers, not even MS IE. Use at least CSS feature detection (@supports) to warn the user.
No JavaScript here. Bring your own JS implementation.
"Teutonic by nature" is a philosophy by fortrabbit …
Full black and full white are like in nature 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.
Teutonic only loosely makes use of Atomic design philosophy, currently. No fancy web components.s
I 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.
This is subject to change in future versions for more strict naming conventions.
- Easy to read and write
- Few class names as possible
- Combine classes in meaningful ways
- Short class names
- Memorable names
- Failure tolerant
- Limited choices for a better design
- Keep it simple stupid
- Grid and layout helper classes like
.gridand.flex - Design system classes
.box - Resets and default styling for HTML elements, like
.textarea - Additional helper clases like
.form-label - Utility classes like
.pa-sand.ma-top-s
There 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.
There is an additional CSS Grid based grid. There are some shared features with the Flexbox grid system, others are unique.
Teutonic 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 & 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.
Browse the GitHub repo and grab whatever you like. The main teutonic.scss file contains all the include within the include folder.
The GitHub repo contains the SCSS source files and the documentation files. The docs are based on Jekyll and are rendered as GitHub pages here.
- agnostic
- boilerplate
- design system
- fast
- flat
- lightweight
- low-friction
- modern
- modular
- opinionated
- performance
- powerful
- reusable
- SCSS modules
- skeuomorphism
- universal
- utilities
- web interfaces
Code for the Teutonic CSS released under MIT license.