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

adding #7

master
Björn 6 years ago
parent
6a1005027d
commit
d462945046
11 changed files with 40 additions and 85 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +22
    -26
      dist/index.html
  2. +0
    -9
      src/example/example.scss
  3. +2
    -0
      src/scss/_config.scss
  4. +9
    -4
      src/scss/_normalize.scss
  5. +1
    -0
      src/scss/components/_button.scss
  6. +1
    -0
      src/scss/components/_code.scss
  7. +1
    -0
      src/scss/components/_group.scss
  8. +1
    -0
      src/scss/components/_heading.scss
  9. +2
    -42
      src/scss/components/_icon.scss
  10. +1
    -3
      src/scss/crispy.scss
  11. +0
    -1
      webpack.mix.js

+ 22
- 26
dist/index.html View File

@ -13,10 +13,22 @@
</head> </head>
<body> <body>
<header id="header" class="header">
<div class="container">
<div class="grid">
<div class="col-12">
<nav class="nav">
<ul class="margin-top-0x">
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#components">Components</a></li>
<li><a href="#functions">Functions</a></li>
<li><a href="#helpers">Helpers</a></li>
<li><a href="#mixins">Mixins</a></li>
<li><a href="#reflex-grid">Reflex Grid</a></li>
</ul>
</nav>
<div class="container container--main">
<header id="header" class="header">
<div class="grid">
<div class="col-12">
<div class="text-center"> <div class="text-center">
<hgroup> <hgroup>
<a href="/"> <a href="/">
@ -35,29 +47,13 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</header>
<a class="button button--up" href="#header">
<svg class="icon" alt="up" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#triangle-up" />
</svg>
</a>
<nav class="nav">
<ul class="margin-top-0x">
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#components">Components</a></li>
<li><a href="#functions">Functions</a></li>
<li><a href="#helpers">Helpers</a></li>
<li><a href="#mixins">Mixins</a></li>
<li><a href="#reflex-grid">Reflex Grid</a></li>
</ul>
</nav>
<div class="container container--main">
</header>
<a class="button button--up" href="#header">
<svg class="icon" alt="up" viewBox="0 0 100 100">
<use xlink:href="/svg/icons.svg#triangle-up" />
</svg>
</a>
<div class="grid"> <div class="grid">
<div class="col-12 col-sm-3">
</div>
<div class="col-12 col-sm-9"> <div class="col-12 col-sm-9">
<p> <p>
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.


+ 0
- 9
src/example/example.scss View File

@ -1,22 +1,13 @@
@import @import
'../scss/crispy', '../scss/crispy',
'site/base',
'site/container', 'site/container',
'site/footer',
'site/header',
'components/button', 'components/button',
'components/nav',
'templates/home'; 'templates/home';
// components // components
@include crispy__button(); @include crispy__button();
@include crispy__code();
@include crispy__group();
@include crispy__heading(); @include crispy__heading();
@include crispy__hero();
@include crispy__icon(); @include crispy__icon();
@include crispy__modal(); @include crispy__modal();
@include crispy__panel(); @include crispy__panel();


+ 2
- 0
src/scss/_config.scss View File

@ -6,6 +6,8 @@
* *
*/ */
// @TODO adding colors for link and hover
// font // font
$crispy__font-size: 16px !default; $crispy__font-size: 16px !default;
$crispy__golden-ratio: 1.618 !default; $crispy__golden-ratio: 1.618 !default;


src/scss/_base.scss → src/scss/_normalize.scss View File

@ -1,17 +1,21 @@
/** /**
* base
* normalize
* *
* *
* @author Björn Hase * @author Björn Hase
* *
*/ */
@import
'normalize';
html { html {
font-size: 100%; font-size: 100%;
} }
body, body,
html { html {
margin: 0;
height: 100%; height: 100%;
} }
@ -47,7 +51,7 @@ a {
color: $crispy__color-primary; color: $crispy__color-primary;
&:hover { &:hover {
color: $crispy__color-text;
color: $crispy__color-hover;
} }
&:focus { &:focus {
@ -90,11 +94,11 @@ ul ul {
} }
ol { ol {
list-style: decimal inside;
list-style: decimal outside;
} }
ul { ul {
list-style: disc inside;
list-style: disc outside;
} }
dd, dd,
@ -130,5 +134,6 @@ body {
color: $crispy__color-text; color: $crispy__color-text;
background-color: $crispy__color-background; background-color: $crispy__color-background;
direction: $crispy__direction; direction: $crispy__direction;
@include crispy__font-size($crispy__font-size); @include crispy__font-size($crispy__font-size);
} }

+ 1
- 0
src/scss/components/_button.scss View File

@ -6,6 +6,7 @@
* *
*/ */
$crispy__button__padding: toEm(10px 25px) !default; $crispy__button__padding: toEm(10px 25px) !default;
$crispy__button__up__margin: toEm(20px) !default; $crispy__button__up__margin: toEm(20px) !default;


+ 1
- 0
src/scss/components/_code.scss View File

@ -11,6 +11,7 @@
* *
*/ */
$crispy__code__font-size: $crispy__font-size !default; $crispy__code__font-size: $crispy__font-size !default;
$crispy__code__font-family: monospace, monospace !default; $crispy__code__font-family: monospace, monospace !default;
$crispy__code__padding: toEm(10px 20px) !default; $crispy__code__padding: toEm(10px 20px) !default;


+ 1
- 0
src/scss/components/_group.scss View File

@ -11,6 +11,7 @@
* *
*/ */
$crispy__group__character: '/' !default; $crispy__group__character: '/' !default;
$crispy__group__character__margin: toEm(0 $crispy__margin 0) !default; $crispy__group__character__margin: toEm(0 $crispy__margin 0) !default;


+ 1
- 0
src/scss/components/_heading.scss View File

@ -9,6 +9,7 @@
* *
*/ */
$crispy__heading__font-sizes: ( $crispy__heading__font-sizes: (
'h1': 40px, 'h1': 40px,
'h2': 36px, 'h2': 36px,


+ 2
- 42
src/scss/components/_icon.scss View File

@ -3,8 +3,8 @@
* *
* use svg as icon * use svg as icon
* *
* <svg class="icon" viewBox="0 0 100 100">
* <use src="#"></use>
* <svg class="icon">
*
* </svg> * </svg>
* *
* *
@ -14,7 +14,6 @@
$crispy__icon__vertical-align: text-bottom !default; $crispy__icon__vertical-align: text-bottom !default;
$crispy__icon__margin: 0 2px !default;
$crispy__icon__sizes: ( $crispy__icon__sizes: (
'default': $crispy__font-size, 'default': $crispy__font-size,
@ -22,55 +21,16 @@ $crispy__icon__sizes: (
'large': 28px 'large': 28px
) !default; ) !default;
$crispy__icon__colors: (
'default': $crispy__color-text,
'success': $crispy__color-success,
'warning': $crispy__color-warning,
'danger': $crispy__color-danger
) !default;
@mixin crispy__icon() { @mixin crispy__icon() {
.icon { .icon {
display: inline-block; display: inline-block;
position: relative; position: relative;
vertical-align: $crispy__icon__vertical-align; vertical-align: $crispy__icon__vertical-align;
margin: $crispy__icon__margin;
@include crispy__icon-colors($crispy__icon__colors);
@include crispy__icon-sizes($crispy__icon__sizes); @include crispy__icon-sizes($crispy__icon__sizes);
} }
} }
/**
* add modificators for icons as fill from map
*
*
* @param {map} $colors
*
*/
@mixin crispy__icon-colors($colors) {
@each $name, $color in $colors {
@if ($name == 'default') {
@include crispy__icon-color($color);
} @else {
&--#{$name} {
@include crispy__icon-color($color);
}
}
}
}
/**
* add color as fill
*
*
* @param {color} $color
*
*/
@mixin crispy__icon-color($color) {
fill: $color;
}
/** /**
* adding sizes for icons from map * adding sizes for icons from map
* *


+ 1
- 3
src/scss/crispy.scss View File

@ -1,10 +1,8 @@
@import @import
'normalize',
'functions/functions', 'functions/functions',
'mixins/mixins', 'mixins/mixins',
'config', 'config',
'base',
'normalize',
'components/components', 'components/components',
'helpers/helpers'; 'helpers/helpers';

+ 0
- 1
webpack.mix.js View File

@ -13,7 +13,6 @@ let mix = require('laravel-mix');
mix.sass([ mix.sass([
'src/sass/crispy.scss', 'src/sass/crispy.scss',
'src/example/example.scss',
], 'dist/') ], 'dist/')
.options({ .options({
postCss: [ postCss: [


Write Preview
Loading…
Cancel
Save