tentakelfabrik
/
crispy-css
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

adding

master
Björn 6 years ago
parent
b8d93b9f7c
commit
2c1923f13f
12 changed files with 56 additions and 237 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -28
      README.md
  2. +3
    -5
      example/components/_button.scss
  3. +2
    -5
      example/components/_nav.scss
  4. +0
    -11
      example/example.scss
  5. +15
    -0
      example/site/_footer.scss
  6. +20
    -0
      example/site/_header.scss
  7. +12
    -0
      example/templates/_home.scss
  8. +0
    -65
      src/example/icons/chip.svg
  9. +0
    -15
      src/example/site/_base.scss
  10. +0
    -16
      src/example/site/_footer.scss
  11. +0
    -45
      src/example/site/_header.scss
  12. +0
    -47
      src/example/templates/_home.scss

+ 4
- 28
README.md View File

@ -2,16 +2,10 @@
Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions. 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.
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:
* normalize.css / [https://necolas.github.io/normalize.css/](https://necolas.github.io/normalize.css/)
* opt / [https://octicons.github.com](https://octicons.github.com)
[Documentation](https://crispy-boilerplate.org)
[Documentation](https://crispy-boilerplate.readthedocs.io/en/latest/)
## Coding Style ## Coding Style
@ -21,13 +15,7 @@ The boilerplate uses as coding style [http://getbem.com/](BEM), but as a more si
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. 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 ## Getting Started
### Installation
``` ```
npm install crispy-boilerplate npm install crispy-boilerplate
@ -46,22 +34,10 @@ After this, include Mixins you need:
@include crispy__*() @include crispy__*()
``` ```
To overwrite defaults simple add your own config-file before importing crispy:
To overwrite defaults simple add your own config-file after importing crispy:
``` ```
@import @import
"crispy", "crispy",
"config"; "config";
``` ```
### 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.

src/example/components/_button.scss → example/components/_button.scss View File

@ -1,19 +1,17 @@
/** /**
* component: button
* *
* *
*
* @author Björn Hase
* *
*/ */
@mixin example__button() @mixin example__button()
{ {
.button { .button {
border: 1px solid darken($crispy__color-primary, 10%); border: 1px solid darken($crispy__color-primary, 10%);
background-color: $crispy__color-primary; background-color: $crispy__color-primary;
color: white; color: white;
svg {
fill: white;
}
} }
} }

src/example/components/_nav.scss → example/components/_nav.scss View File

@ -6,13 +6,10 @@
* *
*/ */
@mixin example__nav() @mixin example__nav()
{ {
.nav { .nav {
position: fixed;
a {
@include crispy__font-size(18px);
}
} }
} }

src/example/example.scss → example/example.scss View File

@ -8,17 +8,7 @@
// components // components
@include crispy__button(); @include crispy__button();
@include crispy__heading(); @include crispy__heading();
@include crispy__icon();
@include crispy__modal();
@include crispy__panel();
@include crispy__table(); @include crispy__table();
@include crispy__field();
@include crispy__field__text();
@include crispy__field__checkbox();
@include crispy__field__radio();
@include crispy__field__select();
@include crispy__field__panel();
@include crispy__field__label();
// helpers // helpers
@include crispy__float(); @include crispy__float();
@ -28,7 +18,6 @@
@include crispy__width(); @include crispy__width();
// example // example
@include example__base();
@include example__container(); @include example__container();
@include example__header(); @include example__header();
@include example__footer(); @include example__footer();

+ 15
- 0
example/site/_footer.scss View File

@ -0,0 +1,15 @@
/**
* component: footer
*
*
* @author Björn Hase
*
*/
@mixin example__footer()
{
.footer {
}
}

+ 20
- 0
example/site/_header.scss View File

@ -0,0 +1,20 @@
/**
* component: header
*
*
* @author Björn Hase
*
*/
@mixin example__header() {
.header {
&__title {
}
&__logo {
}
}
}

+ 12
- 0
example/templates/_home.scss View File

@ -0,0 +1,12 @@
/**
* template: home
*
*
* @author Björn Hase
*
*/
@mixin example__home()
{
}

+ 0
- 65
src/example/icons/chip.svg View File

@ -1,65 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="Layer_4"
version="1.1"
viewBox="0 0 98.003868 65.68988"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="chip.svg"
width="98.003868"
height="65.68988"><metadata
id="metadata15"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs13" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1006"
id="namedview11"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="1.84375"
inkscape:cx="50.12564"
inkscape:cy="32.905524"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_4" /><style
type="text/css"
id="style3">
.st0{fill:#C9B53A;}
.st1{fill:#231F20;}
.st2{fill:#FFF066;}
</style><path
class="st0"
d="m 7.6408941,25.584353 c -4.6,7.4 -0.5,15.5 8.2999999,15.6 7.5,0.1 14.3,-5.5 19.4,-10.3 2.2,-2 4.1,-4.3 5.9,-6.7 -4.1,-4.5 -9.1,-8 -15.5,-8.1 -6.9,0 -14.4,3.6 -18.0999999,9.5 z"
id="path5"
inkscape:connector-curvature="0"
style="fill:#c9b53a" /><path
class="st1"
d="m 82.440894,1.7843527 c -8.4,-3 -18,-2.39999996 -25.2,3.2 -5.1,4 -8.9,9.5000003 -12.7,14.9000003 -5.9,-6.2 -13.6,-10.0000003 -22.5,-8.8 -9.2,1.3 -18.3999999,7.4 -21.29999986,16.5 -1,3.3 -1.1,7.4 0.39999996,10.5 9.1999999,18 29.6999999,28.8 49.5999999,27.5 16.7,-1.1 35.1,-8.3 43.5,-23.7 7.499996,-13.6 3.9,-34.5000003 -11.8,-40.1000003 z M 7.6408941,25.584353 c 3.6999999,-6 11.1999999,-9.5 18.1999999,-9.5 6.4,0.1 11.4,3.6 15.5,8.1 -1.8,2.4 -3.7,4.7 -5.9,6.7 -5.2,4.8 -12,10.4 -19.4,10.3 -8.8999999,0 -12.9999999,-8.2 -8.3999999,-15.6 z m 62.8999999,29.8 c -18.8,8.2 -42,5.3 -56.4,-8.8 9.6,1 18.4,-5.6 25.1,-11.8 4.1,-3.8 7.5,-8.1 10.7,-12.6 3.3,-4.7 6.5,-10.3 11.4,-13.7000003 8.5,-5.9 22.3,-3.7 27.9,5.2000003 10.6,17.2 -3.2,35 -18.7,41.7 z"
id="path7"
inkscape:connector-curvature="0"
style="fill:#231f20" /><path
class="st2"
d="m 70.540894,55.384353 c 15.5,-6.8 29.3,-24.6 18.7,-41.6 -5.5,-8.9000003 -19.4,-11.1000003 -27.9,-5.2000003 -4.9,3.4000003 -8,8.9000003 -11.4,13.7000003 -3.2,4.5 -6.7,8.7 -10.7,12.5 -6.6,6.2 -15.5,12.8 -25.1,11.8 14.4,14.1 37.6,17.1 56.4,8.8 z m -28.9,-1.7 c -0.2,0 -0.4,0 -0.7,0 0.2,-0.2 0.5,-0.3 0.7,-0.4 0.1,0.1 0,0.3 0,0.4 z"
id="path9"
inkscape:connector-curvature="0"
style="fill:#fff066" /></svg>

+ 0
- 15
src/example/site/_base.scss View File

@ -1,15 +0,0 @@
/**
* site: base
*
*
* @author Björn Hase
*
*/
@mixin example__base() {
h2 {
@include crispy__media-md() {
padding-top: toEm(14px);
}
}
}

+ 0
- 16
src/example/site/_footer.scss View File

@ -1,16 +0,0 @@
/**
*
*
*
*
*/
@mixin example__footer()
{
.footer {
padding: toEm(12px 0);
background-color: #e9e9e9;
border-top: 1px dotted #959595;
margin: toEm(50px 0 0 0);
}
}

+ 0
- 45
src/example/site/_header.scss View File

@ -1,45 +0,0 @@
/**
* component: header
*
*
* @author Björn Hase
*
*/
@mixin example__header() {
.header {
padding: toEm(8px 0 0);
margin: toEm(0 0 20px);
@include crispy__media-sm() {
margin: toEm(0 0 60px);
}
a {
text-decoration: none;
&:hover {
color: $crispy__color-primary;
}
}
&__title {
margin: 0;
}
&__subtitle {
margin: toEm(15px 0 0);
color: $crispy__color-text;
}
&__logo {
width: 50px;
margin: toEm(20px 0 0);
}
&__small {
display: block;
margin: -10px;
}
}
}

+ 0
- 47
src/example/templates/_home.scss View File

@ -1,47 +0,0 @@
/**
* template: home
*
*
* @author Björn Hase
*
*/
@mixin example__home()
{
.lead {
margin-top: -(toEm(5px));
}
.panel {
border: 1px solid lighten($crispy__color-secondary, 10%);
background-color: lighten($crispy__color-secondary, 25%);
}
.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;
}
}
}

Write Preview
Loading…
Cancel
Save