Skip to content

Commit 67e1469

Browse files
mlnmlnmlnmln
committed
Duplicate readme
1 parent ec4525b commit 67e1469

1 file changed

Lines changed: 222 additions & 0 deletions

File tree

‎packages/suit/README.md‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
# SUIT CSS
2+
3+
[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](http://gitter.im/suitcss/suit)
4+
5+
Style tools for component-based UI development.
6+
7+
SUIT CSS provides a reliable and testable styling solution for component-based
8+
web application development. The project includes:
9+
10+
* [CSS base styles](https://github.com/suitcss/suit/tree/master/packages/base) for web apps.
11+
* [CSS utilities](https://github.com/suitcss/suit/tree/master/packages/utils).
12+
* [CSS components](https://github.com/suitcss/suit/tree/master/packages/components).
13+
* A [future-facing CSS preprocessor](https://github.com/suitcss/suit/tree/master/packages/preprocessor)
14+
15+
Each of these modules are made up of smaller modules, making it easy to customize
16+
your setup and build pipeline.
17+
18+
**[Documentation](doc/README.md)**.
19+
20+
## Quick start
21+
22+
Install the SUIT package and preprocessor with npm:
23+
24+
```
25+
npm install suitcss --save
26+
npm install suitcss-preprocessor --save-dev
27+
```
28+
29+
Create an `index.css` that will import the SUIT packages. Add values for the
30+
custom media queries and any custom properties that you wish to override:
31+
32+
```css
33+
@import "suitcss";
34+
35+
@custom-media --sm-viewport (min-width: 320px) and (max-width: 640px);
36+
@custom-media --md-viewport (min-width: 640px) and (max-width: 960px);
37+
@custom-media --lg-viewport (min-width: 960px);
38+
39+
:root {
40+
--Grid-gutterSize: 25px;
41+
}
42+
```
43+
44+
Packages can also be installed independently for a more modular build:
45+
46+
```
47+
npm install suitcss-utils-size suitcss-components-grid --save
48+
```
49+
50+
```css
51+
@import "suitcss-components-grid";
52+
@import "suitcss-utils-size";
53+
```
54+
55+
Add an entry to the `scripts` object in `package.json` that will run the
56+
preprocessor:
57+
58+
```json
59+
"scripts": {
60+
"build": "suitcss index.css build/build.css"
61+
}
62+
```
63+
64+
Now run `npm run build` on the command line to output the built packages to
65+
`build/build.css`. The preprocessor can also watch for file changes by passing
66+
the `-w` flag e.g. `npm run build -- -w`.
67+
68+
Refer to the [SUIT theme](https://github.com/suitcss/suit/tree/master/packages/theme) for a more thorough
69+
example.
70+
71+
## Community Packages
72+
73+
### Components
74+
75+
* https://github.com/antontrollback/select
76+
* https://github.com/giuseppeg/suitcss-toolkit
77+
* https://github.com/simonsmith/suitcss-components-form-field
78+
79+
### Utilities
80+
81+
* https://github.com/frekyll/suitcss-utils-spacing
82+
* https://github.com/simonsmith/suitcss-utils-image
83+
* https://github.com/simonsmith/suitcss-utils-list
84+
85+
## Example
86+
87+
SUIT CSS makes use of variables, custom media queries, and dependency resolution for CSS.
88+
89+
HTML:
90+
91+
```html
92+
<article class="Excerpt u-cf">
93+
<img class="Excerpt-thumbnail u-sizeFit" src="{{src}}" alt="">
94+
<div class="u-sizeFill">
95+
<h1 class="Excerpt-title"><a href="{{url}}">{{title}}</a></h1>
96+
<p class="Excerpt-text u-textBreak">{{description}}</p>
97+
<span class="Excerpt-readMore">
98+
<!-- BUTTON COMPONENT -->
99+
</span>
100+
</div>
101+
</article>
102+
```
103+
104+
CSS:
105+
106+
```css
107+
/** @define Excerpt */
108+
109+
@import "suitcss-utils-layout";
110+
@import "suitcss-utils-size";
111+
@import "suitcss-utils-text";
112+
@import "./Button";
113+
114+
/**
115+
* Content excerpts. Agnostic of image size, and with a clear call to action.
116+
*/
117+
118+
:root {
119+
--Excerpt-padding: 20px;
120+
--Excerpt-highlightColor: orange;
121+
}
122+
123+
.Excerpt {
124+
padding: var(--Excerpt-padding);
125+
}
126+
127+
.Excerpt-thumbnail {
128+
border: 2px solid var(--Excerpt-highlightColor);
129+
border-radius: 3px;
130+
margin-right: 10px;
131+
}
132+
133+
.Excerpt-title {
134+
border-bottom: 1px solid #ccc;
135+
margin: 0 0 15px;
136+
padding-bottom: 5px;
137+
}
138+
139+
.Excerpt-readMore {
140+
display: inline-block;
141+
margin-top: 10px;
142+
}
143+
```
144+
145+
## CSS packages
146+
147+
Each CSS package can be installed with npm.
148+
It's suggested that you depend on individual packages as and when you need
149+
them, however, you can install all the CSS packages at once if you prefer:
150+
151+
* [npm](https://www.npmjs.org/): `npm install suitcss`
152+
153+
Each package is stand-alone, contains its own documentation and tests, and is
154+
written to follow a common set of [naming conventions](doc/naming-conventions.md).
155+
156+
* [base](https://github.com/suitcss/suit/tree/master/packages/base/): a thin reset for web apps, built on top of normalize.css.
157+
* [utils](https://github.com/suitcss/suit/tree/master/packages/utils/): all the utility packages.
158+
* [components-arrange](https://github.com/suitcss/suit/tree/master/packages/components-arrange/): flexbox-like horizontal arrangements.
159+
* [components-button](https://github.com/suitcss/suit/tree/master/packages/components-button/): robust, structural button styles.
160+
* [components-flex-embed](https://github.com/suitcss/suit/tree/master/packages/components-flex-embed/): aspect-ratios for embeds.
161+
* [components-grid](https://github.com/suitcss/suit/tree/master/packages/components-grid/): a grid foundation.
162+
* [components-test](https://github.com/suitcss/suit/tree/master/packages/components-test/): structure for visual tests.
163+
* [theme](https://github.com/suitcss/suit/tree/master/packages/theme/): example theme.
164+
165+
You can also download pre-built bundles to try things out without setting up a
166+
build process:
167+
168+
* [base bundle](https://github.com/suitcss/base/releases)
169+
* [utils bundle](https://github.com/suitcss/utils/releases)
170+
* [components bundle](https://github.com/suitcss/components/releases)
171+
* [everything bundle](https://github.com/suitcss/suit/releases) (only 4.4KB minified and gzipped)
172+
173+
## Build and test tools
174+
175+
The [suitcss-preprocessor](https://github.com/suitcss/suit/tree/master/packages/preprocessor) runs CSS
176+
through a build pipeline. It performs per-file tests for conformance to the
177+
SUIT CSS naming conventions, offers minification and allows additional PostCSS
178+
plugins to be added. A CLI and Node API are available
179+
180+
The preprocessor makes use of:
181+
182+
* [PostCSS](https://github.com/postcss/postcss): A tool for transforming styles with JS plugins
183+
* [postcss-import](https://github.com/postcss/postcss-import)
184+
* [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties)
185+
* [postcss-calc](https://github.com/postcss/postcss-calc)
186+
* [postcss-custom-media](https://github.com/postcss/postcss-custom-media)
187+
* [autoprefixer](https://github.com/postcss/autoprefixer)
188+
189+
Packages are linted with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and minification is provided by [cssnano](http://cssnano.co/).
190+
191+
## Complementary tools and libraries
192+
193+
Libraries / frameworks for component-based development:
194+
195+
* [React](https://facebook.github.io/react/)
196+
* [Ember.js Components](http://emberjs.com/guides/components/)
197+
* [AngularJS](https://github.com/angular/angular.js)
198+
199+
Tools and dependency managers:
200+
201+
* [npm](https://www.npmjs.org/): package manager.
202+
* [html-inspector](https://github.com/philipwalton/html-inspector): test HTML templates for SUIT CSS conformance.
203+
204+
## Development
205+
206+
Install [Node](http://nodejs.org) (comes with npm).
207+
208+
To generate a build:
209+
210+
```
211+
npm run build
212+
```
213+
214+
## Browser support
215+
216+
* Google Chrome (latest)
217+
* Opera (latest)
218+
* Firefox 4+ (28+ for `flex`)
219+
* Safari 5+ (6.1+ for `flex`)
220+
* Internet Explorer 9+ (10+ for `flex`)
221+
222+
Refer to the [caniuse](http://caniuse.com/) page for [flexbox](http://caniuse.com/#feat=flexbox).

0 commit comments

Comments
 (0)