dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #230 from PhilippeVay/sass-lint

Browse source 
sass-lintage (indentation, imbrication, clarté, etc)
This commit is contained in:
Raphael Goetter 2016-12-09 09:27:23 +01:00 committed by GitHub
commit 6d054dfe13
16 changed files with 211 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
.sass-lint.yml Normal file
View file

@ -0,0 +1,91 @@
options:
formatter: stylish
files:
include: '**/*.s+(a|c)ss'
rules:
# Extends
extends-before-mixins: 1
extends-before-declarations: 1
placeholder-in-extend: 1
# Mixins
mixins-before-declarations: 1
# Line Spacing
one-declaration-per-line: 1
empty-line-between-blocks: 1
single-line-per-selector: 1
# Disallows
no-attribute-selectors: 0
no-color-hex: 0
no-color-keywords: 0 # Modified, was 1
no-color-literals: 0 # Modified, was 1
no-combinators: 0
no-css-comments: 0 # Modified, was 1
no-debug: 1
no-disallowed-properties: 0
no-duplicate-properties: 1
no-empty-rulesets: 1
no-extends: 0
no-ids: 1
no-important: 0 # Modified, was 1
no-invalid-hex: 1
no-mergeable-selectors: 1
no-misspelled-properties: 1
no-qualifying-elements: 1
no-trailing-whitespace: 1
no-trailing-zero: 1
no-transition-all: 1
no-universal-selectors: 0
no-url-protocols: 1
no-vendor-prefixes: 1
no-warn: 1
property-units: 0
# Nesting
force-attribute-nesting: 1
force-element-nesting: 1
force-pseudo-nesting: 1
# Name Formats
class-name-format: 1
function-name-format: 1
id-name-format: 0
mixin-name-format: 1
placeholder-name-format: 1
variable-name-format: 1
# Style Guide
attribute-quotes: 1
bem-depth: 0
border-zero: 0 # Modified, was 1
brace-style: 1
clean-import-paths: 0 # 1 forbids leading underscores and extensions (.scss)
empty-args: 1
hex-length: 1
hex-notation: 1
indentation: 1
leading-zero: 0 # Modified, was 1
nesting-depth: 1
property-sort-order: 0 # Modified, was 1 @TODO Est-ce possible de customiser pour respecter la convention Alsa ?
pseudo-element: 1
quotes: 0 # 1 warns that strings should use single quotes
shorthand-values: 1
url-quotes: 1
variable-for-property: 1
zero-unit: 1
# Inner Spacing
space-after-comma: 1
space-before-colon: 1
space-after-colon: 1
space-before-brace: 1
space-before-bang: 1
space-after-bang: 1
space-between-parens: 1
space-around-operator: 1
# Final Items
trailing-semicolon: 1
final-newline: 1

12
css/grillade.scss
View file

@ -33,7 +33,7 @@ $iefix: 0.01px;
}
// Multi-line grid constructor
// example : .grid-perso { @include grid(12, 3rem); }
@mixin grid($grid-number:1, $own-gutter:0) {
@mixin grid($grid-number: 1, $own-gutter: 0) {
& > * {
width: calc(100% / #{$grid-number} - #{$iefix});
}
@ -81,12 +81,13 @@ $iefix: 0.01px;
}
// Constructing grids : will be compiled in CSS
@media (min-width: ($tiny + 1)) {
@for $i from 2 through 12{
@for $i from 2 through 12 {
[class*="grid-#{$i}"] {
@include grid(#{$i},0);
@include grid(#{$i}, 0);
}
}
}
// Grid offsets
.push {
margin-left: auto !important;
@ -95,6 +96,7 @@ $iefix: 0.01px;
.pull {
margin-right: auto !important;
}
// Grid order
.item-first {
order: -1;
@ -109,7 +111,7 @@ $iefix: 0.01px;
}
// sizing individual children
@media (min-width: ($tiny + 1)) {
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5"){
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
.#{$flow} {
flex: 0 0 auto;
width: calc(100% / #{$divider} - #{$iefix});
@ -125,7 +127,7 @@ $iefix: 0.01px;
// -small-X suffix means "X columns on small-medium screen"
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
@media (min-width: ($tiny + 1)) and (max-width: $medium) {
@for $i from 1 through 4{
@for $i from 1 through 4 {
[class*="-small-#{$i}"] {
& > * {
width: calc(100% / #{$i} - #{$iefix});

23
css/knacss-unminified.css
View file

@ -415,7 +415,7 @@ body {
a {
color: #333; }
a:hover, a:focus, a:active {
a:focus, a:hover, a:active {
color: #000; }
ul,
@ -624,7 +624,9 @@ img {
/* ==Stylings (minor stylings) */
/* ----------------------------- */
/* styling elements */
code, kbd, mark {
code,
kbd,
mark {
border-radius: 2px; }
kbd {
@ -675,8 +677,7 @@ blockquote > footer {
margin-top: .75em;
font-size: 0.9em;
color: rgba(0, 0, 0, 0.7); }
blockquote > footer::before {
blockquote > footer::before {
content: "\2014 \0020"; }
q {
@ -685,9 +686,8 @@ q {
q,
.q {
quotes: "“\00a0" "\00a0”"; }
q:lang(fr),
.q:lang(fr) {
q:lang(fr),
.q:lang(fr) {
quotes: "«\00a0" "\00a0»"; }
hr {
@ -837,10 +837,7 @@ select {
/* if select styling bugs on WebKit */
/* select { -webkit-appearance: none; } */
/* 'x' appears on right of search input when text is entered. This removes it */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
display: none; }
::-webkit-input-placeholder {
@ -906,6 +903,7 @@ input[type="reset"].unstyled {
flex-direction: row-reverse; }
.o-media-figure--center {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center; } }
/* Autogrid object */
@ -1074,8 +1072,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
-webkit-filter: grayscale(1);
filter: grayscale(1); }
ul.is-unstyled,
ul.unstyled {
ul.is-unstyled, ul.unstyled {
list-style: none;
padding-left: 0; }

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

12
sass/grids/_grillade.scss
View file

@ -23,7 +23,7 @@ $iefix: 0.01px;
}
// Multi-line grid constructor
// example : .grid-perso { @include grid(12, 3rem); }
@mixin grid($grid-number:1, $own-gutter:0) {
@mixin grid($grid-number: 1, $own-gutter: 0) {
& > * {
width: calc(100% / #{$grid-number} - #{$iefix});
}
@ -71,12 +71,13 @@ $iefix: 0.01px;
}
// Constructing grids : will be compiled in CSS
@media (min-width: ($tiny + 1)) {
@for $i from 2 through 12{
@for $i from 2 through 12 {
[class*="grid-#{$i}"] {
@include grid(#{$i},0);
@include grid(#{$i}, 0);
}
}
}
// Grid offsets
.push {
margin-left: auto !important;
@ -85,6 +86,7 @@ $iefix: 0.01px;
.pull {
margin-right: auto !important;
}
// Grid order
.item-first {
order: -1;
@ -99,7 +101,7 @@ $iefix: 0.01px;
}
// sizing individual children
@media (min-width: ($tiny + 1)) {
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5"){
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
.#{$flow} {
flex: 0 0 auto;
width: calc(100% / #{$divider} - #{$iefix});
@ -115,7 +117,7 @@ $iefix: 0.01px;
// -small-X suffix means "X columns on small-medium screen"
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
@media (min-width: ($tiny + 1)) and (max-width: $medium) {
@for $i from 1 through 4{
@for $i from 1 through 4 {
[class*="-small-#{$i}"] {
& > * {
width: calc(100% / #{$i} - #{$iefix});

5
sass/library/_base.scss
View file

@ -29,7 +29,10 @@ body {
a {
color: $link-color;
&:hover, &:focus, &:active {
&:focus,
&:hover,
&:active {
color: $link-hover-color;
}
}

28
sass/library/_forms.scss
View file

@ -60,11 +60,13 @@ select {
/* select { -webkit-appearance: none; } */
/* 'x' appears on right of search input when text is entered. This removes it */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
input[type="search"] {
&::-webkit-search-decoration,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
display: none;
}
}
::-webkit-input-placeholder {
@ -76,22 +78,25 @@ textarea:-moz-placeholder {
color: #777;
}
.#{$kna-namespace}btn:focus,
input[type="button"]:focus,
button:focus {
.#{$kna-namespace}btn,
input[type="button"],
button {
&:focus {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
/* unstyled forms */
button.#{$kna-namespace}unstyled,
input[type="button"].#{$kna-namespace}unstyled,
input[type="submit"].#{$kna-namespace}unstyled,
input[type="reset"].#{$kna-namespace}unstyled {
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
&.#{$kna-namespace}unstyled {
padding: 0;
border: none;
line-height: 1;
@ -107,4 +112,5 @@ input[type="reset"].#{$kna-namespace}unstyled {
box-shadow: none;
outline: none;
}
}
}

6
sass/library/_print.scss
View file

@ -88,8 +88,10 @@
}
*/
a[href^="javascript:"]::after,
a[href^="#"]::after {
a[href^="javascript:"],
a[href^="#"] {
&::after {
content: "";
}
}
}

17
sass/library/_styling.scss
View file

@ -3,7 +3,9 @@
/* ----------------------------- */
/* styling elements */
code, kbd, mark {
code,
kbd,
mark {
border-radius: 2px;
}
@ -14,7 +16,7 @@ kbd {
code {
padding: 2px 4px;
background: rgba(0,0,0,0.04);
background: rgba(0, 0, 0, 0.04);
color: #b11;
}
@ -26,7 +28,7 @@ pre code {
}
mark {
padding:2px 4px;
padding: 2px 4px;
}
sup,
@ -64,10 +66,10 @@ blockquote > footer {
margin-top: .75em;
font-size: 0.9em;
color: rgba(0, 0, 0, .7);
}
blockquote > footer::before {
&::before {
content: "\2014 \0020";
}
}
q {
@ -77,11 +79,10 @@ q {
q,
.#{$kna-namespace}q {
quotes: "“\00a0" "\00a0”";
}
q:lang(fr),
.#{$kna-namespace}q:lang(fr) {
&:lang(fr) {
quotes: "«\00a0" "\00a0»";
}
}
hr {

2
sass/library/_tables.scss
View file

@ -18,7 +18,7 @@ table,
#recaptcha_table,
.#{$kna-namespace}table-auto {
table-layout:auto;
table-layout: auto;
}
td,

2
sass/objects/_autogrid.scss
View file

@ -4,6 +4,7 @@
[class*=" autogrid"] {
display: flex;
}
[class^="autogrid"] > *,
[class*=" autogrid"] > * {
flex: 1;
@ -16,6 +17,7 @@
.has-gutter > *:not(:first-child) {
margin-left: 1rem;
}
[class*="--reverse"] {
flex-direction: row-reverse;
}

2
sass/objects/_media.scss
View file

@ -4,6 +4,7 @@
display: flex;
align-items: flex-start;
}
.o-media-content {
flex: 1;
min-width: 0; /* avoid min-width:auto */
@ -15,6 +16,7 @@
.o-media--reverse {
flex-direction: row-reverse;
}
.o-media-figure--center {
align-self: center;
}

6
sass/utilities/_helpers.scss
View file

@ -30,10 +30,12 @@
filter: grayscale(1);
}
ul.is-unstyled,
ul.unstyled {
ul {
&.is-unstyled,
&.unstyled {
list-style: none;
padding-left: 0;
}
}
/* Width Helpers */

10
sass/utilities/_layout.scss
View file

@ -83,8 +83,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/
[class*="#{$kna-namespace}flex-container"],
.#{$kna-namespace}flex-container{
display : flex;
.#{$kna-namespace}flex-container {
display: flex;
flex-wrap: wrap;
}
@ -103,17 +103,17 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.#{$kna-namespace}flex-item-first,
.#{$kna-namespace}item-first {
order : -1;
order: -1;
}
.#{$kna-namespace}flex-item-medium,
.#{$kna-namespace}item-medium {
order : 0;
order: 0;
}
.#{$kna-namespace}flex-item-last,
.#{$kna-namespace}item-last {
order : 1;
order: 1;
}
.#{$kna-namespace}flex-item-center,

26
sass/utilities/_wordpress.scss
View file

@ -20,23 +20,19 @@ Description: Reset styles for WordPress usage of KNACSS
.comment-navigation,
.paging-navigation,
.post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
margin: 0 0 1.5em;
.comment-navigation .nav-previous,
.paging-navigation .nav-previous,
.post-navigation .nav-previous {
& .nav-previous {
float: left;
width: 50%;
}
}
.comment-navigation .nav-next,
.paging-navigation .nav-next,
.post-navigation .nav-next {
& .nav-next {
float: right;
text-align: right;
width: 50%;
text-align: right;
}
}
// class in img elements
@ -64,7 +60,8 @@ Description: Reset styles for WordPress usage of KNACSS
.comment-content {
clear: both;
&::after, &::before {
&::after,
&::before {
content: "";
display: table;
}
@ -115,7 +112,7 @@ Description: Reset styles for WordPress usage of KNACSS
}
}
// class for categorie
// class for category
.category- {
&name-of-category {
}
@ -128,6 +125,7 @@ Description: Reset styles for WordPress usage of KNACSS
// if display posts
&.blog {
}
// if static page
&.page {
}
@ -138,6 +136,7 @@ Description: Reset styles for WordPress usage of KNACSS
// if is frontpage
&.home {
}
// if static page
&.page {
}
@ -160,6 +159,7 @@ Description: Reset styles for WordPress usage of KNACSS
// if has results
.search-results {
}
// if has no results
.search-no-results {
}
@ -237,7 +237,7 @@ img.wp-smiley {
@for $i from 2 through 9 {
.gallery-columns-#{$i} & {
$w: floor(10000/$i)/100;
$w: floor(10000 / $i) / 100;
max-width: unquote($w + '%');
}
}