Component starter, somme test about a component structure
@charset "UTF-8";
html {
box-sizing: border-box; }
*, *::after, *::before {
box-sizing: inherit; }
/* # Component
Template de base pour un composant
Organisation des rêgles css:
- <https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/>
- <https://github.com/necolas/idiomatic-css>
Styleguide
*/
.myModuleName {
position: relative;
z-index: 1000;
display: block;
margin: 0;
padding: .5em;
border-color: silver;
background-image: url();
background-repeat: repeat-x;
background-color: white;
font-family: sans-serif;
font-color: blue; }
// ----
// libsass (v3.1.0)
// ----
@import "bourbon/bourbon";
@import "neat/neat";
// Breakpoints
// Tweakpoints
/* # Component
Template de base pour un composant
Organisation des rêgles css:
- <https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/>
- <https://github.com/necolas/idiomatic-css>
Styleguide
*/
// Layout
@mixin layout-module1(){
// Positioning
position:relative;
z-index: 1000;
// Display & Box Model
display:block;
margin:0;
padding: .5em;
}
$module1-border-color: white !default;
// Theme
@mixin theme-module1(){
// Block Theming
// Bordering
border:{
color: silver;
}
// Background
background: {
image:url();
repeat:repeat-x;
color:white;
}
// Typography
font: {
family: sans-serif;
color: blue;
}
}
// Usage
.myModuleName{
@include layout-module1();
@include theme-module1();
}