Update npm packages, remove grunt, lint css, add print styles

This commit is contained in:
Stéphane Goetz 2016-08-06 00:14:15 +02:00
parent 57f3111a97
commit 80d4646b2d
22 changed files with 127 additions and 158 deletions

View File

@ -1,20 +0,0 @@
module.exports = function (grunt) {
'use strict';
grunt.loadNpmTasks('grunt-php');
grunt.initConfig({
php: {
dist: {
options: {
keepalive: true,
open: true,
port: 8085,
router: "index.php"
}
}
}
});
grunt.registerTask('default', ['php']);
};

View File

@ -1,11 +1,11 @@
var gulp = require('gulp'),
php = require('gulp-connect-php'),
var cssnano = require('cssnano'),
gulp = require('gulp'),
less = require('gulp-less'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
postcss = require('gulp-postcss'),
sourcemaps = require('gulp-sourcemaps');
sourcemaps = require('gulp-sourcemaps'),
stylelint = require('gulp-stylelint');
var resources = {
daux_blue:{source: "themes/daux/less/theme-blue.less", dest: "themes/daux/css/"},
@ -16,35 +16,7 @@ var resources = {
daux_singlepage:{source: "themes/daux_singlepage/less/main.less", dest: "themes/daux_singlepage/css/"}
};
function createTask(source, dest) {
return function() {
var nano_options = {
safe: true, // Disable dangerous optimisations
filterPlugins: false, // This does very weird stuff
autoprefixer: {
add: true, // Add needed prefixes
remove: true // Remove unnecessary prefixes
}
};
return gulp.src(source)
//.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(less())
.pipe(postcss([
require('cssnano')(nano_options)
]))
.pipe(rename({suffix: '.min'}))
//.pipe(sourcemaps.write())
.pipe(gulp.dest(dest));
}
}
function createLinter() {
var gulpStylelint = require('gulp-stylelint');
var rules = {
var stylelintRules = {
"indentation": 4,
"selector-list-comma-newline-after": "always-multi-line",
"selector-no-id": true,
@ -55,54 +27,65 @@ function createLinter() {
"property-no-vendor-prefix": true,
"selector-no-vendor-prefix": true,
"value-no-vendor-prefix": true
};
};
return gulp
.src(['themes/**/less/**/*.less', '!themes/**/vendor/**/*.less'])
.pipe(gulpStylelint({
failAfterError: true,
config: {
extends: "stylelint-config-standard",
rules: rules
},
syntax: "less",
reporters: [
{formatter: 'string', console: true}
],
debug: 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(sourcemaps.init())
.pipe(plumber())
.pipe(less())
.pipe(postcss([cssnano(cssnanoOptions)]))
.pipe(rename({suffix: '.min'}))
//.pipe(sourcemaps.write())
.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, createTask(resources[style].source, resources[style].dest));
gulp.task('style_' + style, createCSSTask(resources[style].source, resources[style].dest));
style_tasks.push('style_' + style);
}
}
gulp.task('lint-css', createLinter);
style_tasks.push('lint-css');
gulp.task("styles", style_tasks);
gulp.task('watch', function() {
gulp.task('watch', function () {
// Watch .less files
gulp.watch('themes/**/less/**/*.less', ['styles']);
});
gulp.task('php', function() {
php.server({
keepalive: true,
open: true,
port: 8085,
router: "index.php"
});
});
gulp.task('default', ['php']);
gulp.task('default', ['styles']);

View File

@ -1,19 +1,16 @@
{
"name": "daux.io",
"version": "0.1.1",
"version": "0.3.0",
"private": true,
"devDependencies": {
"cssnano": "^3.5.2",
"grunt": "^0.4.1",
"grunt-php": "^1.0.0",
"cssnano": "^3.7.3",
"gulp": "^3.9.1",
"gulp-connect-php": "^0.0.7",
"gulp-less": "^3.0.3",
"gulp-less": "^3.1.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^6.1.0",
"gulp-postcss": "^6.1.1",
"gulp-rename": "^1.2.2",
"gulp-sourcemaps": "^2.0.0-alpha",
"gulp-stylelint": "^2.0.2",
"stylelint-config-standard": "^6.0.0"
"gulp-sourcemaps": "^1.6.0",
"gulp-stylelint": "^3.0.0",
"stylelint-config-standard": "^12.0.0"
}
}

View File

@ -7,11 +7,11 @@
} ?>
<div class="Navbar hidden-print">
<header class="Navbar hidden-print">
<?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?>
</div>
</header>
<div class="Columns content">
<div class="Columns__left hidden-print Collapsible">
<aside class="Columns__left Collapsible">
<div class="Collapsible__container">
<button type="button" class="Button Collapsible__trigger">
<span class="Collapsible__trigger--bar"></span>
@ -93,12 +93,8 @@
} ?>
</div>
</div>
<!-- For Mobile -->
</div>
</aside>
<div class="Columns__right <?= $params['html']['float'] ? 'Columns__right--float' : ''; ?>">
<div class="Columns__right__content">
<div class="doc_content">
<?= $this->section('content'); ?>

View File

@ -6,34 +6,40 @@
box-shadow: none !important;
}
.page-break {
display: block;
page-break-before: always;
}
h1, h2 {
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
page-break-before: auto;
}
pre, blockquote {
border: 1px solid #999;
font-style: italic;
page-break-inside: avoid;
}
img {
page-break-inside: avoid;
border: 0; /* Some browsers like to show a border around images. Switch it off */
}
a,
a:visited {
text-decoration: underline;
a:visited { text-decoration: underline; }
abbr[title]::after { content: " (" attr(title) ")"; }
q { quotes: none; }
q::before { content: ""; }
q::after { content: " (" attr(cite) ")"; }
.page-break {
display: block;
page-break-before: always;
}
a[href]::after {
content: " (" attr(href) ")";
}
.hidden-print { display: none; }
/* Hide the navigation */
aside { display: none; }
abbr[title]::after {
content: " (" attr(title) ")";
}

View File

@ -6,7 +6,6 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 300;
-webkit-font-smoothing: antialiased;
cursor: text;
line-height: 1.4em;
margin-top: 0.3em;
margin-bottom: 0.3em;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -87,6 +87,7 @@ Components
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
&:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
@ -111,10 +112,8 @@ Components
font-size: 18px;
line-height: 20px;
height: @navbar-height;
color: @light;
text-shadow: none;
font-family: @font-family-heading;
font-weight: 700;
}
@ -225,7 +224,7 @@ Components
}
.Page__header {
margin: 0 0 10px 0;
margin: 0 0 10px;
padding: 0;
border-bottom: 1px solid #eee;
@ -267,14 +266,12 @@ Components
position: relative;
float: right;
margin: 8px 20px;
vertical-align: middle;
&__field {
display: block;
width: 100%;
height: 34px;
padding: 6px 30px 6px 0;
color: #555;
background: #fff;
border: 1px solid #ccc;
@ -293,7 +290,6 @@ Components
position: absolute;
right: 9px;
top: 9px;
width: 16px;
height: 16px;
}
@ -332,7 +328,6 @@ Components
> a {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;

View File

@ -39,13 +39,14 @@ Homepage
.Homepage {
padding-top: 60px !important;
background-color: @light;
.kill-box-shadow;
border-radius: 0;
border: none;
color: @dark;
overflow: hidden;
padding-bottom: 0;
margin-bottom: 0;
.kill-box-shadow;
}
.HomepageTitle {
@ -73,19 +74,18 @@ Homepage
.Button--hero {
padding: 20px 30px;
.kill-background-image;
.kill-box-shadow;
border-radius: 0;
text-shadow: none;
border: none;
opacity: 0.8;
margin: 0 10px;
text-transform: uppercase;
border: 5px solid @dark;
font-family: @font-family-heading;
font-weight: 700;
.kill-background-image;
.kill-box-shadow;
@media (max-width: 768px) {
display: block;
margin-bottom: 10px;
@ -119,7 +119,6 @@ Homepage
.col-third {
width: 33.333333%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
@ -164,11 +163,12 @@ Homepage
.HomepageFooter {
background-color: @dark;
.kill-box-shadow;
border-radius: 0;
color: @light;
border: none;
.kill-box-shadow;
@media (max-width: 768px) {
padding: 0 20px;
text-align: center;
@ -195,7 +195,6 @@ Homepage
li {
a {
line-height: 32px;
font-size: 16px;
font-family: @font-family-heading;
font-weight: 700;

View File

@ -55,6 +55,7 @@ Mixins
content: " "; // 1
display: table; // 2
}
&::after {
clear: both;
}

View File

@ -0,0 +1,20 @@
@import "../../common/less/_print.less";
.Pager { display: none; }
.Columns__right {
width: 100% !important;
}
.s-content a::after {
content: " (" attr(href) ")";
font-size: 80%;
word-wrap: break-word; /* break long urls that donìt fit the page width */
}
/* Anchors don't need that */
.s-content a[href^="#"]::after { content: ""; }
h1 a[href]::after {
font-size: 50%;
}

View File

@ -46,11 +46,12 @@ html, body {
&__trigger {
padding: 7px 10px;
.kill-background-image;
.kill-box-shadow;
background-color: @sidebar-hover;
border: none;
.kill-background-image;
.kill-box-shadow;
&--bar {
display: block;
width: 18px;
@ -62,8 +63,8 @@ html, body {
}
&:hover {
.kill-box-shadow;
background-color: @dark;
.kill-box-shadow;
.icon-bar {
background-color: @light;
@ -74,7 +75,6 @@ html, body {
}
@media screen and (min-width: 768px) {
body {
//Needed only for floating code blocks
background-color: @light;
@ -126,6 +126,7 @@ html, body {
&__right {
width: 75%;
&__content {
padding: 20px;
min-height: 100%;
@ -133,17 +134,3 @@ html, body {
}
}
}
@media print {
.Columns__right {
width: 100% !important;
}
h1 a[href]::after {
font-size: 50%;
}
.hidden-print {
display: none;
}
}

View File

@ -6,7 +6,6 @@ body {
font-family: @font-family-text;
text-rendering: optimizeLegibility;
font-smoothing: antialiased;
font-size: 14px;
line-height: 1.5;
}
@ -123,7 +122,7 @@ h1, h2, h3, h4, h5, h6 {
width: 50%;
border: none;
border-left: 10px solid white;
margin: 0 0 10px 0;
margin: 0 0 10px;
padding: 0;
code {

View File

@ -18,3 +18,7 @@
@import "_components.less";
@import "_homepage.less";
@import "../../common/less/vendor/highlight.less";
@media print {
@import "_print.less";
}

File diff suppressed because one or more lines are too long

View File

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

View File

@ -1,8 +1,7 @@
// Core variables and mixins
@import "variables.less";
@import "../../common/less/_fonts.less";
@import "vendor/highlight.less";
@import "typography.less";
@import "_typography.less";
* {
-webkit-overflow-scrolling: touch;
@ -55,5 +54,5 @@ img {
}
@media print {
@import "print.less";
@import "_print.less";
}

View File

@ -1,2 +0,0 @@