From 22f80419bd266ac34db6a607ee80d143ed676dd6 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 27 Aug 2017 18:19:04 -0400 Subject: [PATCH] Working on getting docs to build --- docs/mix-manifest.json | 4 +- docs/package.json | 4 +- docs/source/_assets/less/base.less | 52 +++++++++++++++- docs/source/_assets/less/container.less | 4 +- docs/source/_assets/less/main.less | 48 ++------------- docs/source/_assets/less/markdown.less | 80 ++++++++++++------------- docs/source/_assets/less/prism.less | 6 +- docs/webpack.mix.js | 3 +- 8 files changed, 107 insertions(+), 94 deletions(-) diff --git a/docs/mix-manifest.json b/docs/mix-manifest.json index 367f5ef1e..9e26dfeeb 100644 --- a/docs/mix-manifest.json +++ b/docs/mix-manifest.json @@ -1,3 +1 @@ -{ - "/source/css/main.css": "/source/css/main.css" -} \ No newline at end of file +{} \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index 0017a6a11..3fd26d71c 100644 --- a/docs/package.json +++ b/docs/package.json @@ -17,8 +17,10 @@ "less": "^2.7.2", "less-loader": "^4.0.5", "lodash": "^4.17.4", + "normalize.css": "^7.0.0", "postcss-cssnext": "^3.0.2", - "stylefmt": "^6.0.0" + "stylefmt": "^6.0.0", + "suitcss-base": "^3.0.0" }, "browserslist": [ "> 1%" diff --git a/docs/source/_assets/less/base.less b/docs/source/_assets/less/base.less index 0df43921f..577e274e7 100644 --- a/docs/source/_assets/less/base.less +++ b/docs/source/_assets/less/base.less @@ -1,5 +1,25 @@ +@import (less) "../../../node_modules/normalize.css/normalize.css"; +@import (less) "../../../node_modules/suitcss-base/lib/base.css"; + +@-moz-viewport { width: device-width; } +@-ms-viewport { width: device-width; } +@-o-viewport { width: device-width; } +@-webkit-viewport { width: device-width; } +@viewport { width: device-width; } + html { - .bg-brand-soft; + @apply .bg-brand-soft; + + font-size: 12px; + + // Changes the default tap highlight to be completely transparent in iOS. + -webkit-tap-highlight-color: rgba(0,0,0,0); + + // -webkit-font-smoothing: antialiased; + + @media (min-width: 420px) { + font-size: 16px; + } } *, @@ -9,12 +29,40 @@ html { -moz-osx-font-smoothing: grayscale; } +body { + @apply .sans; + @apply .text-base; + @apply .text-regular; + @apply .text-dark; + line-height: 1.5; +} + +textarea { + resize: vertical; +} + +button, [role=button] { + cursor: pointer; +} + +small { + @apply .text-sm; +} + +pre, code { + @apply .mono; +} + +img { + vertical-align: middle; +} + a { color: inherit; text-decoration: none; &:hover { - .text-underline; + @apply .text-underline; } } diff --git a/docs/source/_assets/less/container.less b/docs/source/_assets/less/container.less index 55e26d81d..6637b94f5 100644 --- a/docs/source/_assets/less/container.less +++ b/docs/source/_assets/less/container.less @@ -1,6 +1,6 @@ .container { - .px-4; - .mx-auto; + @apply .px-4; + @apply .mx-auto; width: 100%; } diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less index b2058386e..4b84aa59e 100644 --- a/docs/source/_assets/less/main.less +++ b/docs/source/_assets/less/main.less @@ -1,47 +1,11 @@ -.foo { - @apply .px-4; - @apply .py-2; - @apply .bg-blue; - @apply .sans-alt; -} +@import "base"; -.foo { - background-color: red; - @media (--breakpoint-sm) { - // @class "py-2"; - background-color: green; - } - @media (--breakpoint-md) { - background-color: orange; - } -} - -@responsive { - .bar { - color: orange; - } -} +@import "prism"; +@import "markdown"; +@import "container"; @tailwind utilities; -@responsive { - .px-4 { - padding-right: 1rem; - padding-left: 1rem; - } +@import "utilities"; - .py-2 { - padding-top: .5rem; - padding-bottom: .5rem; - } -} - -@responsive { - .sans-alt { - font-family: 'Brandon Text'; - } -} - -.this-should-be-the-very-end { - color: red; -} +@import "variables"; diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less index c7a558b2c..8c26c6366 100644 --- a/docs/source/_assets/less/markdown.less +++ b/docs/source/_assets/less/markdown.less @@ -1,70 +1,70 @@ .markdown, .markdown& { .subnav, .subnav& { - .flex; - .mt-6; - .pb-2; - .border-b; + @apply .flex; + @apply .mt-6; + @apply .pb-2; + @apply .border-b; .subnav-link, .subnav-link& { - .mr-6; - .leading-none; - .text-dark-soft; - .text-sm; + @apply .mr-6; + @apply .leading-none; + @apply .text-dark-soft; + @apply .text-sm; } } a, a& { - .text-blue; + @apply .text-blue; } p code, p& code& { - .inline-block; - .bg-light-soft; - .rounded-sm; - .text-sm; - .p-1; - .leading-none; - .text-no-wrap; - .text-pink-dark; + @apply .inline-block; + @apply .bg-light-soft; + @apply .rounded-sm; + @apply .text-sm; + @apply .p-1; + @apply .leading-none; + @apply .text-no-wrap; + @apply .text-pink-dark; vertical-align: middle; } blockquote, blockquote& { - .text-em; - .text-dark-soft; - .text-sm; + @apply .text-em; + @apply .text-dark-soft; + @apply .text-sm; } h1, h1& { - .mb-4; - .leading-none; - .text-dark; - .text-bold; - .text-3xl; + @apply .mb-4; + @apply .leading-none; + @apply .text-dark; + @apply .text-bold; + @apply .text-3xl; } h2, h2& { - .mt-16; - .mb-8; - .text-dark; - .leading-none; - .text-bold; - .text-xl; + @apply .mt-16; + @apply .mb-8; + @apply .text-dark; + @apply .leading-none; + @apply .text-bold; + @apply .text-xl; } h3, h3& { - .mt-16; - .mb-8; - .text-dark; - .leading-none; - .text-medium; - .text-lg; + @apply .mt-16; + @apply .mb-8; + @apply .text-dark; + @apply .leading-none; + @apply .text-medium; + @apply .text-lg; } p, p& { - .text-dark-soft; - .mt-8; - .mb-3; + @apply .text-dark-soft; + @apply .mt-8; + @apply .mb-3; line-height: 1.75; } } diff --git a/docs/source/_assets/less/prism.less b/docs/source/_assets/less/prism.less index 15001e318..bcdbe9aa3 100644 --- a/docs/source/_assets/less/prism.less +++ b/docs/source/_assets/less/prism.less @@ -52,14 +52,14 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection { pre[class*="language-"] { padding: 0.75em 1em; overflow: auto; - .my-4; + @apply .my-4; } :not(pre) > code[class*="language-"], pre[class*="language-"] { // background: #f5f2f0; - .border; - .rounded; + @apply .border; + @apply .rounded; } /* Inline code */ diff --git a/docs/webpack.mix.js b/docs/webpack.mix.js index 2ce19d903..fb09a008a 100644 --- a/docs/webpack.mix.js +++ b/docs/webpack.mix.js @@ -1,4 +1,5 @@ const mix = require('laravel-mix'); +const tailwind = require('./../lib/tailwind.js'); /* |-------------------------------------------------------------------------- @@ -14,7 +15,7 @@ const mix = require('laravel-mix'); mix.less('source/_assets/less/main.less', 'source/css') .options({ postCss: [ - require('./../src/tailwind.js')(), + tailwind(), ] })