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
Split 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>
<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">
<hgroup>
<a href="/">
@ -35,29 +47,13 @@
</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="col-12 col-sm-3">
</div>
<div class="col-12 col-sm-9">
<p>
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
'../scss/crispy',
'site/base',
'site/container',
'site/footer',
'site/header',
'components/button',
'components/nav',
'templates/home';
// components
@include crispy__button();
@include crispy__code();
@include crispy__group();
@include crispy__heading();
@include crispy__hero();
@include crispy__icon();
@include crispy__modal();
@include crispy__panel();


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

@ -6,6 +6,8 @@
*
*/
// @TODO adding colors for link and hover
// font
$crispy__font-size: 16px !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
*
*/
@import
'normalize';
html {
font-size: 100%;
}
body,
html {
margin: 0;
height: 100%;
}
@ -47,7 +51,7 @@ a {
color: $crispy__color-primary;
&:hover {
color: $crispy__color-text;
color: $crispy__color-hover;
}
&:focus {
@ -90,11 +94,11 @@ ul ul {
}
ol {
list-style: decimal inside;
list-style: decimal outside;
}
ul {
list-style: disc inside;
list-style: disc outside;
}
dd,
@ -130,5 +134,6 @@ body {
color: $crispy__color-text;
background-color: $crispy__color-background;
direction: $crispy__direction;
@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__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-family: monospace, monospace !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__margin: toEm(0 $crispy__margin 0) !default;


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

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


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

@ -3,8 +3,8 @@
*
* use svg as icon
*
* <svg class="icon" viewBox="0 0 100 100">
* <use src="#"></use>
* <svg class="icon">
*
* </svg>
*
*
@ -14,7 +14,6 @@
$crispy__icon__vertical-align: text-bottom !default;
$crispy__icon__margin: 0 2px !default;
$crispy__icon__sizes: (
'default': $crispy__font-size,
@ -22,55 +21,16 @@ $crispy__icon__sizes: (
'large': 28px
) !default;
$crispy__icon__colors: (
'default': $crispy__color-text,
'success': $crispy__color-success,
'warning': $crispy__color-warning,
'danger': $crispy__color-danger
) !default;
@mixin crispy__icon() {
.icon {
display: inline-block;
position: relative;
vertical-align: $crispy__icon__vertical-align;
margin: $crispy__icon__margin;
@include crispy__icon-colors($crispy__icon__colors);
@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
*


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

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

+ 0
- 1
webpack.mix.js View File

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


Write Preview
Loading…
Cancel
Save