Mindre arbejde med css og less

250 views
201 views

Published on

De fleste kender CSS, som det kodesprog vi skal bruge for at arbejde med designet af vores hjemmesider. LESS er en "overbygning" til CSS og gør mange ting lettere når vi skal arbejde med design af websider. Uanset om du tilpasser andres skabeloner eller laver dine egne, kan du have stor glæde af LESS.

Published in: Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
250
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Mindre arbejde med css og less

  1. 1. Mindre arbejde med CSS og LESS Kort om CSS Introduktion til LESS LESS i Joomla-skabeloner Tilpasning af skabelon med LESS Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  2. 2. CSS Syntaks selektor { egenskab: værdi; egenskab: værdi; osv. } Eksempel 1 Eksempel 2 h1 { color: #222; font-size: 24px; line-height: 40px; } footer { background-color: #eee; margin: 20px 0 0 0; padding: 20px; } Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  3. 3. LESS is MORE LESS = CSS + … • • • • • • Variables Nested rules Mixins Parametriske mixins Operations Import Se flere LESS-features på lesscss.org lesscss.dk Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  4. 4. LESS - variables Syntaks @variabel: værdi; Eksempel 1 Eksempel 2 @baseFontSize: 12px; @blue: rgba(0,80,125,1); div { font-size: @baseFontSize; } div { background-color: @blue; } Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  5. 5. LESS – nested rules Syntaks Eksempel footer { padding: @paddingLarge; p{ color: @gray; margin: @marginSmall; } } div { egenskab: værdi; div { egenskab: værdi; } } Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  6. 6. LESS - mixins Eksempel Syntaks .mixin { egenskab: værdi; egenskab: værdi; osv. } .rounded { border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } div { .rounded; } Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  7. 7. LESS – parametriske mixins Syntaks .mixin (parameter 1, parameter 2, osv.) { egenskab: parameter 1, parameter 2, osv.; egenskab: parameter 1, parameter 2, osv.; osv. } Eksempel .rounded (@topleft, @topright, @bottomright, @bottomleft) { -webkit-border-radius: @topleft @topright @bottomright @bottomleft; -moz-border-radius: @topleft @topright @bottomright @bottomleft; border-radius: @topleft @topright @bottomright @bottomleft; } div { } .rounded(@borderRadiusSmall, @borderRadiusSmall, @borderRadiusLarge, @borderRadiusLarge); Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  8. 8. LESS - operations Syntaks div { egenskab: værdi +-*/ tal; } Eksempel @borderWidthLarge: @baseBorderWidth * 1.25; Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  9. 9. LESS - import Syntaks @import ”filnavn.endelse”; Eksempel @import ”mixins.less”; Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  10. 10. Skabelon – LESS-filer fra template.less @import "variables/base-variables.less"; @import "variables/size-variables.less"; @import "variables/type-variables.less"; @import "variables/containers-variables.less"; @import "variables/navigation-variables.less"; @import "mixins.less"; @import "containers.less"; @import "type.less"; Protostar, som er standardskabelon i Joomla 3, er opbygget på cirka samme måde. Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  11. 11. Skabelon – fra LESS til CSS ”LESS compiler”-extension template.less → template.css Less-filen compiles, hver gang man gemmer én af less-filerne. Husk at aktivere ”LESS compiler”, når du har installeret den. Deaktivér compileren, når du er færdig med at redigere i skabelonen. Redigér IKKE i CSS-filen. Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  12. 12. Skabelon – base- og size-variables fra base-variables.less @baseFontSize: @baseFontFamily: 12px; Helvetica, Arial, sans-serif; @baseLineHeight: @baseTextAlign: 1.5em; left; @basePadding: @baseMargin: 1.25em; 1.25em; @baseBorderWidth: 0.5em; @baseBorderRadius: 1.25em; fra size-variables.less @lineHeightXXXSmall: @lineHeightXXSmall: @lineHeightXSmall: @lineHeightSmall: @lineHeightMedium: @lineHeightLarge: @lineHeightXLarge: @lineHeightXXLarge: @lineHeightXXXLarge: @baseLineHeight * 0.6; @baseLineHeight * 0.7; @baseLineHeight * 0.8; @baseLineHeight * 0.9; @baseLineHeight; @baseLineHeight * 1.1; @baseLineHeight * 1.2; @baseLineHeight * 1.3; @baseLineHeight * 1.4; @marginXXXSmall: @marginXXSmall: @marginXSmall: @marginSmall: @marginMedium: @marginLarge: @marginXLarge: @marginXXLarge: @marginXXXLarge: @baseMargin * 0.2; @baseMargin * 0.4; @baseMargin * 0.6; @baseMargin * 0.8; @baseMargin; @baseMargin * 1.2; @baseMargin * 1.4; @baseMargin * 1.6; @baseMargin * 1.8; Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  13. 13. Skabelon – variables niveau 1, 2 & 3 base-variables size-variables body wrappers modules Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  14. 14. Skabelon - containers 1 fra containers.less div { background: @__BackgroundColor @__BackgroundImage @__BackgroundRepeat @__BackgroundAttachment @__BackgroundPosition; border-width: @__BorderWidthTop @__BorderWidthRight @__BorderWidthBottom @__BorderWidthLeft; border-style: @__BorderStyle; border-color: @__BorderColor; margin: @__MarginTop @__MarginRight @__MarginBottom @__MarginLeft; padding: @__PaddingTop @__PaddingRight @__PaddingBottom @__PaddingLeft; .boxShadow(@__BoxShadowType, @__BoxShadowHorizontal, @__BoxShadowVertical, @__BoxShadowBlur, @__BoxShadowSpread, @__BoxShadowColor ); .linearGradient(@__GradientOrigin, @__GradientColorStart, @__GradientColorStop); .rounded(@__BorderRadiusTopLeft, @__BorderRadiusTopRight, @__BorderRadiusBottomRight, @__BorderRadiusBottomLeft); } fra containers-variables.less @__BackgroundColor: @__BackgroundImage: @__BackgroundRepeat: @__BackgroundAttachment: @__BackgroundPosition: none; none; no-repeat; scroll; left top; @__PaddingTop: @__PaddingRight: @__PaddingBottom: @__PaddingLeft: 0; 0; @__PaddingTop; @__PaddingRight; @__MarginTop: @__MarginRight: @__MarginBottom: @__MarginLeft: 0; 0; @__MarginTop; @__MarginRight; @__BorderWidthTop: @__BorderWidthRight: @__BorderWidthBottom: @__BorderWidthLeft: @__BorderStyle: @__BorderColor: 0; @__BorderWidthTop; @__BorderWidthTop; @__BorderWidthTop; none; none; @__BorderRadiusTopLeft: @__BorderRadiusTopRight: @__BorderRadiusBottomRight: @__BorderRadiusBottomLeft: 0; @__BorderRadiusTopLeft; @__BorderRadiusTopLeft; @__BorderRadiusTopLeft; // @__GradientOrigin: // @__GradientColorStart: // @__GradientColorStop: none; none; none; @__BoxShadowType: @__BoxShadowHorizontal: @__BoxShadowVertical: @__BoxShadowBlur: @__BoxShadowSpread: @__BoxShadowColor: none; 0; 0; 0; 0; none; Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  15. 15. Skabelon @moduleBackgroundColor; @moduleBackgroundImage; @moduleBackgroundRepeat; @moduleBackgroundAttachment; @moduleBackgroundPosition; @topModulePaddingTop: @topModulePaddingRight: @topModulePaddingBottom: @topModulePaddingLeft: @modulePaddingTop; @modulePaddingRight; @modulePaddingTop; @modulePaddingRight; @topModuleMarginTop: @topModuleMarginRight: @topModuleMarginBottom: @topModuleMarginLeft: @moduleMarginTop; @moduleMarginRight; @moduleMarginTop; @moduleMarginRight; @topModuleBorderWidthTop: @topModuleBorderWidthRight: @topModuleBorderWidthBottom: @topModuleBorderWidthLeft: @topModuleBorderStyle: @topModuleBorderColor: @moduleBorderWidthTop; @moduleBorderWidthTop; @moduleBorderWidthTop; @moduleBorderWidthTop; @moduleBorderStyle; @moduleBorderColor; @topModuleBorderRadiusTopLeft: @topModuleBorderRadiusTopRight: @topModuleBorderRadiusBottomRight: @topModuleBorderRadiusBottomLeft: @moduleBorderRadiusTopLeft; @moduleBorderRadiusTopLeft; @moduleBorderRadiusTopLeft; @moduleBorderRadiusTopLeft; // @topModuleGradientOrigin: // @topModuleGradientColorStart: // @topModuleGradientColorStop: @moduleGradientOrigin; @moduleGradientColorStart; @moduleGradientColorStop; @topModuleBoxShadowType: @topModuleBoxShadowHorizontal: @topModuleBoxShadowVertical: @topModuleBoxShadowBlur: @topModuleBoxShadowSpread: @topModuleBoxShadowColor: - containers 2 @topModuleBackgroundColor: @topModuleBackgroundImage: @topModuleBackgroundRepeat: @topModuleBackgroundAttachment: @topModuleBackgroundPosition: @moduleBoxShadowType; @moduleBoxShadowHorizontal; @moduleBoxShadowHorizonta; @moduleBoxShadowBlur; @moduleBoxShadowSpread; @moduleBoxShadowColor; Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
  16. 16. 6 Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014 top-3f top-3e top-3d top-2 top-3c footer bottom below size-variables 3 top-3b base-variables top-3a above sidebar mainmenu slideshow top 2 top-2f top-2e top-2d top-1 top-2c top-2b top-2a top-1f top-1e top-1d 5 top-1c top-1b topmenu 4 top-1a 1 Skabelon - moduler modules top-3
  17. 17. 4 size-variables 3 Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014 bottom-2-wrapper base-variables 2 bottom-1-wrapper 1 below-2-wrapper below-1-wrapper above-2-wrapper above-1-wrapper right-wrapper left-wrapper top-3-wrapper top-2-wrapper top-1-wrapper Skabelon – modulwrappers module-wrappers

×