Browse Source

adding

master
Björn 5 years ago
parent
commit
2615d4bc64
21 changed files with 171 additions and 109 deletions
  1. BIN
      assets/iconmoon/PNG/spaceinvaders.png
  2. +5
    -0
      assets/iconmoon/SVG/spaceinvaders.svg
  3. +2
    -2
      assets/iconmoon/demo-external-svg.html
  4. +6
    -6
      assets/iconmoon/demo.html
  5. +18
    -16
      assets/iconmoon/selection.json
  6. +4
    -0
      assets/iconmoon/style.css
  7. +4
    -4
      assets/iconmoon/symbol-defs.svg
  8. +1
    -1
      dist/crispy.css
  9. +1
    -1
      dist/crispy_minimal.css
  10. +82
    -49
      dist/example/index.html
  11. +1
    -1
      dist/example/styles.css
  12. +4
    -4
      dist/example/symbol-defs.svg
  13. +1
    -1
      src/_core.scss
  14. +4
    -4
      src/_modifiers.scss
  15. +1
    -1
      src/_variables.scss
  16. +0
    -4
      src/components/_field.scss
  17. +1
    -1
      src/components/_modal.scss
  18. +2
    -0
      src/example/components/_button.scss
  19. +2
    -0
      src/example/components/_nav.scss
  20. +9
    -4
      src/example/site/_header.scss
  21. +23
    -10
      src/example/styles.scss

BIN
assets/iconmoon/PNG/spaceinvaders.png View File

Before After
Width: 33  |  Height: 32  |  Size: 145 B

+ 5
- 0
assets/iconmoon/SVG/spaceinvaders.svg View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32">
<title>spaceinvaders</title>
<path d="M29.963 24.982v-5.947h-2.91v5.969h-3.037v2.953h-7.048v-2.975h7.048v-2.972h-14.991v2.973l6.030 0.021v2.973h-6.051v-2.951h-3.036v-6.010h-2.911v5.947h-3.057v-9.004h2.995v-2.891h2.973v-3.057h3.057v-2.994h2.994v3.003l8.983 0.024v-3.027h2.994v3.036h3.057v2.974h2.953v2.973h3.014v8.982h-3.057zM12.019 13.005h-2.994v2.995h2.994v-2.995zM23.996 13.005h-2.994v2.995h2.994v-2.995zM5.968 4.023h3.057v2.994h-3.057v-2.994zM27.053 4.023v2.994h-3.057v-2.994h3.057z"></path>
</svg>

+ 2
- 2
assets/iconmoon/demo-external-svg.html View File

@ -25,12 +25,12 @@
<h1 class="mvm mtn fgc1">Grid Size: 32</h1>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-chronometer"><use xlink:href="symbol-defs.svg#icon-chronometer"></use></svg><span class="name"> icon-chronometer</span>
<svg class="icon icon-transformers"><use xlink:href="symbol-defs.svg#icon-transformers"></use></svg><span class="name"> icon-transformers</span>
</div>
</div>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-transformers"><use xlink:href="symbol-defs.svg#icon-transformers"></use></svg><span class="name"> icon-transformers</span>
<svg class="icon icon-spaceinvaders"><use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use></svg><span class="name"> icon-spaceinvaders</span>
</div>
</div>
<div class="glyph fs2">


+ 6
- 6
assets/iconmoon/demo.html View File

@ -29,14 +29,14 @@
<path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.742 21.342c-2.109 0.245-3.771 1.479-3.771 2.913s1.661 2.669 3.771 2.913c2.119-0.239 3.791-1.475 3.791-2.913s-1.673-2.674-3.791-2.913z"></path>
<path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.594 27.184c-0.060 0.005-0.12 0.012-0.181 0.016 0.061-0.004 0.12-0.010 0.181-0.016z"></path>
</symbol>
<symbol id="icon-chronometer" viewBox="0 0 32 32">
<title>chronometer</title>
<path d="M28.054 18.571c0 6.933-5.62 12.554-12.554 12.554s-12.554-5.621-12.554-12.554c0-6.722 5.286-12.192 11.927-12.521v-2.166h-0.941c-0.555 0-1.005-0.45-1.005-1.005s0.45-1.004 1.005-1.004h3.012c0.555 0 1.005 0.449 1.005 1.004s-0.45 1.005-1.005 1.005h-1.066v2.153c6.757 0.2 12.176 5.729 12.176 12.534zM14.873 9.909v-2.291c-3.109 0.176-5.866 1.64-7.766 3.858l1.653 1.653-0.71 0.711-1.565-1.566c-1.274 1.798-2.032 3.987-2.032 6.359 0 0.106 0.015 0.251 0.015 0.251h2.432v1.005h-2.36c0.244 2.052 1.057 3.987 2.268 5.534l1.243-1.243 0.71 0.71-1.296 1.297c1.879 1.996 4.488 3.297 7.408 3.462v-2.729h1.004v2.742c2.989-0.102 5.67-1.393 7.599-3.41l-1.424-1.424 0.71-0.71 1.377 1.376c1.24-1.56 2.074-3.521 2.322-5.604h-2.55v-1.005h2.621c0.003-0.104 0.016-0.145 0.016-0.251 0-2.438-0.8-4.681-2.138-6.505l-1.648 1.648-0.71-0.71 1.726-1.725c-1.947-2.203-4.753-3.631-7.9-3.737v2.304h-1.005zM15.939 18.885h3.516c0.277 0 0.502 0.226 0.502 0.502 0 0.277-0.225 0.503-0.502 0.503h-4.018c-0.277 0-0.502-0.226-0.502-0.503v-6.967c0-0.277 0.225-0.502 0.502-0.502s0.502 0.225 0.502 0.502v6.465z"></path>
</symbol>
<symbol id="icon-transformers" viewBox="0 0 32 32">
<title>transformers</title>
<path d="M25.115 5.265l0.045-1.455c-2.694-1.348-5.686-2.155-8.973-2.155s-6.653 0.807-9.347 2.155l0.045 1.455 9.115 5.981 9.115-5.981zM16 4.556c1.875 0 3.448 0.601 3.448 0.601l-3.448 2.317-3.448-2.317c0 0 1.573-0.601 3.448-0.601zM18.073 23.977v-7.020l0.468-6.035-2.541 1.671-2.479-1.671 0.53 6.035v7.020h4.022zM12.39 10.276l-6.789-4.526-0.045-1.761h-3.996l0.593 8.55 4.85 3.466h5.927l-0.54-5.729zM4.685 10.653l6.412 3.018 0.107 0.989-6.357-2.875-0.162-1.132zM4.415 7.582l6.358 3.071 0.161 1.069-6.411-2.955-0.108-1.185zM4.308 26.549l4.735 2.424v-9.412l-2.796-1.74v-1.078l-2.748-1.886 0.809 11.692zM13.054 24.992v-7.012l-3.071 1.562v10.186l1.384 0.861 1.886-4.598h5.496l1.886 4.598 1.446-0.861v-10.185l-3.071-1.562v7.012h-5.956zM14.168 27.070l-1.401 3.932h6.466l-1.4-3.932h-3.665zM19.071 16.004h5.927l4.85-3.466 0.593-8.55h-3.996l-0.046 1.762-6.79 4.526-0.538 5.728zM27.153 11.785l-6.421 3 0.171-1.114 6.412-3.018-0.162 1.132zM27.477 8.767l-6.412 3.018 0.162-1.132 6.358-3.071-0.108 1.185zM28.5 14.856l-2.747 1.886v1.078l-2.755 1.74v9.412l4.694-2.424 0.808-11.692z"></path>
</symbol>
<symbol id="icon-spaceinvaders" viewBox="0 0 33 32">
<title>spaceinvaders</title>
<path d="M29.963 24.982v-5.947h-2.91v5.969h-3.037v2.953h-7.048v-2.975h7.048v-2.972h-14.991v2.973l6.030 0.021v2.973h-6.051v-2.951h-3.036v-6.010h-2.911v5.947h-3.057v-9.004h2.995v-2.891h2.973v-3.057h3.057v-2.994h2.994v3.003l8.983 0.024v-3.027h2.994v3.036h3.057v2.974h2.953v2.973h3.014v8.982h-3.057zM12.019 13.005h-2.994v2.995h2.994v-2.995zM23.996 13.005h-2.994v2.995h2.994v-2.995zM5.968 4.023h3.057v2.994h-3.057v-2.994zM27.053 4.023v2.994h-3.057v-2.994h3.057z"></path>
</symbol>
<symbol id="icon-paperplane" viewBox="0 0 32 32">
<title>paperplane</title>
<path d="M3.363 4.414l4.875 19.348 9.467-3.018-8.448-10.298 10.902 9.56 8.853-2.77-25.649-12.822zM18.004 27.586v-5.324l-3.116 0.926 3.116 4.398z"></path>
@ -77,12 +77,12 @@
<h1 class="mvm mtn fgc1">Grid Size: 32</h1>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-chronometer"><use xlink:href="#icon-chronometer"></use></svg><span class="name"> icon-chronometer</span>
<svg class="icon icon-transformers"><use xlink:href="#icon-transformers"></use></svg><span class="name"> icon-transformers</span>
</div>
</div>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-transformers"><use xlink:href="#icon-transformers"></use></svg><span class="name"> icon-transformers</span>
<svg class="icon icon-spaceinvaders"><use xlink:href="#icon-spaceinvaders"></use></svg><span class="name"> icon-spaceinvaders</span>
</div>
</div>
<div class="glyph fs2">


+ 18
- 16
assets/iconmoon/selection.json View File

@ -193,52 +193,51 @@
{
"icon": {
"paths": [
"M897.728 594.272c0 221.856-179.84 401.728-401.728 401.728-221.856 0-401.728-179.872-401.728-401.728 0-215.104 169.152-390.144 381.664-400.672l0-69.312h-30.112c-17.76 0-32.16-14.4-32.16-32.16s14.4-32.128 32.16-32.128h96.384c17.76 0 32.16 14.368 32.16 32.128s-14.4 32.16-32.16 32.16h-34.112v68.896c216.224 6.4 389.632 183.328 389.632 401.088zM475.936 317.088v-73.312c-99.488 5.632-187.712 52.48-248.512 123.456l52.896 52.896-22.72 22.752-50.080-50.112c-40.768 57.536-65.024 127.584-65.024 203.488 0 3.392 0.48 8.032 0.48 8.032l77.824 0v32.16h-75.52c7.808 65.664 33.824 127.584 72.576 177.088l39.776-39.776 22.72 22.72-41.472 41.504c60.128 63.872 143.616 105.504 237.056 110.784v-87.328h32.128v87.744c95.648-3.264 181.44-44.576 243.168-109.12l-45.568-45.568 22.72-22.72 44.064 44.032c39.68-49.92 66.368-112.672 74.304-179.328h-81.6v-32.16h83.872c0.096-3.328 0.512-4.64 0.512-8.032 0-78.016-25.6-149.792-68.416-208.16l-52.736 52.736-22.72-22.72 55.232-55.2c-62.304-70.496-152.096-116.192-252.8-119.584v73.728l-32.16 0zM510.048 604.32h112.512c8.864 0 16.064 7.232 16.064 16.064 0 8.864-7.2 16.096-16.064 16.096h-128.576c-8.864 0-16.064-7.232-16.064-16.096l0-222.944c0-8.864 7.2-16.064 16.064-16.064s16.064 7.2 16.064 16.064l-0 206.88z"
"M803.68 168.48l1.44-46.56c-86.208-43.136-181.952-68.96-287.136-68.96s-212.896 25.824-299.104 68.96l1.44 46.56 291.68 191.392 291.68-191.392zM512 145.792c60 0 110.336 19.232 110.336 19.232l-110.336 74.144-110.336-74.144c0 0 50.336-19.232 110.336-19.232zM578.336 767.264v-224.64l14.976-193.12-81.312 53.472-79.328-53.472 16.96 193.12v224.64h128.704zM396.48 328.832l-217.248-144.832-1.44-56.352h-127.872l18.976 273.6 155.2 110.912h189.664l-17.28-183.328zM149.92 340.896l205.184 96.576 3.424 31.648-203.424-92-5.184-36.224zM141.28 242.624l203.456 98.272 5.152 34.208-205.152-94.56-3.456-37.92zM137.856 849.568l151.52 77.568v-301.184l-89.472-55.68v-34.496l-87.936-60.352 25.888 374.144zM417.728 799.744v-224.384l-98.272 49.984v325.952l44.288 27.552 60.352-147.136h175.872l60.352 147.136 46.272-27.552-0-325.92-98.272-49.984v224.384l-190.592 0zM453.376 866.24l-44.832 125.824h206.912l-44.8-125.824h-117.28zM610.272 512.128h189.664l155.2-110.912 18.976-273.6h-127.872l-1.472 56.384-217.28 144.832-17.216 183.296zM868.896 377.12l-205.472 96 5.472-35.648 205.184-96.576-5.184 36.224zM879.264 280.544l-205.184 96.576 5.184-36.224 203.456-98.272-3.456 37.92zM912 475.392l-87.904 60.352v34.496l-88.16 55.68v301.184l150.208-77.568 25.856-374.144z"
],
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"chronometer",
"timer",
"clock"
"transformers"
],
"grid": 32
},
"attrs": [],
"properties": {
"id": 89,
"order": 10,
"id": 165,
"order": 11,
"prevSize": 32,
"name": "chronometer"
"name": "transformers"
},
"setIdx": 1,
"setId": 0,
"iconIdx": 88
"iconIdx": 164
},
{
"icon": {
"paths": [
"M803.68 168.48l1.44-46.56c-86.208-43.136-181.952-68.96-287.136-68.96s-212.896 25.824-299.104 68.96l1.44 46.56 291.68 191.392 291.68-191.392zM512 145.792c60 0 110.336 19.232 110.336 19.232l-110.336 74.144-110.336-74.144c0 0 50.336-19.232 110.336-19.232zM578.336 767.264v-224.64l14.976-193.12-81.312 53.472-79.328-53.472 16.96 193.12v224.64h128.704zM396.48 328.832l-217.248-144.832-1.44-56.352h-127.872l18.976 273.6 155.2 110.912h189.664l-17.28-183.328zM149.92 340.896l205.184 96.576 3.424 31.648-203.424-92-5.184-36.224zM141.28 242.624l203.456 98.272 5.152 34.208-205.152-94.56-3.456-37.92zM137.856 849.568l151.52 77.568v-301.184l-89.472-55.68v-34.496l-87.936-60.352 25.888 374.144zM417.728 799.744v-224.384l-98.272 49.984v325.952l44.288 27.552 60.352-147.136h175.872l60.352 147.136 46.272-27.552-0-325.92-98.272-49.984v224.384l-190.592 0zM453.376 866.24l-44.832 125.824h206.912l-44.8-125.824h-117.28zM610.272 512.128h189.664l155.2-110.912 18.976-273.6h-127.872l-1.472 56.384-217.28 144.832-17.216 183.296zM868.896 377.12l-205.472 96 5.472-35.648 205.184-96.576-5.184 36.224zM879.264 280.544l-205.184 96.576 5.184-36.224 203.456-98.272-3.456 37.92zM912 475.392l-87.904 60.352v34.496l-88.16 55.68v301.184l150.208-77.568 25.856-374.144z"
"M958.816 799.424v-190.304h-93.12v191.008h-97.184v94.496h-225.536v-95.2h225.536l-0-95.104h-479.712v95.136l192.96 0.672v95.136h-193.632v-94.432h-97.152v-192.32h-93.152v190.304h-97.824v-288.128h95.84v-92.512h95.136v-97.824h97.824v-95.808h95.808v96.096l287.456 0.768-0-96.864h95.808v97.152h97.824v95.168h94.496l0 95.136h96.448v287.424h-97.824zM384.608 416.16h-95.808v95.84h95.808v-95.84zM767.872 416.16h-95.808v95.84h95.808v-95.84zM190.976 128.736h97.824v95.808h-97.824v-95.808zM865.696 128.736v95.808h-97.824l-0-95.808h97.824z"
],
"width": 1056,
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"transformers"
"space invaders"
],
"grid": 32
},
"attrs": [],
"properties": {
"id": 165,
"order": 11,
"id": 167,
"order": 13,
"prevSize": 32,
"name": "transformers"
"name": "spaceinvaders"
},
"setIdx": 1,
"setId": 0,
"iconIdx": 164
"iconIdx": 166
},
{
"icon": {
@ -393,8 +392,11 @@
"color": 0,
"bgColor": 16777215,
"name": "icomoon",
"classSelector": ".icon"
"classSelector": ".icon",
"height": 32
},
"historySize": 50
"historySize": 50,
"gridSize": 16,
"showGrid": false
}
}

+ 4
- 0
assets/iconmoon/style.css View File

@ -14,3 +14,7 @@ Single-colored icons can be modified like so:
color: red;
}
========================================== */
.icon-spaceinvaders {
width: 1.03125em;
}

+ 4
- 4
assets/iconmoon/symbol-defs.svg View File

@ -19,14 +19,14 @@
<path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.742 21.342c-2.109 0.245-3.771 1.479-3.771 2.913s1.661 2.669 3.771 2.913c2.119-0.239 3.791-1.475 3.791-2.913s-1.673-2.674-3.791-2.913z"></path>
<path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.594 27.184c-0.060 0.005-0.12 0.012-0.181 0.016 0.061-0.004 0.12-0.010 0.181-0.016z"></path>
</symbol>
<symbol id="icon-chronometer" viewBox="0 0 32 32">
<title>chronometer</title>
<path d="M28.054 18.571c0 6.933-5.62 12.554-12.554 12.554s-12.554-5.621-12.554-12.554c0-6.722 5.286-12.192 11.927-12.521v-2.166h-0.941c-0.555 0-1.005-0.45-1.005-1.005s0.45-1.004 1.005-1.004h3.012c0.555 0 1.005 0.449 1.005 1.004s-0.45 1.005-1.005 1.005h-1.066v2.153c6.757 0.2 12.176 5.729 12.176 12.534zM14.873 9.909v-2.291c-3.109 0.176-5.866 1.64-7.766 3.858l1.653 1.653-0.71 0.711-1.565-1.566c-1.274 1.798-2.032 3.987-2.032 6.359 0 0.106 0.015 0.251 0.015 0.251h2.432v1.005h-2.36c0.244 2.052 1.057 3.987 2.268 5.534l1.243-1.243 0.71 0.71-1.296 1.297c1.879 1.996 4.488 3.297 7.408 3.462v-2.729h1.004v2.742c2.989-0.102 5.67-1.393 7.599-3.41l-1.424-1.424 0.71-0.71 1.377 1.376c1.24-1.56 2.074-3.521 2.322-5.604h-2.55v-1.005h2.621c0.003-0.104 0.016-0.145 0.016-0.251 0-2.438-0.8-4.681-2.138-6.505l-1.648 1.648-0.71-0.71 1.726-1.725c-1.947-2.203-4.753-3.631-7.9-3.737v2.304h-1.005zM15.939 18.885h3.516c0.277 0 0.502 0.226 0.502 0.502 0 0.277-0.225 0.503-0.502 0.503h-4.018c-0.277 0-0.502-0.226-0.502-0.503v-6.967c0-0.277 0.225-0.502 0.502-0.502s0.502 0.225 0.502 0.502v6.465z"></path>
</symbol>
<symbol id="icon-transformers" viewBox="0 0 32 32">
<title>transformers</title>
<path d="M25.115 5.265l0.045-1.455c-2.694-1.348-5.686-2.155-8.973-2.155s-6.653 0.807-9.347 2.155l0.045 1.455 9.115 5.981 9.115-5.981zM16 4.556c1.875 0 3.448 0.601 3.448 0.601l-3.448 2.317-3.448-2.317c0 0 1.573-0.601 3.448-0.601zM18.073 23.977v-7.020l0.468-6.035-2.541 1.671-2.479-1.671 0.53 6.035v7.020h4.022zM12.39 10.276l-6.789-4.526-0.045-1.761h-3.996l0.593 8.55 4.85 3.466h5.927l-0.54-5.729zM4.685 10.653l6.412 3.018 0.107 0.989-6.357-2.875-0.162-1.132zM4.415 7.582l6.358 3.071 0.161 1.069-6.411-2.955-0.108-1.185zM4.308 26.549l4.735 2.424v-9.412l-2.796-1.74v-1.078l-2.748-1.886 0.809 11.692zM13.054 24.992v-7.012l-3.071 1.562v10.186l1.384 0.861 1.886-4.598h5.496l1.886 4.598 1.446-0.861v-10.185l-3.071-1.562v7.012h-5.956zM14.168 27.070l-1.401 3.932h6.466l-1.4-3.932h-3.665zM19.071 16.004h5.927l4.85-3.466 0.593-8.55h-3.996l-0.046 1.762-6.79 4.526-0.538 5.728zM27.153 11.785l-6.421 3 0.171-1.114 6.412-3.018-0.162 1.132zM27.477 8.767l-6.412 3.018 0.162-1.132 6.358-3.071-0.108 1.185zM28.5 14.856l-2.747 1.886v1.078l-2.755 1.74v9.412l4.694-2.424 0.808-11.692z"></path>
</symbol>
<symbol id="icon-spaceinvaders" viewBox="0 0 33 32">
<title>spaceinvaders</title>
<path d="M29.963 24.982v-5.947h-2.91v5.969h-3.037v2.953h-7.048v-2.975h7.048v-2.972h-14.991v2.973l6.030 0.021v2.973h-6.051v-2.951h-3.036v-6.010h-2.911v5.947h-3.057v-9.004h2.995v-2.891h2.973v-3.057h3.057v-2.994h2.994v3.003l8.983 0.024v-3.027h2.994v3.036h3.057v2.974h2.953v2.973h3.014v8.982h-3.057zM12.019 13.005h-2.994v2.995h2.994v-2.995zM23.996 13.005h-2.994v2.995h2.994v-2.995zM5.968 4.023h3.057v2.994h-3.057v-2.994zM27.053 4.023v2.994h-3.057v-2.994h3.057z"></path>
</symbol>
<symbol id="icon-paperplane" viewBox="0 0 32 32">
<title>paperplane</title>
<path d="M3.363 4.414l4.875 19.348 9.467-3.018-8.448-10.298 10.902 9.56 8.853-2.77-25.649-12.822zM18.004 27.586v-5.324l-3.116 0.926 3.116 4.398z"></path>


+ 1
- 1
dist/crispy.css
File diff suppressed because it is too large
View File


+ 1
- 1
dist/crispy_minimal.css
File diff suppressed because it is too large
View File


+ 82
- 49
dist/example/index.html View File

@ -22,7 +22,7 @@
<svg class="icon header__logo" alt="Crisp">
<use xlink:href="symbol-defs.svg#icon-logo" />
</svg>
Crispy 2.0
Crispy 2.0-BETA
</h1>
</a>
<h2 class="h6">
@ -50,13 +50,13 @@
</div>
<div class="col-12 col-md-6">
<h3 class="h6">
<svg class="icon icon-color-primary" alt="Usefull Helpers">
<svg class="icon icon-color-primary" alt="Usefull modifiers">
<use xlink:href="symbol-defs.svg#icon-shipping" />
</svg>
Modifiziers, Mixins and Functions
</h3>
<p class="text-size-medium">
A small amount of Usefull Helpers to support your Work. That make it easer to create new Styles.
A small amount of Usefull modifiers to support your Work. That make it easer to create new Styles.
Modifiziers are helping to reduce code.
</p>
</div>
@ -97,6 +97,7 @@
<h2 class="h3">How it works</h2>
<h3 class="h4">SCSS</h3>
<pre class="code"><code>@import
"crispy";</code></pre>
<p>Now include Mixins you need. Components and Modifiziers only works if you include them,</p>
@ -121,13 +122,24 @@
"variables",
"crispy";</code></pre>
<p>If you need all, mixins will be included,</p>
<pre class="code"><code>@import
"all";</code></pre>
<p>Only need Core and Modifiziers?</p>
<pre class="code"><code>@import
"minimal";</code></pre>
<h3 class="h4">CSS</h3>
<p>For using CSS you can use <span class="text-weight-bold">crispy.css</span> for all Styles or <span class="text-weight-bold">crispy_mininmal.css</span> without Components.</p>
<h2 class="h3">Example</h2>
<p>
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.
</p>
<h4>Site</h4>
<p>
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.
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.
</p>
<h4>Templates</h4>
<p>
@ -306,11 +318,11 @@
) !default;</code></pre>
<h1>Heading h1</h1>
<h2>Heading h1</h2>
<h3>Heading h1</h3>
<h4>Heading h1</h4>
<h5>Heading h1</h5>
<h6>Heading h1</h6>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>
<!-- components / hero -->
<h3 class="h4 margin-top-2 margin-bottom-0">
@ -324,6 +336,9 @@
<h3 class="h4 margin-top-2 margin-bottom-0">
Icon
</h3>
<p>
To change Size you can use "text-size-*" that you find in the <span class="text-weight-bold">modifiers</span>.
</p>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;svg class=&quot;icon text-size-small&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-minus&quot;&gt;&lt;/use&gt;
@ -331,19 +346,33 @@
<div class="panel">
<div class="panel__inner">
<svg class="icon text-size-small" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
<svg class="icon text-size-large" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
<svg class="icon text-size-big" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
<svg class="icon text-size-mega" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
</div>
</div>
<p class="margin-top-2">
To change Color you can use "icon-color-*".
</p>
<h4 class="h6">Html:</h4>
<pre class="code"><code>&lt;svg class=&quot;icon text-size-small&quot;&gt;
&lt;use xlink:href=&quot;symbol-defs.svg#icon-minus&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;</code></pre>
<div class="panel">
<div class="panel__inner">
<svg class="icon icon-color-danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-spaceinvaders"></use>
</svg>
</div>
</div>
@ -482,8 +511,8 @@
</label>
</div>
<div class="field field--error">
<input id="field__checkbox__2" class="field__choice" type="checkbox" name="field__checkbox__2" value="true" />
<label for="field__checkbox__2" class="field__label">
<input id="field__checkbox__3" class="field__choice" type="checkbox" name="field__checkbox__3" value="true" />
<label for="field__checkbox__3" class="field__label">
<svg class="icon field__choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>
@ -645,18 +674,18 @@ toRem(10px 10px 0 0);
stripUnit()
</h3>
<h4 class="h6 margin-top-1x">Sass:</h4>
<pre class="code"><code>toEm(10px);</code></pre>
<pre class="code"><code>stripUnit(10px);</code></pre>
<p>
Returns value without unit.
</p>
<!-- helpers -->
<!-- modifiers -->
<hr class="margin-top-3x">
<h2 id="helpers" class="margin-top-1x">
Helpers
<h2 id="modifiers" class="margin-top-1x">
Modifiziers
</h2>
<!-- helpers / align -->
<!-- modifiers / align -->
<h3 class="h4 margin-top-1x">
Float
</h3>
@ -670,13 +699,20 @@ toRem(10px 10px 0 0);
&lt;div class=&quot;center&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;</code></pre>
<!-- helpers / margin -->
<!-- modifiers / margin & padding -->
<h3 class="h4 margin-top-1x">
Margin
Margin & Padding
</h3>
<p>
margin-top and -bottom from <strong>$crispy__margin</strong> as px.
Adding margin-top, -left, -bottom and -right and the same for padding.
</p>
<h4 class="h6 margin-top-1x">Sass:</h4>
<pre class="code">
$crispy__spacing: 15px;
$crispy__spacing__steps: 5;
</pre></code>
<h4 class="h6 margin-top-1x">Html:</h4>
<pre class="code">&lt;div class=&quot;panel margin-bottom-0&quot;&gt;margin-bottom-0&lt;/div&gt;
&lt;div class=&quot;margin-bottom-1&quot;&gt;margin-bottom-1&lt;/div&gt;
&lt;div class=&quot;margin-bottom-2&quot;&gt;margin-bottom-2&lt;/div&gt;
@ -690,7 +726,7 @@ toRem(10px 10px 0 0);
<div class="panel panel__inner margin-bottom-4">margin-bottom-4</div>
<div class="panel panel__inner margin-bottom-5">margin-bottom-5</div>
<!-- helpers / media -->
<!-- modifiers / media -->
<h3 class="h4 margin-top-1">
Media
</h3>
@ -721,7 +757,7 @@ toRem(10px 10px 0 0);
</div>
</div>
<!-- helpers / text -->
<!-- modifiers / text -->
<h3 class="h4 margin-top-1x">
Text
</h3>
@ -730,7 +766,9 @@ toRem(10px 10px 0 0);
&lt;div class=&quot;text-right&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-justify&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-italic&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-light&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-normal&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-medium&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-bold&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-uppercase&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-lowercase&quot;&gt;&lt;/div&gt;
@ -741,12 +779,21 @@ toRem(10px 10px 0 0);
Also there are classes for,
</p>
<ul>
<li>text-* with $crispy__font-sizes for "font-size"</li>
<li>text-* with $crispy__colors for "color"</li>
<li>background-* with $crispy__font-sizes for "background-color"</li>
<li>text-size-* with $crispy__font-sizes for "font-size"</li>
<li>text-color-* with $crispy__colors for "color"</li>
<li>background-color-* with $crispy__font-sizes for "background-color"</li>
</ul>
<!-- helpers / media -->
<!-- visibility -->
<h3 class="h4 margin-top-1x">
Visibility
</h3>
<pre class="code">&lt;div class=&quot;hidden&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;visible&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;visible visible--inline&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;visible visible--inline-block&quot;&gt;&lt;/div&gt;</code></pre>
<!-- modifiers / media -->
<h3 class="h4 margin-top-1x">
Width
</h3>
@ -770,7 +817,8 @@ toRem(10px 10px 0 0);
Media Queries
</h3>
<p>
These <strong>@mixins</strong> were used with the Breakpoints from the <a href="#reflex-grid">Reflex Grid</a>.
These <strong>@mixins</strong> were used with the Breakpoints from <a target="_blank" href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a>.
Reflex-Grid is also used as grid for this Site.
</p>
<ul>
<li><strong>xs</strong> 576px</li>
@ -826,19 +874,6 @@ toRem(10px 10px 0 0);
<div class="panel panel__inner lg-only margin-bottom-1">lg-only</div>
</div>
</div>
<!-- Reflex Grid -->
<hr class="margin-top-3x">
<h2 id="reflex-grid" class="margin-top-1x">
Reflex Grid
</h2>
<p>
The <strong>Reflex Grid</strong> is from <a target="_blank" href="http://lendmeyourear.net">Lee Jordan</a>. I have build a few helper for media-queries. <strong>Reflex Grid </strong> is lightweight, simple and uses a flexbox grid with cross browser
support, an inline-block fallback.
</p>
<p>
Documentation: <a target="_blank" href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a><br /> Github: <a target="_blank" href="https://github.com/leejordan/reflex">https://github.com/leejordan/reflex</a>
</p>
</div>
</div>
</div>
@ -848,11 +883,9 @@ toRem(10px 10px 0 0);
<div class="grid">
<div class="col-12">
<div class="text-center">
<div class="group group--horizontal">
<ul class="group__section group__section--separate">
<li class="group__item"><a href="/imprint.html">Imprint</a></li><li class="group__item"><a href="/privacy-policy.html">Privacy Policy</a></li>
</ul>
</div>
<ul class="group group--horizontal group--separate">
<li class="group__item"><a href="/imprint.html">Imprint</a></li><li class="group__item"><a href="/privacy-policy.html">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>


+ 1
- 1
dist/example/styles.css
File diff suppressed because it is too large
View File


+ 4
- 4
dist/example/symbol-defs.svg View File

@ -19,14 +19,14 @@
<path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.742 21.342c-2.109 0.245-3.771 1.479-3.771 2.913s1.661 2.669 3.771 2.913c2.119-0.239 3.791-1.475 3.791-2.913s-1.673-2.674-3.791-2.913z"></path>
<path fill="#ef8829" style="fill: var(--color4, #ef8829)" d="M16.594 27.184c-0.060 0.005-0.12 0.012-0.181 0.016 0.061-0.004 0.12-0.010 0.181-0.016z"></path>
</symbol>
<symbol id="icon-chronometer" viewBox="0 0 32 32">
<title>chronometer</title>
<path d="M28.054 18.571c0 6.933-5.62 12.554-12.554 12.554s-12.554-5.621-12.554-12.554c0-6.722 5.286-12.192 11.927-12.521v-2.166h-0.941c-0.555 0-1.005-0.45-1.005-1.005s0.45-1.004 1.005-1.004h3.012c0.555 0 1.005 0.449 1.005 1.004s-0.45 1.005-1.005 1.005h-1.066v2.153c6.757 0.2 12.176 5.729 12.176 12.534zM14.873 9.909v-2.291c-3.109 0.176-5.866 1.64-7.766 3.858l1.653 1.653-0.71 0.711-1.565-1.566c-1.274 1.798-2.032 3.987-2.032 6.359 0 0.106 0.015 0.251 0.015 0.251h2.432v1.005h-2.36c0.244 2.052 1.057 3.987 2.268 5.534l1.243-1.243 0.71 0.71-1.296 1.297c1.879 1.996 4.488 3.297 7.408 3.462v-2.729h1.004v2.742c2.989-0.102 5.67-1.393 7.599-3.41l-1.424-1.424 0.71-0.71 1.377 1.376c1.24-1.56 2.074-3.521 2.322-5.604h-2.55v-1.005h2.621c0.003-0.104 0.016-0.145 0.016-0.251 0-2.438-0.8-4.681-2.138-6.505l-1.648 1.648-0.71-0.71 1.726-1.725c-1.947-2.203-4.753-3.631-7.9-3.737v2.304h-1.005zM15.939 18.885h3.516c0.277 0 0.502 0.226 0.502 0.502 0 0.277-0.225 0.503-0.502 0.503h-4.018c-0.277 0-0.502-0.226-0.502-0.503v-6.967c0-0.277 0.225-0.502 0.502-0.502s0.502 0.225 0.502 0.502v6.465z"></path>
</symbol>
<symbol id="icon-transformers" viewBox="0 0 32 32">
<title>transformers</title>
<path d="M25.115 5.265l0.045-1.455c-2.694-1.348-5.686-2.155-8.973-2.155s-6.653 0.807-9.347 2.155l0.045 1.455 9.115 5.981 9.115-5.981zM16 4.556c1.875 0 3.448 0.601 3.448 0.601l-3.448 2.317-3.448-2.317c0 0 1.573-0.601 3.448-0.601zM18.073 23.977v-7.020l0.468-6.035-2.541 1.671-2.479-1.671 0.53 6.035v7.020h4.022zM12.39 10.276l-6.789-4.526-0.045-1.761h-3.996l0.593 8.55 4.85 3.466h5.927l-0.54-5.729zM4.685 10.653l6.412 3.018 0.107 0.989-6.357-2.875-0.162-1.132zM4.415 7.582l6.358 3.071 0.161 1.069-6.411-2.955-0.108-1.185zM4.308 26.549l4.735 2.424v-9.412l-2.796-1.74v-1.078l-2.748-1.886 0.809 11.692zM13.054 24.992v-7.012l-3.071 1.562v10.186l1.384 0.861 1.886-4.598h5.496l1.886 4.598 1.446-0.861v-10.185l-3.071-1.562v7.012h-5.956zM14.168 27.070l-1.401 3.932h6.466l-1.4-3.932h-3.665zM19.071 16.004h5.927l4.85-3.466 0.593-8.55h-3.996l-0.046 1.762-6.79 4.526-0.538 5.728zM27.153 11.785l-6.421 3 0.171-1.114 6.412-3.018-0.162 1.132zM27.477 8.767l-6.412 3.018 0.162-1.132 6.358-3.071-0.108 1.185zM28.5 14.856l-2.747 1.886v1.078l-2.755 1.74v9.412l4.694-2.424 0.808-11.692z"></path>
</symbol>
<symbol id="icon-spaceinvaders" viewBox="0 0 33 32">
<title>spaceinvaders</title>
<path d="M29.963 24.982v-5.947h-2.91v5.969h-3.037v2.953h-7.048v-2.975h7.048v-2.972h-14.991v2.973l6.030 0.021v2.973h-6.051v-2.951h-3.036v-6.010h-2.911v5.947h-3.057v-9.004h2.995v-2.891h2.973v-3.057h3.057v-2.994h2.994v3.003l8.983 0.024v-3.027h2.994v3.036h3.057v2.974h2.953v2.973h3.014v8.982h-3.057zM12.019 13.005h-2.994v2.995h2.994v-2.995zM23.996 13.005h-2.994v2.995h2.994v-2.995zM5.968 4.023h3.057v2.994h-3.057v-2.994zM27.053 4.023v2.994h-3.057v-2.994h3.057z"></path>
</symbol>
<symbol id="icon-paperplane" viewBox="0 0 32 32">
<title>paperplane</title>
<path d="M3.363 4.414l4.875 19.348 9.467-3.018-8.448-10.298 10.902 9.56 8.853-2.77-25.649-12.822zM18.004 27.586v-5.324l-3.116 0.926 3.116 4.398z"></path>


+ 1
- 1
src/_core.scss View File

@ -39,7 +39,7 @@
// paragraphs
p {
margin: toEm(0 0 $crispy__spacing 0);
margin: toEm(($crispy__spacing / 3) 0 $crispy__spacing 0);
}
// Semantic text elements


+ 4
- 4
src/_modifiers.scss View File

@ -62,14 +62,14 @@
font-weight: normal !important;
}
.text-weight-bold {
font-weight: bolder !important;
}
.text-weight-medium {
font-weight: medium !important;
}
.text-weight-bold {
font-weight: bolder !important;
}
@each $name, $font-size in $crispy__font-sizes {
.text-size-#{$name} {
font-size: $font-size !important;


+ 1
- 1
src/_variables.scss View File

@ -21,7 +21,7 @@ $crispy__font-family-monospace: Arial, Helvetica, Neue Helvetica, sans-serif !de
$crispy__direction: ltr !default;
// spacing
$crispy__spacing: 10px !default;
$crispy__spacing: 15px !default;
$crispy__spacing__steps: 5 !default;
// colors


+ 0
- 4
src/components/_field.scss View File

@ -41,10 +41,6 @@ $crispy__field__select__border: $crispy__border !default;
@mixin crispy__field() {
.field {
margin: $crispy__field__margin;
.icon {
vertical-align: top;
}
}
// basic style for input elements, will be used to @extend


+ 1
- 1
src/components/_modal.scss View File

@ -14,7 +14,7 @@
*/
$crispy__modal__margin: 1em !default;
$crispy__modal__max-width: 500px !default;
$crispy__modal__max-width: 50% !default; // @TODO add responsive
$crispy__modal__margin: toEm($crispy__spacing * 2) !default;
$crispy__modal__z-index: zIndex('modal') !default;


+ 2
- 0
src/example/components/_button.scss View File

@ -3,6 +3,8 @@
*
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
*
*/


+ 2
- 0
src/example/components/_nav.scss View File

@ -3,6 +3,8 @@
*
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
*
*/


+ 9
- 4
src/example/site/_header.scss View File

@ -3,18 +3,23 @@
*
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
*
*/
@mixin site__header() {
.header {
&__title {
&__logo {
vertical-align: top;
}
&__logo {
a {
text-decoration: none;
&:hover {
color: $crispy__color-primary;
}
}
}
}

+ 23
- 10
src/example/styles.scss View File

@ -12,21 +12,34 @@
'templates/home';
.header {
.container {
max-width: $crispy__md;
}
&__logo {
vertical-align: top;
.sm, .md, .md-only, .lg-only {
display: none;
}
.sm {
@include crispy__media-sm() {
display: block;
}
}
a {
text-decoration: none;
.md {
@include crispy__media-md() {
display: block;
}
}
&:hover {
color: $crispy__color-primary;
}
.md-only {
@include crispy__media-md-only() {
display: block;
}
}
.container {
max-width: $crispy__md;
.lg-only {
@include crispy__media-lg-only() {
display: block;
}
}

Loading…
Cancel
Save