Use crafty to build css, convert less to scss

This commit is contained in:
Stéphane Goetz 2018-02-25 20:12:18 +01:00
bovenliggende d0b2850434
commit 3346dec1d6
41 gewijzigde bestanden met toevoegingen van 4135 en 1481 verwijderingen

30
crafty.config.js Normal file
Bestand weergeven

@ -0,0 +1,30 @@
module.exports = {
presets: [
"@swissquote/crafty-preset-postcss",
"@swissquote/crafty-runner-gulp"
],
destination_css: "themes",
css: {
"theme_blue": {
source: "themes/daux/scss/theme-blue.scss",
destination: "daux/css/theme-blue.min.css"
},
"theme_green": {
source: "themes/daux/scss/theme-green.scss",
destination: "daux/css/theme-green.min.css"
},
"theme_navy": {
source: "themes/daux/scss/theme-navy.scss",
destination: "daux/css/theme-navy.min.css"
},
"theme_red": {
source: "themes/daux/scss/theme-red.scss",
destination: "daux/css/theme-red.min.css"
},
"daux_singlepage": {
source: "themes/daux_singlepage/scss/main.scss",
destination: "daux_singlepage/css/main.min.css"
}
}
};

Bestand weergeven

@ -1,86 +0,0 @@
var cssnano = require('cssnano'),
gulp = require('gulp'),
less = require('gulp-less'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
postcss = require('gulp-postcss'),
stylelint = require('gulp-stylelint');
var resources = {
daux_blue:{source: "themes/daux/less/theme-blue.less", dest: "themes/daux/css/"},
daux_green:{source: "themes/daux/less/theme-green.less", dest: "themes/daux/css/"},
daux_navy:{source: "themes/daux/less/theme-navy.less", dest: "themes/daux/css/"},
daux_red:{source: "themes/daux/less/theme-red.less", dest: "themes/daux/css/"},
daux_singlepage:{source: "themes/daux_singlepage/less/main.less", dest: "themes/daux_singlepage/css/"}
};
var stylelintRules = {
"indentation": 4,
"selector-list-comma-newline-after": "always-multi-line",
"selector-max-id": 0,
// Autoprefixer
"at-rule-no-vendor-prefix": true,
"media-feature-name-no-vendor-prefix": true,
"property-no-vendor-prefix": true,
"selector-no-vendor-prefix": true,
"value-no-vendor-prefix": true
};
var cssnanoOptions = {
safe: true, // Disable dangerous optimisations
filterPlugins: false, // This does very weird stuff
autoprefixer: {
add: true, // Add needed prefixes
remove: true // Remove unnecessary prefixes
}
};
function createCSSTask(source, dest) {
return function () {
return gulp.src(source)
.pipe(plumber())
.pipe(less())
.pipe(postcss([cssnano(cssnanoOptions)]))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(dest));
}
}
gulp.task('lint-css', function () {
return gulp
.src(['themes/**/less/**/*.less', '!themes/**/vendor/**/*.less'])
.pipe(stylelint({
failAfterError: true,
config: {
extends: 'stylelint-config-standard',
rules: stylelintRules
},
syntax: 'less',
reporters: [{
formatter: 'string',
console: true
}],
debug: true
}));
});
var style_tasks = [];
for (var style in resources) {
if (resources.hasOwnProperty(style)) {
gulp.task('style_' + style, createCSSTask(resources[style].source, resources[style].dest));
style_tasks.push('style_' + style);
}
}
style_tasks.push('lint-css');
gulp.task("styles", style_tasks);
gulp.task('watch', ['default'], function () {
// Watch .less files
gulp.watch('themes/**/less/**/*.less', ['styles']);
});
gulp.task('default', ['styles']);

Bestand weergeven

@ -3,17 +3,12 @@
"version": "0.3.0",
"private": true,
"devDependencies": {
"cssnano": "^3.7.3",
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^7.0.0",
"gulp-rename": "^1.2.2",
"gulp-stylelint": "^5.0.0",
"stylelint-config-standard": "^17.0.0"
"@swissquote/crafty": "^1.0.1",
"@swissquote/crafty-preset-postcss": "^1.0.1",
"@swissquote/crafty-runner-gulp": "^1.0.1"
},
"scripts": {
"build": "gulp",
"watch": "gulp watch"
"build": "crafty run",
"watch": "crafty watch"
}
}

Bestand weergeven

@ -3,15 +3,15 @@
<head>
<title><?= $page['title']; ?> <?= ($page['title'] != $params['title'])? '- ' . $params['title'] : "" ?></title>
<?php //SEO meta tags...
if (array_key_exists('description', $page['attributes'])) {
if (array_key_exists('attributes', $page) && array_key_exists('description', $page['attributes'])) {
echo " <meta name=\"description\" content=\"{$page['attributes']['description']}\">\n";
} elseif (array_key_exists('tagline', $params)) {
echo " <meta name=\"description\" content=\"{$params['tagline']}\">\n";
}
if (array_key_exists('keywords', $page['attributes'])) {
if (array_key_exists('attributes', $page) && array_key_exists('keywords', $page['attributes'])) {
echo " <meta name=\"keywords\" content=\"{$page['attributes']['keywords']}\">\n";
}
if (array_key_exists('author', $page['attributes'])) {
if (array_key_exists('attributes', $page) && array_key_exists('author', $page['attributes'])) {
echo " <meta name=\"author\" content=\"{$page['attributes']['author']}\">\n";
} elseif (array_key_exists('author', $params)) {
echo " <meta name=\"author\" content=\"{$params['author']}\">\n";

Bestand weergeven

@ -1,7 +1,10 @@
@font-family-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-heading: "Roboto Slab", @font-family-text;
:root {
--font-family-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
--font-family-heading: "Roboto Slab", var(--font-family-text);
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 13, 2017 */

Bestand weergeven

@ -157,7 +157,7 @@ img {
}
code {
font-family: @font-family-monospace;
font-family: var(--font-family-monospace);
}
code, tt {

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand weergeven

@ -1,11 +0,0 @@
//Daux.io Blue
@sidebar-background: #f7f7f7;
@sidebar-hover: #c5c5cb;
@lines: #e7e7e9;
@dark: #3f4657;
@light: #82becd;
@text: #2d2d2d;
// Daux.io Base
@import "theme.less";

Bestand weergeven

@ -1,11 +0,0 @@
//Daux.io Green
@sidebar-background: #f5f5f6;
@sidebar-hover: #a0d55d;
@lines: #e7e7e9;
@dark: #000;
@light: #8acc37;
@text: #2d2d2d;
// Daux.io Base
@import "theme.less";

Bestand weergeven

@ -1,11 +0,0 @@
//Daux.io Navy
@sidebar-hover: #c5c5cb;
@lines: #e7e7e9;
@sidebar-background: #f5f5f6;
@dark: #13132a;
@light: #7795b4;
@text: #2d2d2d;
// Daux.io Base
@import "theme.less";

Bestand weergeven

@ -1,11 +0,0 @@
// Daux.io Red
@sidebar-hover: #eee;
@lines: #eee;
@sidebar-background: #f7f7f7;
@dark: #c64641; //#df4f49;
@light: #ecb5a1;
@text: #2d2d2d;
// Daux.io Base
@import "theme.less";

Bestand weergeven

@ -1,24 +0,0 @@
/*!
* DAUX.IO
* https://dauxio.github.io/
* MIT License
*/
// Daux Style
@import "../../common/less/vendor/normalize.less";
@import "../../common/less/_fonts.less";
@import "_mixins.less";
@import "_utilities.less";
// Layout
@import "_structure.less";
// Content presentation
@import "_typography.less";
@import "_components.less";
@import "_homepage.less";
@import "../../common/less/vendor/highlight.less";
@media print {
@import "_print.less";
}

Bestand weergeven

@ -4,7 +4,7 @@ Base tags
a {
text-decoration: none;
color: @light;
color: var(--light);
&.external::after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
@ -27,7 +27,7 @@ hr {
}
code {
color: @dark;
color: var(--dark);
}
/* ===========================================================================================
@ -97,32 +97,32 @@ Components
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
&:last-child:not(:first-child) {
.border-left-radius(0);
@include border-left-radius(0);
}
}
}
.Brand {
display: block;
background-color: @dark;
background-color: var(--dark);
padding: 15px 20px;
font-size: 18px;
text-shadow: none;
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 700;
color: @light;
color: var(--light);
}
.Navbar {
height: 50px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
background-color: @dark;
background-color: var(--dark);
margin-bottom: 0;
.Brand {
@ -162,8 +162,8 @@ Components
top: 50%;
width: 0.5em;
height: 0.5em;
border-right: 0.15em solid @dark;
border-top: 0.15em solid @dark;
border-right: 0.15em solid var(--dark);
border-top: 0.15em solid var(--dark);
transform: rotate(45deg);
transition-duration: 0.3s;
}
@ -176,17 +176,17 @@ Components
display: block;
margin: 0;
padding: 6px 15px 6px 20px;
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 400;
color: @dark;
color: var(--dark);
font-size: 15px;
text-shadow: none;
border-color: @lines;
border-color: var(--lines);
&:hover {
color: @dark;
color: var(--dark);
text-shadow: none;
background-color: @sidebar-hover;
background-color: var(--sidebar-hover);
}
}
}
@ -200,8 +200,8 @@ Components
margin: 0;
margin-left: -15px;
padding: 3px 30px;
font-family: @font-family-text;
color: @text;
font-family: var(--font-family-text);
color: var(--text);
opacity: 0.7;
&:hover {
@ -210,7 +210,7 @@ Components
}
&--active a {
color: @dark;
color: var(--dark);
}
}
}
@ -219,7 +219,7 @@ Components
&--open,
&--active {
> a {
background-color: @sidebar-hover;
background-color: var(--sidebar-hover);
}
}
@ -241,7 +241,7 @@ Components
padding: 0;
border-bottom: 1px solid #eee;
.clearfix();
@include clearfix();
h1 {
margin: 0;
@ -274,9 +274,9 @@ Components
padding: 0 20px;
a {
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 400;
color: @light;
color:var(--light);
line-height: 2em;
}
}
@ -296,7 +296,7 @@ Components
transition: border-color ease-in-out 0.15s;
&:focus {
border-color: @light;
border-color: var(--light);
outline: 0;
}
}
@ -395,7 +395,7 @@ ul.TableOfContents {
text-align: center;
clear: both;
.clearfix();
@include clearfix();
li {
display: inline;
@ -460,7 +460,7 @@ ul.TableOfContents {
/* Checked state */
.Checkbox input:checked ~ & {
background: @dark;
background: var(--dark);
/* Show check mark */
&::after {
@ -470,7 +470,7 @@ ul.TableOfContents {
/* Hover state whilst checked */
.Checkbox:hover input:not([disabled]):checked ~ &, .Checkbox input:checked:focus ~ & {
background: @light;
background: var(--light);
}
/* Disabled state */

Bestand weergeven

@ -38,15 +38,15 @@ Homepage
.Homepage {
padding-top: 60px !important;
background-color: @light;
background-color: var(--light);
border-radius: 0;
border: none;
color: @dark;
color: var(--dark);
overflow: hidden;
padding-bottom: 0;
margin-bottom: 0;
.kill-box-shadow;
@include kill-box-shadow;
}
.HomepageTitle {
@ -69,7 +69,7 @@ Homepage
.HomepageButtons {
padding: 20px 0;
background-color: @sidebar-hover;
background-color: var(--sidebar-hover);
text-align: center;
.Button--hero {
@ -79,12 +79,12 @@ Homepage
opacity: 0.8;
margin: 0 10px;
text-transform: uppercase;
border: 5px solid @dark;
font-family: @font-family-heading;
border: 5px solid var(--dark);
font-family: var(--font-family-heading);
font-weight: 700;
.kill-background-image;
.kill-box-shadow;
@include kill-background-image;
@include kill-box-shadow;
@media (max-width: 768px) {
display: block;
@ -96,13 +96,13 @@ Homepage
}
&.Button--secondary {
background-color: @sidebar-hover;
color: @dark;
background-color: var(--sidebar-hover);
color: var(--dark);
}
&.Button--primary {
background-color: @dark;
color: @sidebar-background;
background-color: var(--dark);
color: var(--sidebar-background);
}
}
}
@ -136,7 +136,7 @@ Homepage
width: 0;
height: 0;
border: 3px solid transparent;
border-left: 3px solid @light;
border-left: 3px solid var(--light);
float: left;
display: block;
margin: 6px 6px 6px -12px;
@ -145,7 +145,7 @@ Homepage
}
.lead {
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 300;
font-size: 16px;
margin-bottom: 20px;
@ -162,12 +162,12 @@ Homepage
}
.HomepageFooter {
background-color: @dark;
background-color: var(--dark);
border-radius: 0;
color: @light;
color: var(--light);
border: none;
.kill-box-shadow;
@include kill-box-shadow;
@media (max-width: 768px) {
padding: 0 20px;
@ -196,11 +196,11 @@ Homepage
a {
line-height: 32px;
font-size: 16px;
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 700;
&:hover {
color: @light;
color: var(--light);
text-decoration: underline;
}
}

Bestand weergeven

@ -2,39 +2,42 @@
Mixins
============================================================================================== */
.kill-background-image() {
@mixin kill-background-image {
background-image: none;
filter: none;
}
.kill-box-shadow() {
@mixin kill-box-shadow {
box-shadow: none;
}
.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
font-weight: @weight;
font-size: @size;
font-family: @font-family-text;
line-height: @lineheight;
@mixin sans-serif($weight: normal, $size: 14px, $lineheight: 20px) {
font-weight: $weight;
font-size: $size;
font-family: $font-family-text;
line-height: $lineheight;
}
// Single side border-radius
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
// Clearfix
@ -49,7 +52,7 @@ Mixins
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
@mixin clearfix {
&::before,
&::after {
content: " "; // 1

Bestand weergeven

@ -1,4 +1,4 @@
@import "../../common/less/_print.less";
@import "../../common/scss/_print.scss";
.Pager { display: none; }

Bestand weergeven

@ -15,12 +15,12 @@ Docs Body & Page Structure
html, body {
height: 100%;
background-color: #fff;
color: @text;
color: var(--text);
}
.Columns {
&__left {
background-color: @sidebar-background;
background-color: var(--sidebar-background);
}
&__right {
@ -44,8 +44,8 @@ html, body {
border: none;
float: right;
.kill-background-image;
.kill-box-shadow;
@include kill-background-image;
@include kill-box-shadow;
&--bar {
display: block;
@ -53,17 +53,17 @@ html, body {
height: 2px;
margin-top: 2px;
margin-bottom: 3px;
background-color: @light;
.kill-box-shadow;
background-color: var(--light);
@include kill-box-shadow;
}
&:hover {
background-color: @sidebar-hover;
.kill-box-shadow;
background-color: var(--sidebar-hover);
@include kill-box-shadow;
.Collapsible__trigger--bar {
background-color: @dark;
.kill-box-shadow;
background-color: var(--dark);
@include kill-box-shadow;
}
}
}
@ -72,7 +72,7 @@ html, body {
@media screen and (min-width: 768px) {
body {
//Needed only for floating code blocks
background-color: @light;
background-color: var(--light);
}
.Navbar {
@ -114,7 +114,7 @@ html, body {
&__left {
width: 25%;
border-right: 1px solid @lines;
border-right: 1px solid var(--lines);
overflow-x: hidden;
}

Bestand weergeven

@ -3,7 +3,7 @@ Base CSS
============================================================================================== */
body {
font-family: @font-family-text;
font-family: var(--font-family-text);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -12,12 +12,12 @@ body {
}
h1, h2, h3, h4, h5, h6 {
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 300;
}
.s-content {
@import "../../common/less/_typography.less";
@import "../../common/scss/_typography.scss";
pre {
border: none;

Bestand weergeven

@ -6,7 +6,7 @@
// -------------------------
.clearfix {
.clearfix();
@include clearfix();
}
.pull-right {

Bestand weergeven

@ -0,0 +1,11 @@
@import "theme.scss";
//Daux.io Blue
:root {
--sidebar-background: #f7f7f7;
--sidebar-hover: #c5c5cb;
--lines: #e7e7e9;
--dark: #3f4657;
--light: #82becd;
--text: #2d2d2d;
}

Bestand weergeven

@ -0,0 +1,11 @@
@import "theme.scss";
//Daux.io Green
:root {
--sidebar-background: #f5f5f6;
--sidebar-hover: #a0d55d;
--lines: #e7e7e9;
--dark: #000;
--light: #8acc37;
--text: #2d2d2d;
}

Bestand weergeven

@ -0,0 +1,11 @@
@import "theme.scss";
//Daux.io Navy
:root {
--sidebar-hover: #c5c5cb;
--lines: #e7e7e9;
--sidebar-background: #f5f5f6;
--dark: #13132a;
--light: #7795b4;
--text: #2d2d2d;
}

Bestand weergeven

@ -0,0 +1,11 @@
@import "theme.scss";
// Daux.io Red
:root {
--sidebar-hover: #eee;
--lines: #eee;
--sidebar-background: #f7f7f7;
--dark: #c64641; //#df4f49;
--light: #ecb5a1;
--text: #2d2d2d;
}

Bestand weergeven

@ -0,0 +1,24 @@
/*!
* DAUX.IO
* https://dauxio.github.io/
* MIT License
*/
// Daux Style
@import "../../common/scss/vendor/normalize.scss";
@import "../../common/scss/_fonts.scss";
@import "_mixins.scss";
@import "_utilities.scss";
// Layout
@import "_structure.scss";
// Content presentation
@import "_typography.scss";
@import "_components.scss";
@import "_homepage.scss";
@import "../../common/scss/vendor/highlight.scss";
@media print {
@import "_print.scss";
}

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand weergeven

@ -1,5 +1,5 @@
@import "../../common/less/_print.less";
@import "../../common/scss/_print.scss";
a[href]::after {
content: " (" attr(href) ")";

Bestand weergeven

@ -1,6 +1,6 @@
h1, h2, h3, h4, h5, h6 {
font-family: @font-family-heading;
font-family: var(--font-family-heading);
font-weight: 300;
}
@ -8,5 +8,5 @@ section.content {
padding: 15px 25px 25px;
background-color: white;
@import "../../common/less/_typography.less";
@import "../../common/scss/_typography.scss";
}

Bestand weergeven

@ -1,7 +1,7 @@
// Core variables and mixins
@import "../../common/less/_fonts.less";
@import "vendor/highlight.less";
@import "_typography.less";
@import "../../common/scss/_fonts.scss";
@import "vendor/highlight.scss";
@import "_typography.scss";
* {
-webkit-overflow-scrolling: touch;
@ -17,7 +17,7 @@ body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: @font-family-text;
font-family: var(--font-family-text);
}
a {
@ -54,5 +54,5 @@ img {
}
@media print {
@import "_print.less";
@import "_print.scss";
}

5112
yarn.lock

Diff onderdrukt omdat het te groot bestand Laad Diff