toutati@free.fr
3 years ago
16 changed files with 1210 additions and 0 deletions
@ -1 +1,16 @@
|
||||
* text=auto !eol |
||||
/colonne_options.php -text |
||||
/colonne_pipelines.php -text |
||||
css/components/_row.scss -text |
||||
css/libs/_breakpoints.scss -text |
||||
css/libs/_html-grid.scss -text |
||||
css/libs/_skel.scss -text |
||||
css/spip_colonne.scss -text |
||||
demo/colonne.html -text |
||||
javascript/spip_colonne.js -text |
||||
lang/paquet-colonne_fr.php -text |
||||
/paquet.xml -text |
||||
prive/themes/spip/images/colonne-128.png -text |
||||
prive/themes/spip/images/colonne-32.png -text |
||||
prive/themes/spip/images/colonne-64.png -text |
||||
wheels/colonne.yaml -text |
||||
|
||||
@ -0,0 +1,7 @@
|
||||
<?php |
||||
|
||||
if (!defined('_ECRIRE_INC_VERSION')) { |
||||
return; |
||||
} |
||||
|
||||
$GLOBALS['spip_wheels']['raccourcis'][] = 'colonne.yaml'; |
||||
@ -0,0 +1,24 @@
|
||||
<?php |
||||
|
||||
if (!defined('_ECRIRE_INC_VERSION')){ |
||||
return; |
||||
} |
||||
|
||||
/* |
||||
// paquet.xml |
||||
|
||||
<pipeline nom="scss_insert_head" inclure="colonne_pipelines.php" /> |
||||
<pipeline nom="insert_head" inclure="colonne_pipelines.php" /> |
||||
|
||||
*/ |
||||
/* insertion de scripts scss calculés, mmm?? */ |
||||
function colonne_scss_insert_head($flux) { |
||||
//$flux .='<link rel="stylesheet" href="'.scss_css(find_in_path('css/spip_colonne.css')).'">'; |
||||
return $flux; |
||||
} |
||||
|
||||
/* insertion du js */ |
||||
function colonne_insert_head($flux) { |
||||
//$flux .='<script src="'.find_in_path('javascript/spip_colonne.js').'"></script>'; |
||||
return $flux; |
||||
} |
||||
@ -0,0 +1,31 @@
|
||||
/// |
||||
/// Editorial by HTML5 UP |
||||
/// html5up.net | @ajlkn |
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||
/// |
||||
|
||||
/* Row */ |
||||
|
||||
.row { |
||||
@include html-grid(1.5em); |
||||
|
||||
@include breakpoint('<=xlarge') { |
||||
@include html-grid(1.5em, 'xlarge'); |
||||
} |
||||
|
||||
@include breakpoint('<=large') { |
||||
@include html-grid(1.5em, 'large'); |
||||
} |
||||
|
||||
@include breakpoint('<=medium') { |
||||
@include html-grid(1.5em, 'medium'); |
||||
} |
||||
|
||||
@include breakpoint('<=small') { |
||||
@include html-grid(1.5em, 'small'); |
||||
} |
||||
|
||||
@include breakpoint('<=xsmall') { |
||||
@include html-grid(1.5em, 'xsmall'); |
||||
} |
||||
} |
||||
@ -0,0 +1,223 @@
|
||||
// breakpoints.scss v1.0 | @ajlkn | MIT licensed */ |
||||
|
||||
// Vars. |
||||
|
||||
/// Breakpoints. |
||||
/// @var {list} |
||||
$breakpoints: () !global; |
||||
|
||||
// Mixins. |
||||
|
||||
/// Sets breakpoints. |
||||
/// @param {map} $x Breakpoints. |
||||
@mixin breakpoints($x: ()) { |
||||
$breakpoints: $x !global; |
||||
} |
||||
|
||||
/// Wraps @content in a @media block targeting a specific orientation. |
||||
/// @param {string} $orientation Orientation. |
||||
@mixin orientation($orientation) { |
||||
@media screen and (orientation: #{$orientation}) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
/// Wraps @content in a @media block using a given query. |
||||
/// @param {string} $query Query. |
||||
@mixin breakpoint($query: null) { |
||||
|
||||
$breakpoint: null; |
||||
$op: null; |
||||
$media: null; |
||||
|
||||
// Determine operator, breakpoint. |
||||
|
||||
// Greater than or equal. |
||||
@if (str-slice($query, 0, 2) == '>=') { |
||||
|
||||
$op: 'gte'; |
||||
$breakpoint: str-slice($query, 3); |
||||
|
||||
} |
||||
|
||||
// Less than or equal. |
||||
@elseif (str-slice($query, 0, 2) == '<=') { |
||||
|
||||
$op: 'lte'; |
||||
$breakpoint: str-slice($query, 3); |
||||
|
||||
} |
||||
|
||||
// Greater than. |
||||
@elseif (str-slice($query, 0, 1) == '>') { |
||||
|
||||
$op: 'gt'; |
||||
$breakpoint: str-slice($query, 2); |
||||
|
||||
} |
||||
|
||||
// Less than. |
||||
@elseif (str-slice($query, 0, 1) == '<') { |
||||
|
||||
$op: 'lt'; |
||||
$breakpoint: str-slice($query, 2); |
||||
|
||||
} |
||||
|
||||
// Not. |
||||
@elseif (str-slice($query, 0, 1) == '!') { |
||||
|
||||
$op: 'not'; |
||||
$breakpoint: str-slice($query, 2); |
||||
|
||||
} |
||||
|
||||
// Equal. |
||||
@else { |
||||
|
||||
$op: 'eq'; |
||||
$breakpoint: $query; |
||||
|
||||
} |
||||
|
||||
// Build media. |
||||
@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) { |
||||
|
||||
$a: map-get($breakpoints, $breakpoint); |
||||
|
||||
// Range. |
||||
@if (type-of($a) == 'list') { |
||||
|
||||
$x: nth($a, 1); |
||||
$y: nth($a, 2); |
||||
|
||||
// Max only. |
||||
@if ($x == null) { |
||||
|
||||
// Greater than or equal (>= 0 / anything) |
||||
@if ($op == 'gte') { |
||||
$media: 'screen'; |
||||
} |
||||
|
||||
// Less than or equal (<= y) |
||||
@elseif ($op == 'lte') { |
||||
$media: 'screen and (max-width: ' + $y + ')'; |
||||
} |
||||
|
||||
// Greater than (> y) |
||||
@elseif ($op == 'gt') { |
||||
$media: 'screen and (min-width: ' + ($y + 1) + ')'; |
||||
} |
||||
|
||||
// Less than (< 0 / invalid) |
||||
@elseif ($op == 'lt') { |
||||
$media: 'screen and (max-width: -1px)'; |
||||
} |
||||
|
||||
// Not (> y) |
||||
@elseif ($op == 'not') { |
||||
$media: 'screen and (min-width: ' + ($y + 1) + ')'; |
||||
} |
||||
|
||||
// Equal (<= y) |
||||
@else { |
||||
$media: 'screen and (max-width: ' + $y + ')'; |
||||
} |
||||
|
||||
} |
||||
|
||||
// Min only. |
||||
@else if ($y == null) { |
||||
|
||||
// Greater than or equal (>= x) |
||||
@if ($op == 'gte') { |
||||
$media: 'screen and (min-width: ' + $x + ')'; |
||||
} |
||||
|
||||
// Less than or equal (<= inf / anything) |
||||
@elseif ($op == 'lte') { |
||||
$media: 'screen'; |
||||
} |
||||
|
||||
// Greater than (> inf / invalid) |
||||
@elseif ($op == 'gt') { |
||||
$media: 'screen and (max-width: -1px)'; |
||||
} |
||||
|
||||
// Less than (< x) |
||||
@elseif ($op == 'lt') { |
||||
$media: 'screen and (max-width: ' + ($x - 1) + ')'; |
||||
} |
||||
|
||||
// Not (< x) |
||||
@elseif ($op == 'not') { |
||||
$media: 'screen and (max-width: ' + ($x - 1) + ')'; |
||||
} |
||||
|
||||
// Equal (>= x) |
||||
@else { |
||||
$media: 'screen and (min-width: ' + $x + ')'; |
||||
} |
||||
|
||||
} |
||||
|
||||
// Min and max. |
||||
@else { |
||||
|
||||
// Greater than or equal (>= x) |
||||
@if ($op == 'gte') { |
||||
$media: 'screen and (min-width: ' + $x + ')'; |
||||
} |
||||
|
||||
// Less than or equal (<= y) |
||||
@elseif ($op == 'lte') { |
||||
$media: 'screen and (max-width: ' + $y + ')'; |
||||
} |
||||
|
||||
// Greater than (> y) |
||||
@elseif ($op == 'gt') { |
||||
$media: 'screen and (min-width: ' + ($y + 1) + ')'; |
||||
} |
||||
|
||||
// Less than (< x) |
||||
@elseif ($op == 'lt') { |
||||
$media: 'screen and (max-width: ' + ($x - 1) + ')'; |
||||
} |
||||
|
||||
// Not (< x and > y) |
||||
@elseif ($op == 'not') { |
||||
$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')'; |
||||
} |
||||
|
||||
// Equal (>= x and <= y) |
||||
@else { |
||||
$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')'; |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// String. |
||||
@else { |
||||
|
||||
// Missing a media type? Prefix with "screen". |
||||
@if (str-slice($a, 0, 1) == '(') { |
||||
$media: 'screen and ' + $a; |
||||
} |
||||
|
||||
// Otherwise, use as-is. |
||||
@else { |
||||
$media: $a; |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// Output. |
||||
@media #{$media} { |
||||
@content; |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,149 @@
|
||||
// html-grid.scss v1.0 | @ajlkn | MIT licensed */ |
||||
|
||||
// Mixins. |
||||
|
||||
/// Initializes the current element as an HTML grid. |
||||
/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). |
||||
/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). |
||||
@mixin html-grid($gutters: 1.5em, $suffix: '') { |
||||
|
||||
// Initialize. |
||||
$cols: 12; |
||||
$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00; |
||||
$unit: 100% / $cols; |
||||
|
||||
// Suffixes. |
||||
$suffixes: null; |
||||
|
||||
@if (type-of($suffix) == 'list') { |
||||
$suffixes: $suffix; |
||||
} |
||||
@else { |
||||
$suffixes: ($suffix); |
||||
} |
||||
|
||||
// Gutters. |
||||
$guttersCols: null; |
||||
$guttersRows: null; |
||||
|
||||
@if (type-of($gutters) == 'list') { |
||||
|
||||
$guttersCols: nth($gutters, 1); |
||||
$guttersRows: nth($gutters, 2); |
||||
|
||||
} |
||||
@else { |
||||
|
||||
$guttersCols: $gutters; |
||||
$guttersRows: 0; |
||||
|
||||
} |
||||
|
||||
// Row. |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
box-sizing: border-box; |
||||
align-items: stretch; |
||||
|
||||
// Columns. |
||||
> * { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
// Gutters. |
||||
&.gtr-uniform { |
||||
> * { |
||||
> :last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Alignment. |
||||
&.aln-left { |
||||
justify-content: flex-start; |
||||
} |
||||
|
||||
&.aln-center { |
||||
justify-content: center; |
||||
} |
||||
|
||||
&.aln-right { |
||||
justify-content: flex-end; |
||||
} |
||||
|
||||
&.aln-top { |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
&.aln-middle { |
||||
align-items: center; |
||||
} |
||||
|
||||
&.aln-bottom { |
||||
align-items: flex-end; |
||||
} |
||||
|
||||
// Step through suffixes. |
||||
@each $suffix in $suffixes { |
||||
|
||||
// Suffix. |
||||
@if ($suffix != '') { |
||||
$suffix: '-' + $suffix; |
||||
} |
||||
@else { |
||||
$suffix: ''; |
||||
} |
||||
|
||||
// Row. |
||||
|
||||
// Important. |
||||
> .imp#{$suffix} { |
||||
order: -1; |
||||
} |
||||
|
||||
// Columns, offsets. |
||||
@for $i from 1 through $cols { |
||||
> .col-#{$i}#{$suffix} { |
||||
width: $unit * $i; |
||||
} |
||||
|
||||
> .off-#{$i}#{$suffix} { |
||||
margin-left: $unit * $i; |
||||
} |
||||
} |
||||
|
||||
// Step through multipliers. |
||||
@each $multiplier in $multipliers { |
||||
|
||||
// Gutters. |
||||
$class: null; |
||||
|
||||
@if ($multiplier != 1) { |
||||
$class: '.gtr-' + ($multiplier * 100); |
||||
} |
||||
|
||||
&#{$class} { |
||||
margin-top: ($guttersRows * $multiplier * -1); |
||||
margin-left: ($guttersCols * $multiplier * -1); |
||||
|
||||
> * { |
||||
padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier); |
||||
} |
||||
|
||||
// Uniform. |
||||
&.gtr-uniform { |
||||
margin-top: $guttersCols * $multiplier * -1; |
||||
|
||||
> * { |
||||
padding-top: $guttersCols * $multiplier; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,587 @@
|
||||
// skel.scss v3.0.2-dev | (c) skel.io | MIT licensed */ |
||||
|
||||
// Vars. |
||||
|
||||
/// Breakpoints. |
||||
/// @var {list} |
||||
$breakpoints: () !global; |
||||
|
||||
/// Vendor prefixes. |
||||
/// @var {list} |
||||
$vendor-prefixes: ( |
||||
'-moz-', |
||||
'-webkit-', |
||||
'-ms-', |
||||
'' |
||||
); |
||||
|
||||
/// Properties that should be vendorized. |
||||
/// @var {list} |
||||
$vendor-properties: ( |
||||
'align-content', |
||||
'align-items', |
||||
'align-self', |
||||
'animation', |
||||
'animation-delay', |
||||
'animation-direction', |
||||
'animation-duration', |
||||
'animation-fill-mode', |
||||
'animation-iteration-count', |
||||
'animation-name', |
||||
'animation-play-state', |
||||
'animation-timing-function', |
||||
'appearance', |
||||
'backface-visibility', |
||||
'box-sizing', |
||||
'filter', |
||||
'flex', |
||||
'flex-basis', |
||||
'flex-direction', |
||||
'flex-flow', |
||||
'flex-grow', |
||||
'flex-shrink', |
||||
'flex-wrap', |
||||
'justify-content', |
||||
'object-fit', |
||||
'object-position', |
||||
'order', |
||||
'perspective', |
||||
'pointer-events', |
||||
'transform', |
||||
'transform-origin', |
||||
'transform-style', |
||||
'transition', |
||||
'transition-delay', |
||||
'transition-duration', |
||||
'transition-property', |
||||
'transition-timing-function', |
||||
'user-select' |
||||
); |
||||
|
||||
/// Values that should be vendorized. |
||||
/// @var {list} |
||||
$vendor-values: ( |
||||
'filter', |
||||
'flex', |
||||
'linear-gradient', |
||||
'radial-gradient', |
||||
'transform' |
||||
); |
||||
|
||||
// Functions. |
||||
|
||||
/// Removes a specific item from a list. |
||||
/// @author Hugo Giraudel |
||||
/// @param {list} $list List. |
||||
/// @param {integer} $index Index. |
||||
/// @return {list} Updated list. |
||||
@function remove-nth($list, $index) { |
||||
|
||||
$result: null; |
||||
|
||||
@if type-of($index) != number { |
||||
@warn "$index: #{quote($index)} is not a number for `remove-nth`."; |
||||
} |
||||
@else if $index == 0 { |
||||
@warn "List index 0 must be a non-zero integer for `remove-nth`."; |
||||
} |
||||
@else if abs($index) > length($list) { |
||||
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; |
||||
} |
||||
@else { |
||||
|
||||
$result: (); |
||||
$index: if($index < 0, length($list) + $index + 1, $index); |
||||
|
||||
@for $i from 1 through length($list) { |
||||
|
||||
@if $i != $index { |
||||
$result: append($result, nth($list, $i)); |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
@return $result; |
||||
|
||||
} |
||||
|
||||
/// Replaces a substring within another string. |
||||
/// @author Hugo Giraudel |
||||
/// @param {string} $string String. |
||||
/// @param {string} $search Substring. |
||||
/// @param {string} $replace Replacement. |
||||
/// @return {string} Updated string. |
||||
@function str-replace($string, $search, $replace: '') { |
||||
|
||||
$index: str-index($string, $search); |
||||
|
||||
@if $index { |
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); |
||||
} |
||||
|
||||
@return $string; |
||||
|
||||
} |
||||
|
||||
/// Replaces a substring within each string in a list. |
||||
/// @param {list} $strings List of strings. |
||||
/// @param {string} $search Substring. |
||||
/// @param {string} $replace Replacement. |
||||
/// @return {list} Updated list of strings. |
||||
@function str-replace-all($strings, $search, $replace: '') { |
||||
|
||||
@each $string in $strings { |
||||
$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); |
||||
} |
||||
|
||||
@return $strings; |
||||
|
||||
} |
||||
|
||||
/// Gets a value from a map. |
||||
/// @author Hugo Giraudel |
||||
/// @param {map} $map Map. |
||||
/// @param {string} $keys Key(s). |
||||
/// @return {string} Value. |
||||
@function val($map, $keys...) { |
||||
|
||||
@if nth($keys, 1) == null { |
||||
$keys: remove-nth($keys, 1); |
||||
} |
||||
|
||||
@each $key in $keys { |
||||
$map: map-get($map, $key); |
||||
} |
||||
|
||||
@return $map; |
||||
|
||||
} |
||||
|
||||
// Mixins. |
||||
|
||||
/// Sets the global box model. |
||||
/// @param {string} $model Model (default is content). |
||||
@mixin boxModel($model: 'content') { |
||||
|
||||
$x: $model + '-box'; |
||||
|
||||
*, *:before, *:after { |
||||
-moz-box-sizing: #{$x}; |
||||
-webkit-box-sizing: #{$x}; |
||||
box-sizing: #{$x}; |
||||
} |
||||
|
||||
} |
||||
|
||||
/// Wraps @content in a @media block using a given breakpoint. |
||||
/// @param {string} $breakpoint Breakpoint. |
||||
/// @param {map} $queries Additional queries. |
||||
@mixin breakpoint($breakpoint: null, $queries: null) { |
||||
|
||||
$query: 'screen'; |
||||
|
||||
// Breakpoint. |
||||
@if $breakpoint and map-has-key($breakpoints, $breakpoint) { |
||||
$query: $query + ' and ' + map-get($breakpoints, $breakpoint); |
||||
} |
||||
|
||||
// Queries. |
||||
@if $queries { |
||||
@each $k, $v in $queries { |
||||
$query: $query + ' and (' + $k + ':' + $v + ')'; |
||||
} |
||||
} |
||||
|
||||
@media #{$query} { |
||||
@content; |
||||
} |
||||
|
||||
} |
||||
|
||||
/// Wraps @content in a @media block targeting a specific orientation. |
||||
/// @param {string} $orientation Orientation. |
||||
@mixin orientation($orientation) { |
||||
// @media screen and (orientation: #{$orientation}) { |
||||
// @content; |
||||
// } |
||||
} |
||||
|
||||
/// Utility mixin for containers. |
||||
/// @param {mixed} $width Width. |
||||
@mixin containers($width) { |
||||
|
||||
// Locked? |
||||
$lock: false; |
||||
|
||||
@if length($width) == 2 { |
||||
$width: nth($width, 1); |
||||
$lock: true; |
||||
} |
||||
|
||||
// Modifiers. |
||||
.container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; } |
||||
.container.\37 5\25 { width: $width * 0.75; } |
||||
.container.\35 0\25 { width: $width * 0.5; } |
||||
.container.\32 5\25 { width: $width * 0.25; } |
||||
|
||||
// Main class. |
||||
.container { |
||||
@if $lock { |
||||
width: $width !important; |
||||
} |
||||
@else { |
||||
width: $width; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
/// Utility mixin for grid. |
||||
/// @param {list} $gutters Column and row gutters (default is 40px). |
||||
/// @param {string} $breakpointName Optional breakpoint name. |
||||
@mixin grid($gutters: 40px, $breakpointName: null) { |
||||
|
||||
// Gutters. |
||||
@include grid-gutters($gutters); |
||||
@include grid-gutters($gutters, \32 00\25, 2); |
||||
@include grid-gutters($gutters, \31 50\25, 1.5); |
||||
@include grid-gutters($gutters, \35 0\25, 0.5); |
||||
@include grid-gutters($gutters, \32 5\25, 0.25); |
||||
|
||||
// Cells. |
||||
$x: ''; |
||||
|
||||
@if $breakpointName { |
||||
$x: '\\28' + $breakpointName + '\\29'; |
||||
} |
||||
|
||||
.\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; } |
||||
.\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; } |
||||
.\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; } |
||||
.\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; } |
||||
.\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; } |
||||
.\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; } |
||||
.\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; } |
||||
.\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; } |
||||
.\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; } |
||||
.\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; } |
||||
.\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; } |
||||
.\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; } |
||||
|
||||
.\31 2u\24#{$x} + *, |
||||
.\31 1u\24#{$x} + *, |
||||
.\31 0u\24#{$x} + *, |
||||
.\39 u\24#{$x} + *, |
||||
.\38 u\24#{$x} + *, |
||||
.\37 u\24#{$x} + *, |
||||
.\36 u\24#{$x} + *, |
||||
.\35 u\24#{$x} + *, |
||||
.\34 u\24#{$x} + *, |
||||
.\33 u\24#{$x} + *, |
||||
.\32 u\24#{$x} + *, |
||||
.\31 u\24#{$x} + * { |
||||
clear: left; |
||||
} |
||||
|
||||
.\-11u#{$x} { margin-left: 91.6666666667% } |
||||
.\-10u#{$x} { margin-left: 83.3333333333% } |
||||
.\-9u#{$x} { margin-left: 75% } |
||||
.\-8u#{$x} { margin-left: 66.6666666667% } |
||||
.\-7u#{$x} { margin-left: 58.3333333333% } |
||||
.\-6u#{$x} { margin-left: 50% } |
||||
.\-5u#{$x} { margin-left: 41.6666666667% } |
||||
.\-4u#{$x} { margin-left: 33.3333333333% } |
||||
.\-3u#{$x} { margin-left: 25% } |
||||
.\-2u#{$x} { margin-left: 16.6666666667% } |
||||
.\-1u#{$x} { margin-left: 8.3333333333% } |
||||
|
||||
} |
||||
|
||||
/// Utility mixin for grid. |
||||
/// @param {list} $gutters Gutters. |
||||
/// @param {string} $class Optional class name. |
||||
/// @param {integer} $multiplier Multiplier (default is 1). |
||||
@mixin grid-gutters($gutters, $class: null, $multiplier: 1) { |
||||
|
||||
// Expand gutters if it's not a list. |
||||
@if length($gutters) == 1 { |
||||
$gutters: ($gutters, 0); |
||||
} |
||||
|
||||
// Get column and row gutter values. |
||||
$c: nth($gutters, 1); |
||||
$r: nth($gutters, 2); |
||||
|
||||
// Get class (if provided). |
||||
$x: ''; |
||||
|
||||
@if $class { |
||||
$x: '.' + $class; |
||||
} |
||||
|
||||
// Default. |
||||
.row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); } |
||||
.row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } |
||||
|
||||
// Uniform. |
||||
.row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); } |
||||
.row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } |
||||
|
||||
} |
||||
|
||||
/// Wraps @content in vendorized keyframe blocks. |
||||
/// @param {string} $name Name. |
||||
@mixin keyframes($name) { |
||||
|
||||
@-moz-keyframes #{$name} { @content; } |
||||
@-webkit-keyframes #{$name} { @content; } |
||||
@-ms-keyframes #{$name} { @content; } |
||||
@keyframes #{$name} { @content; } |
||||
|
||||
} |
||||
|
||||
/// |
||||
/// Sets breakpoints. |
||||
/// @param {map} $x Breakpoints. |
||||
/// |
||||
@mixin skel-breakpoints($x: ()) { |
||||
$breakpoints: $x !global; |
||||
} |
||||
|
||||
/// |
||||
/// Initializes layout module. |
||||
/// @param {map} config Config. |
||||
/// |
||||
@mixin skel-layout($config: ()) { |
||||
|
||||
// Config. |
||||
$configPerBreakpoint: (); |
||||
|
||||
$z: map-get($config, 'breakpoints'); |
||||
|
||||
@if $z { |
||||
$configPerBreakpoint: $z; |
||||
} |
||||
|
||||
// Reset. |
||||
$x: map-get($config, 'reset'); |
||||
|
||||
@if $x { |
||||
|
||||
/* Reset */ |
||||
|
||||
@include reset($x); |
||||
|
||||
} |
||||
|
||||
// Box model. |
||||
$x: map-get($config, 'boxModel'); |
||||
|
||||
@if $x { |
||||
|
||||
/* Box Model */ |
||||
|
||||
@include boxModel($x); |
||||
|
||||
} |
||||
|
||||
// Containers. |
||||
$containers: map-get($config, 'containers'); |
||||
|
||||
@if $containers { |
||||
|
||||
/* Containers */ |
||||
|
||||
.container { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
|
||||
// Use default is $containers is just "true". |
||||
@if $containers == true { |
||||
$containers: 960px; |
||||
} |
||||
|
||||
// Apply base. |
||||
@include containers($containers); |
||||
|
||||
// Apply per-breakpoint. |
||||
@each $name in map-keys($breakpoints) { |
||||
|
||||
// Get/use breakpoint setting if it exists. |
||||
$x: map-get($configPerBreakpoint, $name); |
||||
|
||||
// Per-breakpoint config exists? |
||||
@if $x { |
||||
$y: map-get($x, 'containers'); |
||||
|
||||
// Setting exists? Use it. |
||||
@if $y { |
||||
$containers: $y; |
||||
} |
||||
|
||||
} |
||||
|
||||
// Create @media block. |
||||
@media screen and #{map-get($breakpoints, $name)} { |
||||
@include containers($containers); |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// Grid. |
||||
$grid: map-get($config, 'grid'); |
||||
|
||||
@if $grid { |
||||
|
||||
/* Grid */ |
||||
|
||||
// Use defaults if $grid is just "true". |
||||
@if $grid == true { |
||||
$grid: (); |
||||
} |
||||
|
||||
// Sub-setting: Gutters. |
||||
$grid-gutters: 40px; |
||||
$x: map-get($grid, 'gutters'); |
||||
|
||||
@if $x { |
||||
$grid-gutters: $x; |
||||
} |
||||
|
||||
// Rows. |
||||
.row { |
||||
border-bottom: solid 1px transparent; |
||||
-moz-box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.row > * { |
||||
float: left; |
||||
-moz-box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.row:after, .row:before { |
||||
content: ''; |
||||
display: block; |
||||
clear: both; |
||||
height: 0; |
||||
} |
||||
|
||||
.row.uniform > * > :first-child { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
.row.uniform > * > :last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
// Gutters (0%). |
||||
@include grid-gutters($grid-gutters, \30 \25, 0); |
||||
|
||||
// Apply base. |
||||
@include grid($grid-gutters); |
||||
|
||||
// Apply per-breakpoint. |
||||
@each $name in map-keys($breakpoints) { |
||||
|
||||
// Get/use breakpoint setting if it exists. |
||||
$x: map-get($configPerBreakpoint, $name); |
||||
|
||||
// Per-breakpoint config exists? |
||||
@if $x { |
||||
$y: map-get($x, 'grid'); |
||||
|
||||
// Setting exists? |
||||
@if $y { |
||||
|
||||
// Sub-setting: Gutters. |
||||
$x: map-get($y, 'gutters'); |
||||
|
||||
@if $x { |
||||
$grid-gutters: $x; |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// Create @media block. |
||||
@media screen and #{map-get($breakpoints, $name)} { |
||||
@include grid($grid-gutters, $name); |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
/// Resets browser styles. |
||||
/// @param {string} $mode Mode (default is 'normalize'). |
||||
@mixin reset($mode: 'normalize') { |
||||
|
||||
@if $mode == 'normalize' { |
||||
|
||||
// normalize.css v3.0.2 | MIT License | git.io/normalize |
||||
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} |
||||
|
||||
} |
||||
@else if $mode == 'full' { |
||||
|
||||
// meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (public domain) |
||||
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
/// Vendorizes a declaration's property and/or value(s). |
||||
/// @param {string} $property Property. |
||||
/// @param {mixed} $value String/list of value(s). |
||||
@mixin vendor($property, $value) { |
||||
|
||||
// Determine if property should expand. |
||||
$expandProperty: index($vendor-properties, $property); |
||||
|
||||
// Determine if value should expand (and if so, add '-prefix-' placeholder). |
||||
$expandValue: false; |
||||
|
||||
@each $x in $value { |
||||
@each $y in $vendor-values { |
||||
@if $y == str-slice($x, 1, str-length($y)) { |
||||
|
||||
$value: set-nth($value, index($value, $x), '-prefix-' + $x); |
||||
$expandValue: true; |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
// Expand property? |
||||
@if $expandProperty { |
||||
@each $vendor in $vendor-prefixes { |
||||
#{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; |
||||
} |
||||
} |
||||
|
||||
// Expand just the value? |
||||
@elseif $expandValue { |
||||
@each $vendor in $vendor-prefixes { |
||||
#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; |
||||
} |
||||
} |
||||
|
||||
// Neither? Treat them as a normal declaration. |
||||
@else { |
||||
#{$property}: #{$value}; |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
@import 'css/libs/skel'; |
||||
@import 'css/libs/breakpoints'; |
||||
@import 'css/libs/html-grid'; |
||||
|
||||
/* |
||||
* HTML5 UP |
||||
* html5up.net |
||||
* Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
||||
*/ |
||||
|
||||
@include skel-breakpoints(( |
||||
xlarge: '(max-width: 1680px)', |
||||
large: '(max-width: 1280px)', |
||||
medium: '(max-width: 980px)', |
||||
small: '(max-width: 736px)', /* .col-12-small les colonnes s'annulent */ |
||||
xsmall: '(max-width: 480px)', |
||||
xxsmall: '(max-width: 360px)', |
||||
xlarge-to-max: '(min-width: 1681px)', |
||||
small-to-xlarge: '(min-width: 481px) and (max-width: 1680px)' |
||||
)); |
||||
|
||||
// Component. |
||||
@import 'css/components/row'; |
||||
@ -0,0 +1,52 @@
|
||||
<html> |
||||
<head> |
||||
<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script> |
||||
<title>Test colonnes</title> |
||||
[<meta name="description" content="(#INTRODUCTION{150}|attribut_html)" />] |
||||
[<link rel="canonical" href="(#URL_ARTICLE|url_absolue)" />] |
||||
[(#REM) Chargement de JQuery etc ] |
||||
#INSERT_HEAD |
||||
[(#REM) Chargement de la feuille de compilation scss, grille de 12 ] |
||||
[<link rel="stylesheet" href="(#CSS{css/spip_colonne.css})" type="text/css" />] |
||||
[(#REM) Chargement du javascript ajoutant les class aux colonnes ] |
||||
[<script src="(#CHEMIN{javascript/spip_colonne.js})" type="text/javascript"></script>] |
||||
|
||||
[(#REM) style scss propre à cette page, sans interaction avec les scripts ci-dessus] |
||||
<style type="text/css"> |
||||
.contain{width:80%; margin:1em auto;} |
||||
.contain h1{font-size:160%; font-weight:bold; margin:1em 0;} |
||||
.contain h2{font-size:140%; font-weight:bold; margin:1em 0;} |
||||
.contain p{margin:1em 0;} |
||||
.spip_colonne{border:1px solid orange} |
||||
</style> |
||||
</head> |
||||
|
||||
<body> |
||||
<div class="contain"> |
||||
<h1>TEST colonnes</h1> |
||||
<p> |
||||
modifiez le texte d'un article en ajoutant des colonnes (voir exemple ci-dessous)<br> |
||||
puis inscrivez son id_article dans l'URL <a href="[(#SELF|parametre_url{id_article,163})]">[(#SELF|parametre_url{id_article,163})]</a><br> |
||||
</p> |
||||
<div> |
||||
<textarea readonly="readonly" cols="60" rows="7" dir="ltr"> |
||||
<colonne>colonne 1</colonne> |
||||
<colonne>colonne 2</colonne> |
||||
<colonne>colonne 3</colonne> |
||||
|
||||
du texte en paragraphe |
||||
|
||||
<colonne><img5> image colonne A</colonne> |
||||
<colonne><img6> image colonne B</colonne></textarea> |
||||
</div> |
||||
|
||||
<BOUCLE_principale(ARTICLES){id_article}> |
||||
|
||||
<h2>#TITRE</h2> |
||||
<div class="#EDIT_TEXTE">#TEXTE</a> |
||||
|
||||
</BOUCLE_principale> |
||||
|
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,60 @@
|
||||
/* |
||||
* Code pour SPIP |
||||
* Gestion des .spip_colonne |
||||
* GPL3 2019 |
||||
* Anne-lise Martenot
|
||||
* http://elastick.net
|
||||
*/ |
||||
|
||||
$(document).ready(function(){ |
||||
// compter le nombre de colonnes
|
||||
var nb_colonne; |
||||
var nb_colonne = $(".spip_colonne").length; |
||||
// au moins 2 colonnes présentes
|
||||
if(nb_colonne > 1){ |
||||
|
||||
//la premiere colonne trouvée prend la class 'spip_colonne_first'
|
||||
$(".spip_colonne:first").addClass('spip_colonne_first'); |
||||
|
||||
//on repére les nœuds frères suivants chaque .spip_colonne qui seraient des P
|
||||
//la premiere .spip_colonne trouvée prend la class spip_colonne_first
|
||||
|
||||
$(".spip_colonne").nextAll("p").each(function() { |
||||
$(this).nextAll('.spip_colonne:first').addClass('spip_colonne_first'); |
||||
}); |
||||
|
||||
$(".spip_colonne_first").each(function() { |
||||
$(this). |
||||
first(). |
||||
nextUntil('p'). |
||||
andSelf(). |
||||
wrapAll('<div class="row" />'); |
||||
}); |
||||
|
||||
//on supprime les br immiscés entre 2 spip_colonne (nextAll = nœuds frères)
|
||||
$(".row .spip_colonne").nextAll("br").each(function() { |
||||
$(this).remove(); |
||||
}); |
||||
|
||||
//on peut maintenant supprimer la class de chaque première colonne
|
||||
$('.spip_colonne').removeClass('spip_colonne_first'); |
||||
|
||||
//on compte le nombre de colonne par row
|
||||
//pour affecter les class inclues par HTML5
|
||||
//on pourrait faire 12/count mais bon hein …
|
||||
$(".row").each(function() { |
||||
var count = $(this).children(".spip_colonne").length; |
||||
if(count == 2 ){ |
||||
$(this).children('.spip_colonne').addClass('col-6 col-12-small'); |
||||
} else if (count == 3 ){ |
||||
$(this).children('.spip_colonne').addClass('col-4 col-12-small'); |
||||
} else if (count == 4 ){ |
||||
$(this).children('.spip_colonne').addClass('col-3 col-12-small'); |
||||
} else if (count >= 5 ){ |
||||
$(this).children('.spip_colonne').addClass('col-2 col-12-small'); |
||||
} |
||||
}); |
||||
|
||||
} |
||||
|
||||
}); |
||||
@ -0,0 +1,14 @@
|
||||
<?php |
||||
// This is a SPIP language file -- Ceci est un fichier langue de SPIP |
||||
|
||||
if (!defined('_ECRIRE_INC_VERSION')) { |
||||
return; |
||||
} |
||||
|
||||
$GLOBALS[$GLOBALS['idx_lang']] = array( |
||||
|
||||
// C |
||||
'colonne_description' => 'Créer des colonnes responsives avec le raccourci <colonne> voir /?page=demo/colonne', |
||||
'colonne_nom' => 'Raccourci colonne', |
||||
'colonne_slogan' => 'Des colonnes responsives dans le texte', |
||||
); |
||||
@ -0,0 +1,17 @@
|
||||
<paquet |
||||
prefix="colonne" |
||||
categorie="outil" |
||||
version="1.0.0" |
||||
etat="test" |
||||
compatibilite="[3.1.0;3.2.*]" |
||||
logo="prive/themes/spip/images/colonne-64.png" |
||||
documentation="https://contrib.spip.net" |
||||
> |
||||
<nom>Raccourci~‹colonne›</nom> |
||||
|
||||
<auteur lien="http://elastick.net">Anne-Lise Martenot</auteur> |
||||
<licence lien="http://www.gnu.org/licenses/gpl-3.0.html">GNU/GPL</licence> |
||||
<copyright>2019</copyright> |
||||
|
||||
<necessite nom="scssphp" compatibilite="[1.4.5;]" /> |
||||
</paquet> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 764 B |
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
Reference in new issue