css plugins, multiple files compilation #296

9afc0689 · codecalm · b9f5ae6c · 9afc0689 · 9afc0689 · 9afc0689
11 changed file
--- a/build/scss-compile.js
+++ b/build/scss-compile.js
+//node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/tabler.scss dist/css/tabler.css
+
+const path = require('path'),
+  glob = require("glob"),
+  fs = require("fs"),
+  sass = require("node-sass");
+
+glob("scss/tabler*.scss", {}, function (er, files) {
+  files.forEach(function(file){
+    var basename = path.basename(file, '.scss');
+
+    sass.render(
+      {
+        file: file,
+        outFile: `dist/css/${basename}.css`,
+        sourceMap: true,
+        sourceMapContents: true,
+        precision: 6
+      },
+      (error, result) => {
+        if (!error) {
+          fs.writeFile(`dist/css/${basename}.css`, result.css, error => {
+            if (error) {
+              console.log(error);
+            }
+          });
+
+          fs.writeFile(`dist/css/${basename}.css.map`, result.map, error => {
+            if (error) {
+              console.log(error);
+            }
+          });
+        }
+      }
+    );
+  });
+
+ 
+});
--- a/package.json
+++ b/package.json
@@ -10,10 +10,11 @@
    "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch",
    "html-build": "JEKYLL_ENV=production bundle exec jekyll build",
    "lint": "npm-run-all --parallel js-lint css-lint",
+    "clean": "rm -rf dist/* && mkdir dist/css && mkdir dist/js",
    "css": "npm-run-all css-compile css-prefix css-minify",
-    "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/tabler.scss dist/css/tabler.css",
+    "css-compile": "node build/scss-compile.js",
    "css-prefix": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
-    "css-minify": "cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/tabler.min.css dist/css/tabler.css",
+    "css-minify": "for i in dist/css/tabler*.css;do echo $i; N=`echo $i | sed -e 's/^dist\\/css\\///g' | sed -e 's/\\\\.css//g'`; echo $N; cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/$N.min.css dist/css/$N.css; done",
    "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
    "css-main": "npm-run-all css-compile css-prefix",
    "css-main-build": "npm-run-all css-lint css-compile css-prefix css-minify",

--- a/pages/_docs/typography.md
+++ b/pages/_docs/typography.md
@@ -4,18 +4,77 @@ menu: docs.typography
 description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
 ---

-## Text alignment
+### Headings

-Easily realign text to components with text alignment classes.
+{% example %}
+{% for i in (1..6) %}<h{{ i }}>H{{ i }} Heading</h{{ i }}>
+{% endfor %}
+{% endexample %}
+
+### Paragraphs
+
+{% example %}
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
+{% endexample %}
+
+### Semantic text elements
+
+{% example %}
+<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br /></hide>
+<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br /></hide>
+<cite>Citation</cite><hide> <code class="ml-2">cite</code><br /></hide>
+<code>Hello World!</code><hide> <code class="ml-2">code</code><br /></hide>
+<del>Deleted</del><hide> <code class="ml-2">del</code><br /></hide>
+<em>Emphasis</em><hide> <code class="ml-2">em</code><br /></hide>
+<i>Italic</i><hide> <code class="ml-2">i</code><br /></hide>
+<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br /></hide>
+<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br /></hide>
+<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br /></hide>
+<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br /></hide>
+<samp>Sample</samp><hide> <code class="ml-2">samp</code><br /></hide>
+Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br /></hide>
+Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br /></hide>
+<time>20:00</time><hide> <code class="ml-2">time</code><br /></hide>
+<u>Underline</u><hide> <code class="ml-2">u</code><br /></hide>
+<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br /></hide>
+{% endexample %}
+
+### Optimized for Asian, African, and Middle Eastern alphabets

 {% example %}
-<p class="text-left">Left aligned text on all viewport sizes.</p>
-<p class="text-center">Center aligned text on all viewport sizes.</p>
-<p class="text-right">Right aligned text on all viewport sizes.</p>
-<p class="text-justify">Both aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.</p>
+<h5>Chinese</h5>
+<p>汉字</p>
+
+<h5>Japanese</h5>
+<p>日本語の表記体系</p>
+
+<h5>Korean</h5>
+<p>한글</p>
+
+<h5>Cyrillic</h5>
+<p>Кириллица</p>
+
+<h5>Greek</h5>
+<p>Eλληνική</p>
+
+<h5>Georgian</h5>
+<p>ქართული დამწერლობა</p>
+
+<h5>Armenian</h5>
+<p>Հայերենի այբուբեն</p>
+
+<h5>Arabic</h5>
+<p>الحروف العربية</p>
+
+<h5>Hebrew</h5>
+<p>אלפבית עברי</p>
+
+<h5>Thai</h5>
+<p>อักษรไทย</p>
 {% endexample %}

-## Text transform
+### Text transform

 Transform text in components with text capitalization classes.

@@ -25,7 +84,7 @@ Transform text in components with text capitalization classes.
 <p class="text-capitalize">Capitalized text.</p>
 {% endexample %}

-## Letter spacing
+### Letter spacing

 Utilities for controlling the tracking (letter spacing) of an element.

@@ -35,7 +94,7 @@ Utilities for controlling the tracking (letter spacing) of an element.
 <p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
 {% endexample %}

-## Line Height
+### Line Height

 Utilities for controlling the leading (line height) of an element.

@@ -46,7 +105,7 @@ Utilities for controlling the leading (line height) of an element.
 <p class="leading-loose">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 {% endexample %}

-## Antialiasing
+### Antialiasing

 Utilities for controlling the font smoothing of an element.

@@ -57,7 +116,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
 <div class="subpixel-antialiased">Text without antialiasing</div>
 {% endexample %}

-## Markdown elements
+### Markdown elements

 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag.


--- a/pages/_includes/layout/css.html
+++ b/pages/_includes/layout/css.html
 <link href="{{ site.base }}/dist/css/tabler.css" rel="stylesheet" />
+<link href="{{ site.base }}/dist/css/tabler-flags.css" rel="stylesheet" />
+<link href="{{ site.base }}/dist/css/tabler-charts.css" rel="stylesheet" />

--- a/pages/_plugins/jekyll-example.rb
+++ b/pages/_plugins/jekyll-example.rb
@@ -5,11 +5,6 @@ module Jekyll
    class ExampleBlock < Liquid::Block
      include Liquid::StandardFilters

-      # The regular expression syntax checker. Start with the language specifier.
-      # Follow that by zero or more space separated options that take one of three
-      # forms: name, name=value, or name="<quoted list>"
-      #
-      # <quoted list> is a space-separated list of numbers
      SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+\w+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/

      def initialize(tag_name, markup, tokens)
@@ -63,6 +58,8 @@ Valid syntax: example <lang> [id=foo]
      end

      def example(output)
+        output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
+
        "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + "\n</div>"
      end

@@ -80,6 +77,7 @@ Valid syntax: example <lang> [id=foo]
        formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false)
        lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText
        code = remove_example_classes(code)
+        code = code.gsub(/<hide>.*?<\/hide>/, "")
        code = formatter.format(lexer.lex(code))
        code = code.strip.gsub /^[\t\s]*$\n/, ''
        code = code.gsub /\t/, "\s\s"

--- a/scss/_bootstrap.scss
+++ b/scss/_bootstrap.scss
@@ -2,5 +2,3 @@

 @import "variables";
 @import "mixins";
-
-@import "../node_modules/bootstrap/scss/bootstrap";
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -103,35 +103,29 @@ $avatar-sizes: (
  "xl": 6rem
 ) !default;

-/**
-Fonts
- */
+//Fonts
 $font-size-base: 1rem !default;
 $font-weight-base: 400 !default;
 $line-height-base: 1.375 !default;

 $border-radius: 3px !default;

-/**
-Typography
- */
+//Typography
 $headings-font-weight: 600 !default;

 $small-font-size: 87.5% !default;

-$h1-font-size: $font-size-base * 1.875 !default;
-$h2-font-size: $font-size-base * 1.5 !default;
-$h3-font-size: $font-size-base * 1.125 !default;
-$h4-font-size: $font-size-base * 1 !default;
-$h5-font-size: $font-size-base * .875 !default;
-$h6-font-size: $font-size-base * .75 !default;
+$h1-font-size: $font-size-base * 2 !default;
+$h2-font-size: $font-size-base * 1.75 !default;
+$h3-font-size: $font-size-base * 1.5 !default;
+$h4-font-size: $font-size-base * 1.25 !default;
+$h5-font-size: $font-size-base * 1 !default;
+$h6-font-size: $font-size-base * .875 !default;

 $blockquote-font-size: $h4-font-size !default;
 $lead-font-size: $h3-font-size !default;

-/**
-Sizing
- */
+//Sizing
 $spacer: 1rem !default;
 $spacers: (
  0: 0rem,
@@ -183,9 +177,7 @@ $sizes-percentage: (
  auto: auto
 ) !default;

-/**
-Ribbons
- */
+//Ribbons
 $ribbon-margin: .25rem !default;

 $loader-size: 2.5rem !default;
@@ -284,9 +276,8 @@ $input-border-radius: $border-radius !default;
 $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
 $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;

-/**
-Flags
- */
+
+//Flags
 $generate-flags: true !default;
 $flag-sizes: (
  "md": 2rem,
@@ -294,12 +285,10 @@ $flag-sizes: (
  "xl": 4rem
 ) !default;

-/**
-Utilities
- */
+//Utilities
 $utilities: (
  "opacity": (
-    property: opacity,
+    property: letter-spacing,
    class: tracking,
    values: (
      tight: -.05em,

--- a/scss/tabler-charts.scss
+++ b/scss/tabler-charts.scss
+@import "config";
+@import "ui/charts";
--- a/scss/tabler-flags.scss
+++ b/scss/tabler-flags.scss
-@import "bootstrap";
+@import "config";
 @import "ui/flags";
--- a/scss/tabler-plugins.scss
+++ b/scss/tabler-plugins.scss
--- a/scss/tabler.scss
+++ b/scss/tabler.scss
-@import "bootstrap";
+@import "config";
+@import "../node_modules/bootstrap/scss/bootstrap";
+

 @import "fonts/tabler-webfont";

@@ -40,8 +42,6 @@
 @import "ui/highlight";
 @import "ui/examples";

-@import "ui/charts";
-
 @import "vendor/pace";
 @import "vendor/selectize";