adding default elements

7 years ago · 618e47013b
--- a/demo/index.html
+++ b/demo/index.html
@ -23,6 +23,15 @@
        </style>
    </head>
    <body>
        <header class="header">
            <div class="container">
                <div class="grid">
                    <div class="col-12">
                        Crispy Boilerplate - pure CSS
                    </div>
                </div>
            </div>
        </header>
        <div class="container">
            <div class="grid">
                <div class="col-2">
@ -31,7 +40,9 @@
                    </nav>
                </div>
                <div class="col-10">
                    <h2>Heading</h2>
                    <h1></h1>

                    <h2 id="typography">Typography</h2>
                    <div class="panel">
                        <h1>Heading h1</h1>
                        <h2>Heading h1</h2>
@ -40,6 +51,26 @@
                        <h5>Heading h1</h5>
                        <h6>Heading h1</h6>
                    </div>
                    <div class="panel">
                        <strong>Strong</strong> <span class="background-warning">&lt;strong&gt;</span>
                        <code></code>
                        <blockquote>
                            Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.
                        </blockquote>
                    </div>
                    <div class="panel">
                        <ul>
                            <li>item 1</li>
                            <li>item 2</li>
                        </ul>
                        <ol>
                            <li>item 1</li>
                            <li>item 2</li>
                        </ol>
                        <dl>
                            <dt>defined title 1</dt><dd>defined item 1</dd>
                        </dl>
                    </div>

                    <h2 id="buttons" class="margin-top-1x">Buttons</h2>
                    <div class="panel">
--- a/dest/css/crispy.css
+++ b/dest/css/crispy.css
--- a/dest/css/crispy.min.css
+++ b/dest/css/crispy.min.css
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@ -91,11 +91,24 @@ blockquote {

 // lists
 ul, ol, dl {
    margin: 0 0 $crispy__margin 0;
    padding: 0;
    margin: pxToEm(10px) 0 $crispy__margin pxToEm(10px);
 }

 ol {
    list-style: decimal inside;
 }

 ul {
    list-style-position: outside;
    list-style: disc inside;
 }

 dd, dt {
    margin: 0;
 }

 dt {
    font-weight: bold;
 }

 // divider
--- a/src/scss/crispy.scss
+++ b/src/scss/crispy.scss
@ -13,6 +13,7 @@
    'components/table';

@include crispy__margin();
@include crispy__background-color();

@include crispy__button();
@include crispy__heading();
--- a/src/scss/helpers/_background-color.scss
+++ b/src/scss/helpers/_background-color.scss
@ -11,7 +11,7 @@
 $crispy__background-colors: $crispy__colors !default;

@mixin crispy__background-color() {
     @each $name, $color in $crispy__background-color {
     @each $name, $color in $crispy__background-colors {
        .background-#{$name} {
            background-color: $color;
        }