Skip to content

Commit

Permalink
Merge pull request #40 from webpixels/v2-dev
Browse files Browse the repository at this point in the history
Update README.md
  • Loading branch information
extrabright authored Oct 2, 2023
2 parents dcf0ef9 + 7843908 commit 1d2515c
Showing 1 changed file with 9 additions and 25 deletions.
34 changes: 9 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<p align="center"><a href="https://webpixels.io/start" target="_blank"><img src="https://webpixels.s3.eu-central-1.amazonaws.com/public/github/logo.png" width="200" height=""></a></p>
<p align="center"><a href="https://webpixels.io?ref=github" target="_blank"><img src="https://webpixels.s3.eu-central-1.amazonaws.com/public/github/logo.png" width="200" height=""></a></p>

<h3 align="center">Webpixels CSS</h3>
<h3 align="center">Webpixels CSS <sup>2</sup></h3>

<p align="center">
Utility and component-centric Design System based on Bootstrap for fast, responsive UI development.
Expand All @@ -17,7 +17,7 @@
<a href="https://webpixels.io/blog/">Blog</a>
</p>

<p align="center"><a href="https://webpixels.io/start" target="_blank"><img src="https://webpixels.s3.eu-central-1.amazonaws.com/public/github/products/css.png" ></a></p>
<p align="center"><a href="https://webpixels.io?ref=github" target="_blank"><img src="https://webpixels.s3.eu-central-1.amazonaws.com/public/github/products/css.png" ></a></p>

## Install via npm

Expand All @@ -41,37 +41,21 @@ In your `scss` folder create two new files and name them:
In your main.scss, you’ll import the source Sass files. Bootstrap is automatically loaded when you use the source files, so you don't need to worry about what Bootstrap files should you incorporate in your styles.

```scss
@import "@webpixels/css/base";
@import "@webpixels/css/forms";
// Functions
@import "bootstrap/scss/functions";

// Load all the components
@import "@webpixels/css/components";
// Main
@import "@webpixels/css/main";
```

or pick the parts you need:

```scss
@import "@webpixels/css/base";
@import "@webpixels/css/forms";

// Load only the components you use
@import "@webpixels/css/components/alerts";
@import "@webpixels/css/components/avatars";
@import "@webpixels/css/components/buttons";
@import "@webpixels/css/components/navbars";
@import "@webpixels/css/components/cards";
```

[**Click here**](https://github.com/webpixels/css/blob/master/scss/components/_index.scss) to see the complete list of available components.

### Import the utility classes

In Webpixels CSS you'll notice that we don't create custom styles, but rather make use of the utility classes. We are using the new Bootstrap Utility API to generate a comprehensive list of classes.

In your utility.scss you'll import all the utilities:

```scss
@import "@webpixels/css/utilities";
@import "@webpixels/css/utility";
```

## Documentation
Expand Down Expand Up @@ -107,7 +91,7 @@ Get updates on the development of our CSS tool and chat with the project maintai

## Thank you

- [Mark Otto and the Team](https://github.com/twbs/bootstrap)
- [Bootstrap](https://github.com/twbs/bootstrap)

## License

Expand Down

0 comments on commit 1d2515c

Please sign in to comment.