Use crafty to build css, convert less to scss

Cette révision appartient à :
Stéphane Goetz 2018-02-25 20:12:18 +01:00
Parent d0b2850434
révision 3346dec1d6
41 fichiers modifiés avec 4135 ajouts et 1481 suppressions

30
crafty.config.js Fichier normal
Voir le fichier

@ -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"
}
}
};

Voir le fichier

@ -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']);

Voir le fichier

@ -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"
}
}

Voir le fichier

@ -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";

Voir le fichier

@ -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 */

Voir le fichier

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

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Voir le fichier

@ -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";

Voir le fichier

@ -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";

Voir le fichier

@ -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";

Voir le fichier

@ -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";

Voir le fichier

@ -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";
}

Voir le fichier

@ -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 */

Voir le fichier

@ -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;
}
}

Voir le fichier

@ -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

Voir le fichier

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

Voir le fichier

@ -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;
}

Voir le fichier

@ -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;

Voir le fichier

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

Voir le fichier

@ -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;
}

Voir le fichier

@ -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;
}

Voir le fichier

@ -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;
}

Voir le fichier

@ -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;
}

24
themes/daux/scss/theme.scss Fichier normal
Voir le fichier

@ -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";
}

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Voir le fichier

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

Voir le fichier

@ -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";
}

Voir le fichier

@ -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

Fichier diff supprimé car celui-ci est trop grand Voir la Diff