[WIP] Resolve SCSS variables

.editorconfig

@@ -0,0 +1,5 @@
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

CHANGELOG.md

@@ -24,6 +24,19 @@ Bugfixes
 Features
 --------
 
+* Added support for LESS - you are even able to pass both SASS/SCSS and LESS
+  files to Nucleus at the same time.
+
+* Added version console output
+
+Bugfixes
+--------
+
+* Show warning if substitution attempt with unknown selector and return empty
+  string instead of 'undefined'.
+
+* Lots of documentation typo fixes and small style fixes for both Nucleus
+  and the docs.
 * Added support for @script annotations (shout-out to jcfariadias,
   pieplu and Joao Dias).
 

CONTRIBUTORS.md

@@ -10,6 +10,8 @@ Ryan Potter ([Github](https://github.com/rhym) • [Twitter](https://twitter.
 
 Thomas Carlson ([Github](https://github.com/thomas0c) • [Twitter](https://twitter.com/thomasoc))
 
+Philipp Mandler ([Github](https://github.com/phlmn))
+
 # Special thanks to
 
 Alexander Zhukov ([GitHub](https://github.com/nogizhopaboroda) • [Twitter](https://twitter.com/nogizhopaboroda))

README.md

@@ -9,7 +9,7 @@
 [![npm](https://badge.fury.io/js/nucleus-styleguide.svg)](https://www.npmjs.com/package/nucleus-styleguide)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](LICENSE)
 
-Nucleus is a living style guide generator for atomic css based components. It's a Node application parsing the source SCSS files and reading information from DocBlock annotations.
+Nucleus is a living style guide generator for atomic css based components. It's a Node application parsing the source CSS / SCSS / LESS files and reading information from DocBlock annotations.
 
 ![Nucleus Preview](https://holidaypirates.github.io/nucleus/images/git-teaser.png)
 

assets/scripts/CommonUiModule/directives/copy-button.js

@@ -20,7 +20,7 @@ $('[data-d-copy]').each(function (i, element ) {
   copy.on('success', function () {
     SweetAlert({
       title: "Copied!",
-      type: "success",
+      icon: "success",
       confirmButtonText: "Cool",
       timer: 1500,
       allowOutsideClick: true

assets/scripts/app.js

@@ -11,4 +11,4 @@
 
 'use strict';
 
-require('CommonUiModule/module');
+require('./CommonUiModule/module');

assets/styles/molecules/logo.scss

@@ -31,6 +31,7 @@
 
   .SG-logo__name {
     @include lato(700);
+
     font-size: 22px;
     display: inline-block;
     vertical-align: baseline;

assets/styles/molecules/mixin.scss

@@ -23,6 +23,7 @@
  */
 .SG-mixin {
   @include lato(300);
+
   font-size: 22px;
   margin-bottom: 1.5em;
 

assets/styles/molecules/navigation.scss

@@ -28,6 +28,7 @@
  */
 .SG-nav {
   @include reset();
+
   list-style-type: none;
   text-align: center;
 
@@ -42,6 +43,7 @@
     margin: 0 15px;
     color: $color--gray;
     font-size: 16px;
+
     &:hover {
       color: $color--dark-gray;
       border-bottom: 2px solid $color--light-gray;
@@ -52,6 +54,7 @@
     border-bottom: 3px solid $color--accent;
     margin-bottom: -1px;
     color: $color--dark-gray;
+
     &:hover {
       border-bottom: 3px solid $color--accent;
     }
@@ -80,19 +83,22 @@
  */
 .SG-nav-icons {
   @include reset();
+
   list-style-type: none;
   line-height: 67px;
   text-align: right;
 
   li {
     display: inline-block;
+
     &:not(:last-child) {
       margin-right: 2em;
     }
   }
 
   .SG-nav-icons__item {
     color: $color--light-gray;
+
     &:hover {
       color: $color--gray;
     }
@@ -129,7 +135,7 @@
   margin-bottom: 4em;
 
   ul {
-    padding-left: 0em;
+    padding-left: 0;
     line-height: 30px;
     margin: 0;
   }
@@ -157,6 +163,7 @@
     padding-bottom: 0.5em;
     margin-bottom: 0.5em;
     font-size: 16px;
+
     &:not(:first-child) {
       margin-top: 2em;
     }

assets/styles/molecules/nuclide-table.scss

@@ -28,16 +28,17 @@
   border-left-width: 3px;
   font-size: 14px;
 
-
   .SG-config__row {
     @include clearAfter();
+
     &:not(:last-of-type) {
       border-bottom: 1px solid $color--light-gray;
     }
   }
 
   .SG-config__label {
     @include lato(600);
+
     padding: 10px 20px;
     min-width: 150px;
     display: block;
@@ -46,6 +47,7 @@
 
   .SG-config__value {
     @include monospace();
+
     padding: 10px 20px;
     display: inline-block;
 

assets/styles/molecules/tables.scss

@@ -38,6 +38,7 @@
  */
 .SG-table {
   @include reset();
+
   width: 100%;
 
   .SG-table__cell {

assets/styles/nuclides/colors.scss

@@ -57,3 +57,10 @@ $color--dark-gray: #4a4a4a;
  * @section Grayscale
  */
 $color--blackish: #333;
+
+/**
+ * Half transparent black
+ * @color
+ * @section Transparency
+ */
+$color--semi-transparent: rgba(0, 0, 0, 0.5);

assets/styles/nuclides/grid.scss

@@ -8,6 +8,7 @@
 // of the MIT license. See the LICENSE file for details.
 
 @import "node_modules/gridle/sass/gridle/gridle";
+
 @include gridle_setup( (
   context : 12,
   gutter-width : 20px,

assets/styles/nuclides/tools.scss

@@ -50,7 +50,8 @@
  *  @include clearHard();
  */
 @mixin clearHard() {
-  &::after, &::before {
+  &::after,
+  &::before {
     content: "";
     display: block;
     height: 1px;

assets/styles/nuclides/z-index.scss

@@ -38,8 +38,8 @@ $z-map: (
   @if map-has-key($z, $type) {
 
     // Check if 'name' is available
-    @if map-has-key(map-get($z,$type), $name) {
-      z-index: map-get(map-get($z,$type), $name);
+    @if map-has-key(map-get($z, $type), $name) {
+      z-index: map-get(map-get($z, $type), $name);
     } @else {
       @warn 'There is not elements "#{$name}" in the z map available.';
     }

assets/styles/structures/alerts.scss

@@ -7,8 +7,6 @@
 // This software may be modified and distributed under the terms
 // of the MIT license. See the LICENSE file for details.
 
-@import "../../node_modules/sweetalert/dist/sweetalert";
-
-.sweet-alert .confirm {
+.swal-button--confirm {
   background-color: $color--accent !important;
 }

assets/styles/structures/header.scss

@@ -28,6 +28,7 @@
 .SG-header {
   @include reset();
   @include clearAfter();
+
   border-bottom: 1px solid $color--whitesmoke;
   padding: 0 40px;
   margin-bottom: 100px;

assets/styles/structures/icon-preview.scss

@@ -9,10 +9,12 @@
 
 .SG-icon-preview {
   @include reset();
+
   margin-bottom: 50px;
 
   .SG-icon-preview__name {
     @include reset();
+
     color: $color--accent;
     display: inline-block;
   }
@@ -21,6 +23,7 @@
     display: inline-block;
     line-height: 1;
     width: 12.5%;
+
     &::after {
       display: block;
       font-size: 12px;
@@ -31,6 +34,7 @@
 
   .SG-icon-preview__copy {
     margin-top: 15px;
+
     .SG-ico {
       font-size: 12px;
     }

assets/styles/structures/layouts.scss

@@ -17,6 +17,7 @@
  */
 .SG-layout {
   @include reset();
+
   width: 100%;
   max-width: 937px;
   margin-left: auto;
@@ -45,6 +46,7 @@
     float: left;
     width: 20%;
   }
+
   .SG-layout__content {
     float: right;
     width: 75%;

assets/views/common/demo.pug

@@ -9,5 +9,5 @@
  * of the MIT license. See the LICENSE file for details.
 
 .SG-row: .SG-gr-12: .SG-hint.SG-p.
-      <span class="SG-strong">Hint:</span><br>This is the generated style guide for Nucleus and it's documentation
-      pages. These are the actual components used, and the pages are generated with Nucleus itself. Feel free to browse a bit and try things out.
+  <span class="SG-strong">Hint:</span><br>This is the generated style guide for Nucleus and it's documentation
+  pages. These are the actual components used, and the pages are generated with Nucleus itself. Feel free to browse a bit and try things out. <a href="https://holidaypirates.github.io/nucleus/" class="SG-a SG-a--pink">Back to the home page</a>

assets/views/entities/colors.pug

@@ -18,16 +18,16 @@ mixin colors-header()
     div.SG-gr-2
       div.SG-table__head.SG-table__cell Hex
     div.SG-gr-3.SG-no-gutter-right
-      div.SG-table__head.SG-table__cell RGBA
+      div.SG-table__head.SG-table__cell RGB
 
 mixin color(color)
   div.SG-row.SG-table.SG-row-align-middle
     a.SG-anchor(name=color.hash)
     div.SG-gr-2.SG-no-gutter-left
       div.SG-table__cell
         div.SG-color-preview
-          div.SG-color-preview__circle(style="background-color: " + color.values.hex + "; border-color: " + color.values.darker)
-          div.SG-color-preview__typo(style="color: " + color.values.hex) Aa
+          div.SG-color-preview__circle(style="background-color: " + color.values.rgb + "; border-color: " + color.values.darker)
+          div.SG-color-preview__typo(style="color: " + color.values.rgb) Aa
     div.SG-gr-3
       div.SG-table__cell
         span.SG-strong
@@ -43,4 +43,4 @@ mixin color(color)
         span.SG-a(data-d-copy, data-clipboard-text=color.values.hex) #{color.values.hex}
     div.SG-gr-3.SG-no-gutter-right
       div.SG-table__cell
-        span.SG-a(data-d-copy, data-clipboard-text=color.values.rgba) #{color.values.rgba}
+        span.SG-a(data-d-copy, data-clipboard-text=color.values.rgb) #{color.values.rgb}

default.nucleus.json

@@ -2,13 +2,16 @@
   "title":  "Nucleus",
   "files":  [
     "*.scss",
-    "**/*.scss"
+    "**/*.scss",
+    "*.less",
+    "**/*.less"
   ],
   "target" : "styleguide",
   "css" : null,
   "namespace": "page",
   "verbose" : 3,
   "counterCSS" : null,
   "staticLipsum" : false,
-  "placeholderService" : false
+  "placeholderService" : false,
+  "scssEntry": null
 }

docs/gulpfile.js

@@ -147,7 +147,7 @@ gulp.task('build:views', [], function () {
         'app': './app',
       },
       output: {
-        path: config.target + '/scripts/',
+        path: __dirname + '/' + config.target + '/scripts/',
         publicPath: '/scripts/',
         filename: '[name].js',
         chunkFilename: '[chunkhash].bundle.js'
@@ -159,9 +159,9 @@ gulp.task('build:views', [], function () {
       },
       amd: {jQuery: true },
       resolve: {
-        fallback: [
-          __dirname + '/' + config.sources + '/scripts'
-        ]
+        // fallback: [
+        //   __dirname + '/' + config.sources + '/scripts'
+        // ]
       },
       plugins: [
         new webpack.ProvidePlugin({

docs/src/scripts/preview-draggable.js

@@ -2,7 +2,7 @@
 
 require('jquery-ui/ui/widgets/mouse');
 require('jquery-ui/ui/widgets/resizable');
-require('touchpunch');
+require('./touchpunch');
 
 $('.split-pane__preview').resizable({
   handles: 'e'

docs/src/views/layouts/base.pug

@@ -11,7 +11,7 @@ html(lang="en")
     meta(property='og:title', content='Powerful management for crafted styles')
     meta(property='og:site_name', content='Nucleus')
     meta(property='og:url', content='https://holidaypirates.github.io/nucleus/')
-    meta(property='og:description', content='A developer orientated living style guide generator for SCSS')
+    meta(property='og:description', content='A developer orientated living style guide generator for SCSS and LESS')
     meta(property='og:type', content='website')
     meta(property='og:image', content='https://holidaypirates.github.io/nucleus/images/split-preview.png')
 

docs/src/views/vendored-elements.pug

@@ -10,9 +10,9 @@ block content
   p.SG-p.
     The solution for this is quite straigt-forward. Create empty dummy elements
     that match the vendored elements and put the annotations there. Since
-    Nucleus is working with the SCSS source files, it is not important
+    Nucleus is working with the CSS source files, it is not important
     if a selector contains style declarations or not. In the end, after
-    transpiling SCSS to CSS, the empty selector will not be in the CSS file.
+    transpiling SCSS (or LESS) to CSS, the empty selector will not be in the CSS file.
 
   code.code.language-nucleus(data-d-code-preview).
     /**