diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index e69de29..0000000 diff --git a/README.md b/README.md index 1dbd38d..212c5fa 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,6 @@ Flat Sass Boilerplate gives you an amount of basic settings, components, helpers The problem of most frameworks is they trying to hard adding a lot of styles, which has to be customized and documented if you used it for a Project. Often these changes cause a loss of performance and raise the probability of errors. -[Documentation](https://crispy-boilerplate.readthedocs.io/en/latest/) - ## Coding Style The boilerplate uses as coding style [http://getbem.com/](BEM), but as a more simpler idea of it. One of the benefits of BEM is that you create components and can reuse them. But one the other hand it can be really strange if you overthinking it. diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 8650bbb..0000000 --- a/docs/index.html +++ /dev/null @@ -1,814 +0,0 @@ - - - - - - - Cripsy Boilerplate - - - - - - - - - - -
- - - - - - -
-
-

- Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions. -

-

- The problem of most frameworks is they trying to hard adding a lot of styles - which has to be customized and documented if you used it for a Project. - Often these changes cause a loss of performance and raise the propability of errors. -

-

- Crispy Boilerplate uses also the following libraries: -

- - -

Coding Style

-

- The boilerplate uses as coding style BEM, - but as a more simpler idea of it. One of the benefits of BEM is that you create components and can reuse them. - But one the other hand it can be really strange if you overthinking it. -

-

Not Fancy but Small

-

- Components are created to give you a structure and a basic set of styles and not to look fancy. - The idea is to extend each component and save time to write a bunch of extra CSS code and - therefore get more performance while minimize the causes of errors. Of Course is really Fancy to get more Performance and less Errors. -

-

Include

-

- Components and Helpers are organizes as Mixins, that makes it a little easier to - to add Styles you need. -

- - -
-

Getting Started

-

Installation

- 
npm install crispy-boilerplate
-

Main SCSS-file:

- 
@import
-    "crispy";
-

After this include mixins you need:

- 
@include crispy__*()
-

To overwrite defaults simple add your own config-file before importing crispy:

- 
@import
-    "config",
-    "crispy";
- -

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. -

- - -
-

- Typography -

- - -

a

-

Html:

- 
<a href=""></a>
-

- Color of Text is set by $crispy__color-primary. Hover is set by - $crispy__color-text -

- - -

abbr

-

Html:

- 
<abbr title=""></abbr>
-

- Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats -

- - -

blockquote

-

Html:

- 
<blockquote></blockquote>
-
- Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag. -
- - -

hr

-

Html:

- 
<hr>
-

-

-

- - -

paragraph

-

Html:

- 
<p></p>
-

- Glossier viral occupy mixtape pok pok. -

- - -

mark

-

Html:

- 
<mark></mark>
-

- Pug before they four loko Deep v bespoke -

- - -

list

-

Html:

- 
<ul>
-    <li>item 1</li>
-    <li>item 2
-        <ul>
-            <li>child item 1</li>
-            <li>child item 2</li>
-        </ul>
-    </li>
-</ul>
-<ol>
-    <li>item 1</li>
-    <li>item 2</li>
-</ol>
-<dl>
-    <dt>defined title 1</dt>
-    <dd>defined item 1</dd>
-</dl>
-
    -
  • item 1
    • -
  • - item 2 -
      -
    • child item 1
      • -
    • child item 2
      • -
    -
    • -
-
    -
  1. item 1
    2. -
  2. item 2
    3. -
-
-
defined title 1
-
defined item 1
-
- - -
-

- Components -

- - -

- Button -

-

Html:

- 
<button class="button"></button>
-<button class="button button--wide"></button>
- - - - -

- Code -

-

Html:

- 
<pre class="code"><code></code></pre>
- - -

- Group -

-

Html:

- 
<nav class="group">
-    <ul class="group__section">
-        <li class="group__item">first item</li>
-        <li class="group__item">second item</li>
-        <li class="group__item">third item</li>
-    </ul>
-</nav>
-
- -
-

Html:

- 
<nav class="group group--horizontal">
-    <ul class="group__section group__section--separate">
-        <li class="group__item">first item</li>
-        <li class="group__item">second item</li>
-        <li class="group__item">third item</li>
-    </ul>
-</nav>
-
- -
- - -

- Heading -

-

Html:

- 
<h2></h2>
-<h2 class="h3"></h2>
-

Sass:

- 
$crispy__heading__font-sizes: (
-    'h1': 40px,
-    'h2': 36px,
-    'h3': 32px,
-    'h4': 28px,
-    'h5': 24px,
-    'h6': 20px
-) !default;
- -

Heading h1

-

Heading h1

-

Heading h1

-

Heading h1

-
Heading h1
-
Heading h1
- - -

- Hero -

-

Html:

- 
<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
-
- - -

- Icon -

-

Html:

- 
<svg class="icon icon--small" alt="beaker" viewBox="0 0 100 100">
-    <use xlink:href="/svg/icons.svg#beaker" />
-</svg>
-<svg class="icon" alt="beaker" viewBox="0 0 100 100">
-    <use xlink:href="/svg/icons.svg#beaker" />
-</svg>
-<svg class="icon icon--large" alt="beaker" viewBox="0 0 100 100">
-    <use xlink:href="/svg/icons.svg#beaker" />
-</svg>
-<svg class="icon icon--danger" alt="alert" viewBox="0 0 100 100">
-    <use xlink:href="/svg/icons.svg#alert" />
-</svg>
-
- - - - - - - - - - - - - - -

- Modal -

-

Html:

- 
<div class="modal modal--bottom width-100">
-     <div class="panel">
-        <div class="panel__inner">
-            Lorem Ipsum
-        </div>
-    </div>
-</div>
-
-
-
-
- Lorem Ipsum -
-
-
-
- - -

- Panel -

-

Html:

- 
<div class="panel">
-    <div class="panel__inner">
-        Lorem Ipsum
-    </div>
-</div>
-
-
- Lorem Ipsum -
-
- - -

- Table -

-

Html:

- 
<table class="table table--striped">
-    <thead>
-        <tr>
-            <th></th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td></td>
-        </tr>
-    </tbody>
-</table>
- - - - - - - - - - - - - - - - - - - - - - -
nameage
Mr. Brown43
Mr. Magenta32
Mr. White45
- - -

- Checkbox -

-
- - -
-
- - -
- error item 1 -
-
- - -

- Radio -

-
- -
- - -
- - -
- -
- - -
- error item 1 -
-
- - -

- Select -

-
- -
-
- -
- - -

- Input / Textarea -

-
- -
-
- -
- error item 1 -
-
-
- -
- error item 1 -
-
-
- -
-
- -
- error item 1 -
-
- - -
-

- Functions -

- - -

- toEm()
- toRem() -

-

Sass:

- 
toEm(5px);
-toEm(10px 10px 0 0);
-toRem(10px 10px 0 0);
-
-

- Returns em and rem, accepts px and unitless values. -

- - -

- stripUnit() -

-

Sass:

- 
toEm(10px);
-

- Returns value without unit. -

- - -
-

- Helpers -

- - -

- Float -

- 
<div class="text-left"></div>
-<div class="text-center"></div>
-<div class="text-right"></div>
-<div class="text-justify"></div>
-<div class="float-left"></div>
-<div class="float-center"></div>
-<div class="float-none"></div>
-<div class="center"></div>
-<div class="clearfix"></div>
- - -

- Margin -

-

- margin-top and -bottom from $crispy__margin as px. -

- 
<div class="panel margin-bottom-0x">margin-bottom-0x</div>
-<div class="margin-bottom-1x">margin-bottom-1x</div>
-<div class="margin-bottom-2x">margin-bottom-2x</div>
-<div class="margin-bottom-3x">margin-bottom-3x</div>
-<div class="margin-bottom-4x">margin-bottom-4x</div>
-<div class="margin-bottom-5x">margin-bottom-5x</div>
-
margin-bottom-0x
-
margin-bottom-1x
-
margin-bottom-2x
-
margin-bottom-3x
-
margin-bottom-4x
-
margin-bottom-5x
- - -

- Media -

- 
<img class="img-responsive" src="https://picsum.photos/400" />
-<figure>
-    <img class="img-responsive" src="https://picsum.photos/400" />
-    <figcaption class="text-center">Lorem Ipsum</figcaption>
-</figure>
-<div class="video-responsive" style="height: 280px;">
-    <iframe src="https://giphy.com/embed/13XW2MJE0XCoM0" width="480" height="361"></iframe>
-</div>
-
-
- -
-
-
- -
Lorem Ipsum
-
-
-
-
-
-
- -
-
-
- - -

- Text -

- 
<div class="text-left"></div>
-<div class="text-center"></div>
-<div class="text-right"></div>
-<div class="text-justify"></div>
-<div class="text-italic"></div>
-<div class="text-normal"></div>
-<div class="text-bold"></div>
-<div class="text-uppercase"></div>
-<div class="text-lowercase"></div>
-<div class="text-small"></div>
-<div class="text-crossed"></div>
- -

- Also there are classes for, -

-
    -
  • text-* with $crispy__font-sizes for "font-size"
    • -
  • text-* with $crispy__colors for "color"
    • -
  • background-* with $crispy__font-sizes for "background-color"
    • -
- - -

- Width -

- 
<div class="panel width-25">width-25</div>
-<div class="width-50">width-50</div>
-<div class="width-75">width-75</div>
-<div class="width-100">width-100</div>
-
width-25
-
width-50
-
width-75
-
width-100
- - -
-

- Mixins -

- - -

- Media Queries -

-

- These @mixins were used with the Breakpoints from the Reflex Grid. -

-
    -
  • xs 576px
    • -
  • sm 768px
    • -
  • md 992px
    • -
  • lg 1200px
    • -
  • xlg 1600px
    • -
-

Html:

- 
<div class="sm">sm</div>
-<div class="md">md</div>
-<div class="md-only">md-only</div>
-<div class="lg-only">lg-only</div>
-

Sass:

- 
.sm, .md, .md-only, .lg-only {
-    display: none;
-}
-
-.sm {
-    @include crispy__media-sm() {
-        display: block;
-    }
-}
-
-.md {
-    @include crispy__media-md() {
-        display: block;
-    }
-}
-
-.md-only {
-    @include crispy__media-md-only() {
-        display: block;
-    }
-}
-
-.lg-only {
-    @include crispy__media-lg-only() {
-        display: block;
-    }
-}
-
-
-
sm
-
-
-
md
-
-
-
md-only
-
-
-
lg-only
-
-
- - -
-

- Reflex Grid -

-

- The Reflex Grid is from Lee Jordan. I have build a few helper for media-queries. Reflex Grid is lightweight, simple and uses a flexbox grid with cross browser - support, an inline-block fallback. -

-

- Documentation: http://reflexgrid.com/docs/
Github: https://github.com/leejordan/reflex -

-
-
-
- - - - - - - diff --git a/docs/index.rst b/docs/index.rst deleted file mode 100644 index 1b43de7..0000000 --- a/docs/index.rst +++ /dev/null @@ -1,43 +0,0 @@ -# Cripsy-Boilerplate - Less is more - -Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions. - -The problem of most frameworks is they trying to hard adding a lot of styles, which has to be customized and documented -if you used it for a Project. Often these changes cause a loss of performance and raise the propability of errors. - -[Documentation](https://crispy-boilerplate.readthedocs.io/en/latest/) - -## Coding Style - -The boilerplate uses as coding style [http://getbem.com/](BEM), but as a more simpler idea of it. One of the benefits of BEM is that you create components and can reuse them. But one the other hand it can be really strange if you overthinking it. - -## Not Fancy but Small - -Components are created to give you a structure and a basic set of styles and not to look fancy. The idea is to extend each component and save time to write a bunch of extra CSS code and therefore get more performance while minimize the causes of errors. Of Course is really Fancy to get more Performance and less Errors. - -## Getting Started - -``` -npm install crispy-boilerplate -``` - -Main SCSS-File: - -``` -@import - "crispy"; -``` - -After this, include Mixins you need: - -``` -@include crispy__*() -``` - -To overwrite defaults simple add your own config-file after importing crispy: - -``` -@import - "crispy", - "config"; -``` diff --git a/docs/typography.rst b/docs/typography.rst deleted file mode 100644 index e69de29..0000000 diff --git a/package.json b/package.json index cc18022..ac78734 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "crispy-boilerplate", - "version": "1.2.0", + "version": "1.2.1", "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions", "repository": { "type": "git", @@ -23,7 +23,6 @@ "postcss-css-variables": "^0.11.0" }, "dependencies": { - "bootstrap": "^4.2.1", "normalize-scss": "^7.0.1" } }