https://github.com/untangled-web/untangled-ui
A library that contains pre-written UI components such as form support, image clipping, image library, date pickers, etc.
https://github.com/untangled-web/untangled-ui
clojurescript css postcss react-components visual-regression-tests web-components
Last synced: 4 months ago
JSON representation
A library that contains pre-written UI components such as form support, image clipping, image library, date pickers, etc.
- Host: GitHub
- URL: https://github.com/untangled-web/untangled-ui
- Owner: untangled-web
- License: mit
- Created: 2016-09-09T00:12:48.000Z (over 9 years ago)
- Default Branch: develop
- Last Pushed: 2018-10-23T18:30:20.000Z (over 7 years ago)
- Last Synced: 2026-01-30T12:41:22.381Z (4 months ago)
- Topics: clojurescript, css, postcss, react-components, visual-regression-tests, web-components
- Language: Clojure
- Homepage: http://untangled-web.github.io/untangled-ui/
- Size: 7.86 MB
- Stars: 14
- Watchers: 4
- Forks: 10
- Open Issues: 6
-
Metadata Files:
- Readme: README-css.md
- License: LICENSE
Awesome Lists containing this project
README
# Untangled CSS Library
This project is provided as an optional CSS library for use with Untangled UI. It is generally applicable
to any web-based project (it simply results in CSS).
## Quick start
In your command line application, you will want to install the necessary tools
to start working on the UI framework. Make sure your other projects are at the
same level for synced releases.
### Install
*Note:* Yarn only applies to you if your only using this framework, otherwise figwheel will install all the npm packages for you
- **Soon** Download the latest release
- Clone the repo: `git clone https://github.com/untangled-web/untangled-ui.git`
- Install [npm](https://www.npmjs.com/package/npm)
- Install with [yarn](https://yarnpkg.com)
### Development
If you're actively working on changing CSS rules in this library, you
will want to clone this repository and run these commands:
``` shell
npm i -g gulp
npm i
gulp watch
```
## Publishing
For now, I think a PR for version bump is good enough.
### index.html
Make sure to add these things to your layout file. Optionally, for legacy browser support of HTML5 and layout, you can import [modernizr](https://modernizr.com/)/[cdn](http://cdnjs.com/libraries/modernizr) into your head section.
```html
```
To continue on the path of layout, refer to the [example layout](#example-layout) section in the CSS Guide.
### Layers
This UI framework consists of multiple UI layers that serve their own purposes.
```example
.utilities
```
```example
Elements
```
```example
Components
```
```example
```
### Syntax
Synopsis - Give developers more knowledge about how the classes behave in a non-relative sense: BEM + ITCSS = BEMIT
###### Sources
[More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)
[BEMIT: Taking the BEM Naming Convention a Step Further](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/)
#### Anatomy
```css
.namespace-block__element--modifier\@media { }
```
#### Namespaces
```css
/* Object */
.o-object-name[/] {}
/* Component */
.c-component-name[/] {}
/* Utility */
.u-utility-name {}
/* Theme */
.t-theme-name {}
/* Scope */
.s-scope-name {}
/* State */
.[is/has]-state {}
/* Hack */
._hack-name {}
/* Javascript */
.js-component-name {}
/* Quality Assurance */
.qa-node-name {}
```
#### Responsive Suffixes
Breakpoints
```css
.o-object-name\@sm {}
.o-object-name\@md {}
.o-object-name\@lg {}
```
Media type
```css
.u-utility-name\@print {}
```