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

change structure 

change documentation
adding js for example
master
HerrHase 6 years ago
parent
1f1bda8d20
commit
59772a6542
42 changed files with 1960 additions and 2452 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -2267
      dest/css/styles.css
  2. +0
    -1
      dest/css/styles.min.css
  3. +70
    -15
      dest/index.html
  4. +1
    -0
      dest/js/app.js
  5. +1591
    -13
      package-lock.json
  6. +10
    -4
      package.json
  7. +31
    -0
      src/js/_scrollThenFix.js
  8. +5
    -0
      src/js/index.js
  9. +1
    -12
      src/scss/_crispy.scss
  10. +1
    -1
      src/scss/components/_button.scss
  11. +1
    -1
      src/scss/components/_code.scss
  12. +1
    -1
      src/scss/components/_group.scss
  13. +1
    -1
      src/scss/components/_heading.scss
  14. +1
    -1
      src/scss/components/_hero.scss
  15. +1
    -1
      src/scss/components/_icon.scss
  16. +1
    -1
      src/scss/components/_modal.scss
  17. +3
    -1
      src/scss/components/_panel.scss
  18. +1
    -1
      src/scss/components/_table.scss
  19. +11
    -0
      src/scss/components/components.scss
  20. +1
    -1
      src/scss/components/field/_checkbox.scss
  21. +2
    -0
      src/scss/components/field/_panel.scss
  22. +1
    -1
      src/scss/components/field/_radio.scss
  23. +2
    -5
      src/scss/components/field/_select.scss
  24. +2
    -4
      src/scss/components/field/_text.scss
  25. +7
    -2
      src/scss/components/field/field.scss
  26. +10
    -110
      src/scss/example.scss
  27. +19
    -0
      src/scss/example/components/_button.scss
  28. +30
    -0
      src/scss/example/components/_nav.scss
  29. +9
    -0
      src/scss/example/example.scss
  30. +13
    -0
      src/scss/example/site/_container.scss
  31. +16
    -0
      src/scss/example/site/_footer.scss
  32. +44
    -0
      src/scss/example/site/_header.scss
  33. +47
    -0
      src/scss/example/templates/_home.scss
  34. +3
    -1
      src/scss/functions/_units.scss
  35. +1
    -1
      src/scss/functions/_zIndex.scss
  36. +3
    -1
      src/scss/helpers/_float.scss
  37. +1
    -1
      src/scss/helpers/_margin.scss
  38. +3
    -1
      src/scss/helpers/_media.scss
  39. +1
    -1
      src/scss/helpers/_text.scss
  40. +2
    -2
      src/scss/helpers/_width.scss
  41. +0
    -0
      src/scss/mixins/mixins.scss
  42. +11
    -0
      webpack.config.js

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


+ 0
- 1
dest/css/styles.min.css
File diff suppressed because it is too large
View File


+ 70
- 15
dest/index.html View File

@ -8,7 +8,7 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/styles.min.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
@ -61,6 +61,7 @@
<nav class="nav">
<ul class="margin-top-0x">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#example">Example</a></li>
<li><a href="#get-started">Get Started</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#components">Components</a></li>
@ -77,19 +78,46 @@
Introduction
</h2>
<p>
Why? There are so many! Yes, of Course, but this is not a Framework, it is a Boilerplate, more simple. I have tried to build a minimalistic sass.
</p>
<p>
A few Years a have always created Styles to use in other Frameworks, crispy boilerplate is a a small toolkit from this helpers, styles that can be used to create. This is not beatiful or fancy it is a simple and basic toolkit to get a default style.
</p>
<p>
For me it was important to use no js, not that i hate js, no, the Problem of bigger Frameworks was but for the most webapps, it was always diffult to build a few things and not getting a conflict. So i desided it is simpler to get a good stable basis
and build smaller parts
</p>
<p>
So this is a smaller approch, most projects i have then that big Frameworks were used, but i often felt that there was a Problem, often the fight against the framework, that result often in bigger and longer code. This is also a try to code get a smaller
base to create more effecit No, it is a try, i can not promise you it will be done,
</p>
This Boilerplate has more simpler approach, it can be used
as a base for Websites, Webapps and also Frameworks. Of Course there a
so many Framework and Boilerplates.
</p>
<p>
But the most are trying to hard adding styles
that are most time will be overwritten to make it work for you. This causes a loss
in Performance and more Fighting with the Framework and the Documentation.
</p>
<p>
The <strong>Components</strong> are quite simple and not fancy, the have all
fundamental styles to so the can be used.
</p>
<p>
The <strong>Helpers</strong> have Styles for single Elements and spend it saving
for each element to invent a single class.
</p>
<p>
The Coding Style of this Framework is <strong>BEM</strong>, but
also here a more simpler idea of it. <strong>BEM</strong> is a good and helpfull Coding Style,
if you not overthinking it. It helps to create smaller compontents that you can reuse.
Important for that, make them really small. More Information about <a href="http://getbem.com/" target="_blank">BEM</a>.
</p>
<!-- example -->
<hr class="margin-top-3x">
<h2 id="example" class="margin-top-1x">
Example
</h2>
<p>
This Site is also a Example to use the Boilerplate. You can find all
Styles for this site in "/src/scss/example". You see also that there
is a "templates" Directory. The Idea in <strong>BEM</strong> was always
create all in Components. That is not always Practical.
</p>
<p>
Sometimes, the more Bigger Picture, on a Single Site or in App the
Stylings that are so special that the belong only there, and are to big
for a templates. For this use the "templates" Directory.
</p>
<!-- how to use -->
<hr class="margin-top-3x">
@ -488,7 +516,7 @@ toRem(10px 10px 0 0);
<!-- helpers / align -->
<h3 class="h4 margin-top-1x">
Align
Float
</h3>
<pre class="code">&lt;div class=&quot;text-left&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-center&quot;&gt;&lt;/div&gt;
@ -560,6 +588,31 @@ toRem(10px 10px 0 0);
<div class="panel panel__inner width-75 margin-bottom-1x">width-75</div>
<div class="panel panel__inner width-100 margin-bottom-1x">width-100</div>
<!-- helpers / text -->
<h3 class="h4 margin-top-1x">
Text
</h3>
<pre class="code">&lt;div class=&quot;text-left&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-center&quot;&gt;&lt;/div&gt;
&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-normal&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;
&lt;div class=&quot;text-small&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;text-crossed&quot;&gt;&lt;/div&gt;</code></pre>
<p>
Also it will be create classes $crispy__font-sizes
</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>
</ul>
<!-- mixins -->
<hr class="margin-top-3x">
<h2 id="mixins" class="margin-top-1x">
@ -657,6 +710,8 @@ toRem(10px 10px 0 0);
</div>
</div>
</footer>
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>

+ 1
- 0
dest/js/app.js
File diff suppressed because it is too large
View File


+ 1591
- 13
package-lock.json
File diff suppressed because it is too large
View File


+ 10
- 4
package.json View File

@ -9,6 +9,7 @@
"author": "Björn Hase",
"license": "MIT",
"dependencies": {
"cash-dom": "^1.3.7",
"normalize.css": "^7.0.0",
"reflex-grid": "^2.0.1"
},
@ -20,7 +21,9 @@
"postcss-cli": "^4.1.1",
"rimraf": "^2.6.1",
"svg-sprite": "^1.3.7",
"svgo": "^1.0.3"
"svgo": "^1.0.3",
"uglifyjs-webpack-plugin": "^1.2.0",
"webpack": "^3.11.0"
},
"config": {
"dest_dir": "dest/",
@ -33,13 +36,16 @@
"build": "npm run css:build && npm run svg:build",
"css:build": "npm run css:clean && npm run css:scss && npm run css:postcss && npm run css:minify",
"css:clean": "rimraf $npm_package_config_dist_dir/css/*",
"css:scss": "node-sass --include-path $npm_package_config_normalize --include-path $npm_package_config_reflex_grid $npm_package_config_src_dir/scss/example.scss $npm_package_config_dest_dir/css/styles.css",
"css:scss": "node-sass --include-path $npm_package_config_normalize --include-path $npm_package_config_reflex_grid $npm_package_config_src_dir/scss/example.scss $npm_package_config_build_dir/css/styles.css",
"css:postcss": "postcss $npm_package_config_dest_dir/css/*.css --use autoprefixer -d $npm_package_config_dest_dir/css/",
"css:minify": "cleancss $npm_package_config_dest_dir/css/styles.css > $npm_package_config_dest_dir/css/styles.min.css",
"css:minify": "cleancss $npm_package_config_build_dir/css/styles.css > $npm_package_config_dest_dir/css/styles.css",
"svg:build": "npm run svg:clean && npm run svg:copy && npm run svg:optimize && npm run svg:minify",
"svg:clean": "rimraf $npm_package_config_dest_dir/svg/* && rimraf $npm_package_config_build_dir/svg/*",
"svg:copy": "copyfiles -f $npm_package_config_src_dir/icons/**/*.svg $npm_package_config_build_dir/svg",
"svg:optimize": "svgo -f $npm_package_config_build_dir/svg -o $npm_package_config_build_dir/svg",
"svg:minify": "svg-sprite -s --symbol-sprite=$npm_package_config_dest_dir/svg/icons.svg --symbol-dest= $npm_package_config_build_dir/svg/*.svg"
"svg:minify": "svg-sprite -s --symbol-sprite=$npm_package_config_dest_dir/svg/icons.svg --symbol-dest= $npm_package_config_build_dir/svg/*.svg",
"js:build": "npm run js:clean && npm run js:webpack",
"js:clean": "rimraf $npm_package_config_dist_dir/js/*",
"js:webpack": "npx webpack --config webpack.config.js"
}
}

+ 31
- 0
src/js/_scrollThenFix.js View File

@ -0,0 +1,31 @@
"use strict";
import $ from 'cash-dom';
/**
* after scrolling
*
* @param string top
* @param string addClass
* @param string destinationSelector
*/
export default function scrollThenFix(sourceSelector, destinationSelector, addClass, offset) {
let destination = $(destinationSelector);
let source = $(sourceSelector);
if (offset === undefined) {
offset = 0;
}
// adding fixed position
destination.css('top', (source.outerHeight() + offset) + 'px');
window.addEventListener('scroll', function(event) {
if (event.pageY > source.outerHeight()) {
destination.addClass(addClass);
} else {
destination.removeClass(addClass);
}
});
}

+ 5
- 0
src/js/index.js View File

@ -0,0 +1,5 @@
"use strict";
import scrollThenFix from './_scrollThenFix.js';
scrollThenFix('.header', '.nav', 'nav--fixed', 48);

+ 1
- 12
src/scss/_crispy.scss View File

@ -6,16 +6,5 @@
'config',
'base',
'components/button',
'components/code',
'components/group',
'components/heading',
'components/hero',
'components/icon',
'components/modal',
'components/panel',
'components/table',
'components/field/field',
'components/components',
'helpers/helpers';

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

@ -1,5 +1,5 @@
/**
* button
* component: button
*
*
* @author Björn Hase


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

@ -1,5 +1,5 @@
/**
* code
* component: code
*
* <pre class="code">
* <code>


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

@ -1,5 +1,5 @@
/**
* group
* component: group
*
* <nav class="group group--horizontal">
* <ul class="group__section">


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

@ -1,5 +1,5 @@
/**
* heading
* component: heading
*
* create classes for heading similar to there name,
* run map for sizes on each heading


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

@ -1,5 +1,5 @@
/**
* hero
* component: hero
*
* background-size is as default: cover - Resize the background image to cover the entire container
*


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

@ -1,5 +1,5 @@
/**
* icon
* component: icon
*
* use svg as icon
*


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

@ -1,5 +1,5 @@
/**
* panel
* component: modal
*
* <div class="modal">
*


+ 3
- 1
src/scss/components/_panel.scss View File

@ -1,8 +1,10 @@
/**
* panel
* component: panel
*
* <div class="panel">
* <div class="panel__inner">
*
* </div>
* </div>
*
* @author Björn Hase


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

@ -1,5 +1,5 @@
/**
* table
* component: table
*
* <table class="table table--striped">
* <thead>


+ 11
- 0
src/scss/components/components.scss View File

@ -0,0 +1,11 @@
@import
'button',
'code',
'group',
'heading',
'hero',
'icon',
'modal',
'panel',
'table',
'field/field';

+ 1
- 1
src/scss/components/field/_checkbox.scss View File

@ -1,5 +1,5 @@
/**
* checkbox
* component: checkbox
*
* <div class="field">
* <input id="" type="text" class="field__checkbox" />


+ 2
- 0
src/scss/components/field/_panel.scss View File

@ -1,4 +1,6 @@
/**
* component: panel
*
* <div class="field">
* <div class="field__panel">
* <ul>


+ 1
- 1
src/scss/components/field/_radio.scss View File

@ -1,5 +1,5 @@
/**
* radio
* component: radio
*
* <div class="field">
* <input id="" type="text" class="field__radio" />


+ 2
- 5
src/scss/components/field/_select.scss View File

@ -1,5 +1,5 @@
/**
* select
* component: select
*
* <div class="field">
* <label class="field__label">
@ -25,12 +25,9 @@ $crispy__field__select__border-color--error: $crispy__color-danger !default;
@mixin crispy__field__select()
{
.field__select {
@extend .field__;
@extend .field__input;
display: block;
width: 100%;
padding: $crispy__field__select__padding;
border: $crispy__field__select__border;
background-color: $crispy__field__select__background-color;


+ 2
- 4
src/scss/components/field/_text.scss View File

@ -1,5 +1,5 @@
/**
* text
* component: text
*
* <div class="field">
* <label class="field__label">
@ -20,10 +20,8 @@ $crispy__field__text__border-color--error: $crispy__color-danger !default;
@mixin crispy__field__text() {
.field__text {
@extend .field__;
@extend .field__input;
display: block;
width: 100%;
border: $crispy__field__text__border;
&--valid {


src/scss/components/field/_field.scss → src/scss/components/field/field.scss View File

@ -6,7 +6,9 @@
'select';
/**
* field
* component: field
*
* field is a wrapper for form elements
*
*
* @author Björn Hase
@ -24,7 +26,10 @@ $crispy__field__input__color: $crispy__color-text !default;
margin: $crispy__field__margin;
}
.field__ {
// basic style for input elements, will be used to @extend
.field__input {
display: block;
width: 100%;
line-height: $crispy__golden-ratio;
padding: $crispy__field__input__padding;
color: $crispy__field__input__color;

+ 10
- 110
src/scss/example.scss View File

@ -1,5 +1,6 @@
@import
'crispy';
'crispy',
'example/example';
// components
@include crispy__button();
@ -19,118 +20,17 @@
@include crispy__field__select();
@include crispy__field__panel();
.container {
max-width: 992px;
width: 100%;
margin: 0 auto;
}
.lead {
margin-top: -(toEm(5px));
}
.header {
padding: 8px 0 0;
margin: 0 0 20px;
background-color: $crispy__color-primary;
border-bottom: 1px solid darken($crispy__color-primary, 10%);
@include crispy__media-sm() {
margin: 0 0 30px;
}
&__title {
color: white;
margin: toEm(0 0 3px);
}
&__logo {
top: 3px;
width: 50px;
}
&__feature-text, &__feature-title {
text-align: center;
padding: toEm(0 20px);
}
&__feature-title {
@include crispy__font-size(23px);
}
&__feature-text {
margin: toEm(0 0 30px);
@include crispy__font-size(18px);
}
}
.footer {
padding: 8px 0 0;
background-color: #e9e9e9;
border-top: 1px dotted #959595;
margin: 50px 0 0 0;
}
// button
.button {
border: 1px solid darken($crispy__color-primary, 10%);
background-color: $crispy__color-primary;
color: white;
svg {
fill: white;
}
}
.nav {
position: relative;
a {
font-style: italic;
@include crispy__font-size(18px);
}
@include crispy__media-sm() {
position: fixed;
}
}
.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;
}
}
// helpers
@include crispy__float();
@include crispy__margin();
@include crispy__media();
@include crispy__text();
@include crispy__width();
// example
@include example__container();
@include example__header();
@include example__footer();
@include example__button();
@include example__nav();
@include example__home();

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

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

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

@ -0,0 +1,30 @@
/**
* component: nav
*
*
* @author Björn Hase
*
*/
@mixin example__nav()
{
.nav {
position: relative;
a {
font-style: italic;
@include crispy__font-size(18px);
}
@include crispy__media-sm() {
position: fixed;
transition: top 0.3s;
}
&--fixed {
@include crispy__media-sm() {
top: 50px !important;
}
}
}
}

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

@ -0,0 +1,9 @@
@import
'site/container',
'site/footer',
'site/header',
'components/button',
'components/nav',
'templates/home';

+ 13
- 0
src/scss/example/site/_container.scss View File

@ -0,0 +1,13 @@
/**
*
*
*/
@mixin example__container()
{
.container {
max-width: 992px;
width: 100%;
margin: 0 auto;
}
}

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

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

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

@ -0,0 +1,44 @@
/**
* component: header
*
*
* @author Björn Hase
*
*/
@mixin example__header() {
.header {
padding: 8px 0 0;
margin: 0 0 20px;
background-color: $crispy__color-primary;
border-bottom: 1px solid darken($crispy__color-primary, 10%);
@include crispy__media-sm() {
margin: 0 0 30px;
}
&__title {
color: white;
margin: toEm(0 0 3px);
}
&__logo {
top: 3px;
width: 50px;
}
&__feature-text, &__feature-title {
text-align: center;
padding: toEm(0 20px);
}
&__feature-title {
@include crispy__font-size(23px);
}
&__feature-text {
margin: toEm(0 0 30px);
@include crispy__font-size(18px);
}
}
}

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

@ -0,0 +1,47 @@
/**
* 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;
}
}
}

+ 3
- 1
src/scss/functions/_units.scss View File

@ -1,5 +1,7 @@
/**
* functions to convert px to em and rem
* functions: units
*
* convert px to em and rem
*
*
* @author Björn Hase


+ 1
- 1
src/scss/functions/_zIndex.scss View File

@ -1,5 +1,5 @@
/**
* z-index
* function: z-index
*
*
* @author Björn Hase


+ 3
- 1
src/scss/helpers/_float.scss View File

@ -1,5 +1,7 @@
/**
* helpers for float & centering
* helper: float
*
* float & centering
*
*
*


+ 1
- 1
src/scss/helpers/_margin.scss View File

@ -1,5 +1,5 @@
/**
* helpers for margin
* helper: margin
*
*
*


+ 3
- 1
src/scss/helpers/_media.scss View File

@ -1,5 +1,7 @@
/**
* helpers for img & video
* helper: media
*
* for img & video
*
*
* @author Björn Hase


+ 1
- 1
src/scss/helpers/_text.scss View File

@ -1,5 +1,5 @@
/**
* helpers for text
* helper: text
*
* align, font-sizes, color, background-color
*


+ 2
- 2
src/scss/helpers/_width.scss View File

@ -1,9 +1,9 @@
/**
* helpers for width
* helper: width
*
*
* @author Björn Hase
*
*
*/
@mixin crispy__width() {


src/scss/mixins/_mixins.scss → src/scss/mixins/mixins.scss View File


+ 11
- 0
webpack.config.js View File

@ -0,0 +1,11 @@
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'dest/js/app.js'
},
plugins: [
new UglifyJsPlugin()
]
};

Write Preview
Loading…
Cancel
Save