Mindre arbejde med css og less

50 %
50 %
Information about Mindre arbejde med css og less
Design

Published on March 6, 2014

Author: louisesverdrup

Source: slideshare.net

Description

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.

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

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

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

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

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

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

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

LESS - operations Syntaks div { egenskab: værdi +-*/ tal; } Eksempel @borderWidthLarge: @baseBorderWidth * 1.25; Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

LESS - import Syntaks @import ”filnavn.endelse”; Eksempel @import ”mixins.less”; Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

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

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

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

Skabelon – variables niveau 1, 2 & 3 base-variables size-variables body wrappers modules Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

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

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

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

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

Add a comment

Related presentations

Related pages

Louise Sverdrup | LinkedIn

www.joomladay.dk præsenterer mit oplæg således: Titel: Mindre arbejde med LESS og CSS
Read more

At arbejde med CMS i 2013 - Education - documents.tips

Gode råd og tendenser for alle der arbejder med content management systemer i 2013. Documents.tips. ... Share At arbejde med CMS i 2013.
Read more

ARBEJDSPAPIR Pædagogers arbejde og professionsudvikling

Mindre arbejde med css og less De fleste kender CSS, som det kodesprog vi skal bruge for at arbejde med designet af vores hjemmesider. LESS er en ...
Read more

Kom i gang · Bootstrap

Ure med mindre kildefiler og automatisk genkompilerer ... at begynde at arbejde med en minimal ... af insekter og uoverensstemmelser med CSS ...
Read more

Sunrise søger 2 erfarne webudviklere, der elsker digital ...

... for du kommer både til at arbejde med mindre og ... og Laravel; Du har erfaring med at arbejde ... LESS; Du er detaljeorienteret, og ...
Read more

www.joomladay.dk

Hier sollte eine Beschreibung angezeigt werden, diese Seite lässt dies jedoch nicht zu.
Read more

Dreamweaver CC nye funktioner | Skab og kod hurtigere

Code Hints hjælper nye brugere med at lære HTML, CSS og andre ... Less og SCSS, med ... Nu kan du bruge mere tid med Dreamweaver og mindre tid med at ...
Read more

Henrik Stokbro - tlf 2098 9040 | LinkedIn

... tlf 2098 9040 med at finde interne ... Ajax, Javascript, HTML, SCSS, LESS, CSS og ... som har nemt ved at arbejde sammen med alle typer af ...
Read more

CSS · bootstrap

Less mixins og variabler. ... med kompileret CSS eller med kilden mindre filer. ... Tredjeparts udarbejdelse værktøjer kan arbejde med bootstrap, ...
Read more