Teutonic CSS 一个现代的CSS框架 - 功能多样，文档齐全

Teutonic CSS 一个现代的CSS框架 - 功能多样，文档齐全

Teutonic CSS

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.

Philosophy

Little things play together nicelySlim but not skinnyDo more with lessFaster is betterA clean lookOpinionated

Feature galore

3 grids: CSS Grid, Flexbox, ColumnsFor modern browsers onlyCSS Vars customizationCSS only, BYO JavaScriptSCSS modules based sourceFree and open sourceInverted stylesAll responsive

Good to know

Only MS Edge, no Internet Explorer support{ box-sizing: border-box} No screen reader supportNo JavaScript included

Basic usage

Prototype: include the CSS from the CDNCustomize: match your brand with CSS varsFork: Build your own from the SCSS source

Use cases and applications

Websites: marketing, blogs …Web based applications: dashboards, eCommerce …

Tested browsers

Teutonic CSS is made for modern browsers.

Google Chrome 65Safari 12Firefox 60MS 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.

BYO JavaScript

No JavaScript here. Bring your own JS implementation.

Name origins

"Teutonic by nature" is a philosophy by fortrabbit …

The color system

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.

Pseudo-atomic design

Teutonic only loosely makes use of Atomic design philosophy, currently. No fancy web components.s

CSS classes for humans

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.

CSS class name goals

Easy to read and writeFew class names as possibleCombine classes in meaningful waysShort class namesMemorable namesFailure tolerantLimited choices for a better designKeep it simple stupid

CSS class types

Grid and layout helper classes like .grid and .flexDesign system classes .boxResets and default styling for HTML elements, like .textareaAdditional helper clases like .form-labelUtility classes like .pa-s and .ma-top-s

Features

Flexbox based grid system

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.

CSS Grid based grid

There is an additional CSS Grid based grid. There are some shared features with the Flexbox grid system, others are unique.

Responsive approach

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.

Usage

SCSS built system

Browse the GitHub repo and grab whatever you like. The main teutonic.scss file contains all the include within the include folder.

Usage guide on the website

Documentation

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.

The Teutonic docs on GitHub

Key- & Buzz-words

agnosticboilerplatedesign systemfastflatlightweightlow-frictionmodernmodularopinionatedperformancepowerfulreusableSCSS modulesskeuomorphismuniversalutilitiesweb interfaces

Author

Frank Lämmer

License

Code for the Teutonic CSS released under MIT license.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。