| @media screen and (min-width: 40em) { | |
| .medium-float-left { left; } | |
| .medium-float-right { right; } | |
| .medium-no-float { none; } | |
| } | |
| @media screen and (min-width: 75em) { | |
| .large-float-left { left; } | |
| .large-float-right { right; } | |
| .large-no-float { none; } |
Format: "Alias: block/sub-block(modifier, ...).element(modifier, ...)"
For exemple:
<div bem="HeaderMenu: l-header/m-menu(break)"> <!-- m-menu that break, inside l-header, alias "HeaderMenu" -->
<div bem="HeaderMenu.item"> <!-- "HeaderMenu" item element -->
<span bem="HeaderMenu.icon"></span> <!-- "HeaderMenu" icon element -->
<span bem="HeaderMenu/m-icon"></span> <!-- m-icon inside "HeaderMenu" -->
</div>
| Starting bin_web-client-ng_1 | |
| Attaching to bin_web-client-ng_1 | |
| web-client-ng_1 | * Install npm dependencies | |
| web-client-ng_1 | npm info it worked if it ends with ok | |
| web-client-ng_1 | npm info using [email protected] | |
| web-client-ng_1 | npm info using [email protected] | |
| web-client-ng_1 | npm info preinstall [email protected] | |
| web-client-ng_1 | npm info package.json [email protected] No license field. | |
| web-client-ng_1 | npm info package.json [email protected] No license field. | |
| web-client-ng_1 | npm info package.json [email protected] license should be a valid SPDX license expression |
| // Without BEM : | |
| @include object(myblock) { | |
| // Inherit from an other object | |
| @include inherit(base, trait); | |
| ... | |
| // Set an attribute | |
| $_attribute: attr-set(color, #fff); |
I hereby claim:
To claim this, I am signing this object:
| $color--red: #FF0000; | |
| $color--greed: #00FF00; | |
| $color--blue: #0000FF; | |
| $house--height: 20px; | |
| $house__door--height: 6px; | |
| @function house__window--color($color) { | |
| @return darker($color, 50%); | |
| } |
| $COLOR_RED: #FF0000; | |
| $COLOR_GREEN: #00FF00; | |
| $COLOR_BLUE: #0000FF; | |
| $House_HEIGHT: 20px; | |
| $House_Door_HEIGHT: 6px; | |
| @function House_Window_color($color) { | |
| @return darker($color, 50%); | |
| } |
| # ---------------------------------------------- | |
| # | |
| # Specific - CSS property order | |
| # | |
| # Making a description of the object specs, | |
| # from the structural to the cosmetic. | |
| # | |
| # ---------------------------------------------- | |
| # The following scss-lint Linters are not yet supported by sass-lint: | |
| # ElsePlacement, PropertyCount, SelectorDepth, UnnecessaryParentReference | |
| # | |
| # The following settings/values are unsupported by sass-lint: | |
| # Linter Indentation, option "allow_non_nested_indentation" | |
| # Linter Indentation, option "character" | |
| # Linter PropertySortOrder, option "separate_groups" | |
| # Linter SpaceBeforeBrace, option "allow_single_line_padding" | |
| files: |
| ➜ foundation-sites git:(chore/browser-compat) ✗ gulp javascript | |
| [13:17:04] Using gulpfile ~/Documents/Documents/Projects/Programmation/Web/Forks/foundation-sites/gulpfile.js | |
| [13:17:04] Starting 'javascript:foundation'... | |
| [13:17:04] Starting 'javascript:deps'... | |
| [13:17:04] Starting 'javascript:docs'... | |
| [13:17:13] Finished 'javascript:deps' after 9.17 s | |
| [13:17:14] Finished 'javascript:docs' after 10 s | |
| [13:17:17] Finished 'javascript:foundation' after 12 s | |
| [13:17:17] Starting 'javascript'... | |
| [13:17:17] Finished 'javascript' after 25 μs |