Browse Source

adding

master
Björn 5 years ago
parent
commit
c0675ccac7
6 changed files with 57 additions and 13 deletions
  1. +52
    -8
      README.md
  2. +2
    -2
      dist/example/index.html
  3. +1
    -1
      package.json
  4. +0
    -0
      src/crispy_all.scss
  5. +0
    -0
      src/crispy_minimal.scss
  6. +2
    -2
      webpack.mix.js

+ 52
- 8
README.md View File

@ -1,28 +1,72 @@
# Crispy - Lightweight CSS / SASS Framework
# Crispy - Lightweight CSS / SCSS Framework
## Installation ## Installation
``` ```
npm install crispy-boilerplate
npm install crispy-css
``` ```
Main SCSS-File:
## How it works
### SCSS
```
@import
"crispy";
```
Now include Mixins you need. Components and Modifiziers only works if you include them,</
```
@include crispy__core();
@include crispy__modifiers();
// components
@include crispy__button();
@include crispy__code();
@include crispy__field();
@include crispy__group();
@include crispy__heading();
@include crispy__hero();
@include crispy__icon();
@include crispy__media();
@include crispy__modal();
@include crispy__overlay();
@include crispy__panel();
@include crispy__table();
```
For Custom Variables add a File before importing Crispy,
``` ```
@import @import
"variables",
"crispy"; "crispy";
``` ```
After this, include Mixins you need:
If you need all, mixins will be included,
``` ```
@include crispy__*()
@import
"crispy_all";
``` ```
To overwrite defaults simple add your own config-file after importing crispy:
Only need Core and Modifiziers?
``` ```
@import @import
"crispy",
"config";
"crispy_minimal";
``` ```
### CSS
For using CSS you can use crispy.css for all Styles or crispy_mininmal.css without Components.
## Example
You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
### Site
Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.
### Templates
Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.

+ 2
- 2
dist/example/index.html View File

@ -26,7 +26,7 @@
</h1> </h1>
</a> </a>
<h2 class="h6"> <h2 class="h6">
Lightweight CSS / SASS Framework
Lightweight CSS / SCSS Framework
</h2> </h2>
</hgroup> </hgroup>
</div> </div>
@ -117,7 +117,7 @@
@include crispy__overlay(); @include crispy__overlay();
@include crispy__panel(); @include crispy__panel();
@include crispy__table();</code></pre> @include crispy__table();</code></pre>
<p>For Custom Variables add a File before importing Crispy</p>
<p>For Custom Variables add a File before importing Crispy,</p>
<pre class="code"><code>@import <pre class="code"><code>@import
"variables", "variables",
"crispy";</code></pre> "crispy";</code></pre>


+ 1
- 1
package.json View File

@ -1,5 +1,5 @@
{ {
"name": "crispy",
"name": "crispy-css",
"version": "2.0.0", "version": "2.0.0",
"description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions", "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
"repository": { "repository": {


src/all.scss → src/crispy_all.scss View File


src/minimal.scss → src/crispy_minimal.scss View File


+ 2
- 2
webpack.mix.js View File

@ -11,14 +11,14 @@ let mix = require('laravel-mix');
| |
*/ */
mix.sass('src/all.scss', 'dist/crispy.css', {
mix.sass('src/crispy_all.scss', 'dist/crispy_all.css', {
sassOptions: { sassOptions: {
includePaths: [ includePaths: [
'node_modules/normalize-scss/sass' 'node_modules/normalize-scss/sass'
] ]
} }
}) })
.sass('src/minimal.scss', 'dist/crispy_minimal.css', {
.sass('src/crispy_minimal.scss', 'dist/crispy_minimal.css', {
sassOptions: { sassOptions: {
includePaths: [ includePaths: [
'node_modules/normalize-scss/sass' 'node_modules/normalize-scss/sass'


Loading…
Cancel
Save