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
Split 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.
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
@ -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.
## 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
@ -46,22 +34,10 @@ After this, include Mixins you need:
@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
"crispy",
"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()
{
.button {
border: 1px solid darken($crispy__color-primary, 10%);
background-color: $crispy__color-primary;
color: white;
svg {
fill: white;
}
}
}

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

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

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

@ -8,17 +8,7 @@
// components
@include crispy__button();
@include crispy__heading();
@include crispy__icon();
@include crispy__modal();
@include crispy__panel();
@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
@include crispy__float();
@ -28,7 +18,6 @@
@include crispy__width();
// example
@include example__base();
@include example__container();
@include example__header();
@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