SlideShare a Scribd company logo
CSS preprocessors for
designers
on the CSS-On-Diet example
Tomasz.Wyderka cofoh.com 2014.July.13
Pure CSS
● Repetitive
● Tedious
● Unreadable
● Old
Repetitive
a { color: #1c6ba0; }
ul { color: #1c6ba0; }
.el { color: #1c6ba0; }
@media print {
a { color: #ffffff; }
ul { color: #ffffff; }
.el { color: #ffffff; }
}
Tedious
div {
Too detailed properties:
border-bottom-right-radius: 2em;
Unnecessary prefixes:
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
Unreadable
div {
Should be 200-10(padding)-2(border)
width: 188px;
That’s the same color, just different opacity
color: #C4E3EE
border-color:rgba(196,227,238,0.93)
}
CSS is old
● comment style: /* … */
● block groups: {}
● separator character: ;
are taken from C programming language created in 1969!
div {
/* comment */
prop1: value1;
prop2: value2;
}
CSS Preprocessor
Definition:
Software installed on developer’s computer
which reads modified and more feature rich
CSS and writes back pure CSS ready for use
by internet browsers
Some Preprocessors
● Sass
● Less
● Stylus
● CSS-On-Diet
Most used is Sass. My examples are based
on the CSS-On-Diet.
CSS-On-Diet
Created for designers. Doesn’t require
programming like others. Focused on
making writing and modifying CSS faster.
Based on Emmet plugin.
New features in old CSS
Most CSS preprocessors adds features on
top of a normal CSS syntax. That means you
can use existing CSS code and use
preprocessors features only in parts of them.
You don’t have to be afraid of change all
your existing work.
New features in old CSS
.element {
letter-spacing: 2px;
background-color: #1C6BA0;
}CSS-On-Diet can read your existing CSS if
all declarations are written on separate lines.
Like above. If not just split them.
Remove colons
Preprocessors tends to reduce repetitive
tasks. Colons and semicolons are optional in
CSS-On-Diet. Small change but releases
your brain from doing work which can be
done by computer.
Remove colons
.element {
letter-spacing 2px
background-color #1C6BA0
}Colons and semicolons are not required. In
the next example you will see how it can save
more than 20% of keystrokes
Mnemonics (abbreviations)
Emmet plugin saves a lot of time for crowds
of developers. CSS-On-Diet uses that idea
(Abbreviations) to fasten not only writing
process, but also modifying and reading
time!
Mnemonics (abbreviations)
.element {
les 2p
bac #1C6BA0
}Common CSS keywords have mnemonics.
Parameters are 3 letters long, values 2, and
units just 1 letter (The whole list)
Medias Breakpoints
Responsive Web Design takes a lot of time.
And usually it is very repetitive work. Like
copying declarations between media queries,
or jumping between totally unrelated parts
of the code.
Medias Breakpoints
@cod-media {
tablet (min-width: 768px)
}
.element {
les 2p
les 3p @tablet
}
Now RWS is highly intuitive
Comments
Commenting out CSS is not a big deal but
it’s used so often that should be better. With
CSS-On-Diet you can comment out:
● a single line quickly
● around text with other comment inside
(that was very annoying)
One line comments
.element {
les 2p // why not 3?
bac #1C6BA0 // deep ocean
}No need to remember to close those
comments
Nested comments
.element {
/*
les /*3p*/ 2p
*/
bac #1C6BA0
}
Now you can comment out code with other
comment inside. Finally...
Arithmetics
Did you ever want to write the element
width as a sum of two numbers? I bet you
did. Calculations operation is the most basic
feature. Every preprocessor has it. Some
even very advanced. In everyday work just
+,-,*,/ will pay you back superfluously.
Arithmetics
.element {
wid 200p+2*10p
les 3p-1
bac #1C6BA0
}
CSS needs calculations. That's more than
sure.
Short RGBA
It’s quite big inconsistency to write color
with Alpha Channel in the different format.
When you have #1c6ba0 and want to add
transparency you have to convert it to
rgba(28,107,160,0.95).
Short RGBA
.element {
les 3p-1
bac #1C6BA0F1
}
In CSS-On-Diet you can add just two more
digits to have transparency with your color
(here F1)
Variables
The most important and needed feature are
the variables. You store color, width,
anything under variable name and then you
can use it in arbitrary number of places.
When you want to adjust that color, just
change it in one place! Stay DRY!
Variables
@cod-defines {
sp2014 3p-1
ocean #1C6BA0F1
}
.element {
les sp2014
bac ocean
}
Every line in the @cod-
defines{} is a variable
name and a body. That
name will be changed to
that body text when
used.
Mixins
Mixins are bigger parts of CSS which can be
reused. Imagine the mixin as a variable
containing not single value, but whole lines
of CSS. Additionally mixin can use
arguments to better mix CSS in places where
is use.
Mixins
@cod-defines {
sp2014 3p-1
ocean bac #1C6BA0_ARG1_ ;
bai url("fish.png")
}
.element {
les sp2014
ocean(F1)
}
ocean is the
mixin name
which expands to
bac and bai
(background
color and image).
_ARG1_ will be
changed to F1
Including files
CSS @import forces browsers to download
included file in a separate http request.
Generating more traffic. Preprocessors have
their own mechanism of importing which
concatenates all files in the one, reducing
network traffic.
Including files
@cod-include {
file1.cod
dir1/dir2/file2.css
}
That will include and merge two files in the
place where this code is written.
Links
Thank you. That’s all.
Check out these links for more information
about CSS-On-Diet:
Home page
Developer Guide (inside detailed
Installation and Usage Instructions)

More Related Content

Viewers also liked

Building SaaS Enabled Applications
Building SaaS Enabled ApplicationsBuilding SaaS Enabled Applications
Building SaaS Enabled Applications
Movate
 
Spoof text
Spoof  textSpoof  text
Spoof text
graceyehshiang
 
Sass Why for the CSS Guy
Sass Why for the CSS GuySass Why for the CSS Guy
Sass Why for the CSS Guy
Beau Smith
 
Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
Nicole Sullivan
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
Nicole Sullivan
 
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS Preprocessor
Andrea Tarr
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
Gareth Saunders
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
Nicole Sullivan
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
Russ Weakley
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
Nicole Sullivan
 
Getting Started with CSS
Getting Started with CSSGetting Started with CSS
Getting Started with CSS
Nicole Ryan
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
Clément Wehrung
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
In a Rocket
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
Stacy Kvernmo
 

Viewers also liked (16)

Building SaaS Enabled Applications
Building SaaS Enabled ApplicationsBuilding SaaS Enabled Applications
Building SaaS Enabled Applications
 
Spoof text
Spoof  textSpoof  text
Spoof text
 
Sass Why for the CSS Guy
Sass Why for the CSS GuySass Why for the CSS Guy
Sass Why for the CSS Guy
 
Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS Preprocessor
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Getting Started with CSS
Getting Started with CSSGetting Started with CSS
Getting Started with CSS
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
 

Similar to CSS preprocessors for designers (CSS-On-Diet)

Sass presentation
Sass presentationSass presentation
Sass presentation
Davin Abraham
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
Wynn Netherland
 
LESS CSS
LESS CSSLESS CSS
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
Rob Davarnia
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
Sanjoy Kr. Paul
 
CSSO – compress CSS (english version)
CSSO – compress CSS (english version)CSSO – compress CSS (english version)
CSSO – compress CSS (english version)
Roman Dvornov
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
Kianosh Pourian
 
Client side performance compromises worth making
Client side performance compromises worth makingClient side performance compromises worth making
Client side performance compromises worth making
Cathy Lill
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
kavi806657
 
The Future of CSS
The Future of CSSThe Future of CSS
The Future of CSS
Bret Little
 
Less css
Less cssLess css
Less css
Bill Chea
 
Advanced sass
Advanced sassAdvanced sass
Advanced sass
Kianosh Pourian
 
Btk creative-web-03
Btk creative-web-03Btk creative-web-03
Btk creative-web-03
Lukas Oppermann
 
Customizing the look and-feel of DSpace
Customizing the look and-feel of DSpaceCustomizing the look and-feel of DSpace
Customizing the look and-feel of DSpace
Bharat Chaudhari
 
Css
CssCss
Why less?
Why less?Why less?
Why less?
Bunlong Van
 
PostCss
PostCssPostCss
PostCss
LearningTech
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.
Eugene Nor
 
Landing Pages 101
Landing Pages 101Landing Pages 101
Landing Pages 101
Celeste Horgan
 

Similar to CSS preprocessors for designers (CSS-On-Diet) (20)

Sass presentation
Sass presentationSass presentation
Sass presentation
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
 
LESS CSS
LESS CSSLESS CSS
LESS CSS
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
 
CSSO – compress CSS (english version)
CSSO – compress CSS (english version)CSSO – compress CSS (english version)
CSSO – compress CSS (english version)
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
 
Client side performance compromises worth making
Client side performance compromises worth makingClient side performance compromises worth making
Client side performance compromises worth making
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
The Future of CSS
The Future of CSSThe Future of CSS
The Future of CSS
 
Less css
Less cssLess css
Less css
 
Advanced sass
Advanced sassAdvanced sass
Advanced sass
 
Btk creative-web-03
Btk creative-web-03Btk creative-web-03
Btk creative-web-03
 
Customizing the look and-feel of DSpace
Customizing the look and-feel of DSpaceCustomizing the look and-feel of DSpace
Customizing the look and-feel of DSpace
 
Css
CssCss
Css
 
Why less?
Why less?Why less?
Why less?
 
PostCss
PostCssPostCss
PostCss
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.
 
Landing Pages 101
Landing Pages 101Landing Pages 101
Landing Pages 101
 

Recently uploaded

CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
Claudio Di Ciccio
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
FODUU
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 

Recently uploaded (20)

CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 

CSS preprocessors for designers (CSS-On-Diet)

  • 1. CSS preprocessors for designers on the CSS-On-Diet example Tomasz.Wyderka cofoh.com 2014.July.13
  • 2. Pure CSS ● Repetitive ● Tedious ● Unreadable ● Old
  • 3. Repetitive a { color: #1c6ba0; } ul { color: #1c6ba0; } .el { color: #1c6ba0; } @media print { a { color: #ffffff; } ul { color: #ffffff; } .el { color: #ffffff; } }
  • 4. Tedious div { Too detailed properties: border-bottom-right-radius: 2em; Unnecessary prefixes: -webkit-animation-timing-function:linear; animation-timing-function:linear; }
  • 5. Unreadable div { Should be 200-10(padding)-2(border) width: 188px; That’s the same color, just different opacity color: #C4E3EE border-color:rgba(196,227,238,0.93) }
  • 6. CSS is old ● comment style: /* … */ ● block groups: {} ● separator character: ; are taken from C programming language created in 1969! div { /* comment */ prop1: value1; prop2: value2; }
  • 7. CSS Preprocessor Definition: Software installed on developer’s computer which reads modified and more feature rich CSS and writes back pure CSS ready for use by internet browsers
  • 8. Some Preprocessors ● Sass ● Less ● Stylus ● CSS-On-Diet Most used is Sass. My examples are based on the CSS-On-Diet.
  • 9. CSS-On-Diet Created for designers. Doesn’t require programming like others. Focused on making writing and modifying CSS faster. Based on Emmet plugin.
  • 10. New features in old CSS Most CSS preprocessors adds features on top of a normal CSS syntax. That means you can use existing CSS code and use preprocessors features only in parts of them. You don’t have to be afraid of change all your existing work.
  • 11. New features in old CSS .element { letter-spacing: 2px; background-color: #1C6BA0; }CSS-On-Diet can read your existing CSS if all declarations are written on separate lines. Like above. If not just split them.
  • 12. Remove colons Preprocessors tends to reduce repetitive tasks. Colons and semicolons are optional in CSS-On-Diet. Small change but releases your brain from doing work which can be done by computer.
  • 13. Remove colons .element { letter-spacing 2px background-color #1C6BA0 }Colons and semicolons are not required. In the next example you will see how it can save more than 20% of keystrokes
  • 14. Mnemonics (abbreviations) Emmet plugin saves a lot of time for crowds of developers. CSS-On-Diet uses that idea (Abbreviations) to fasten not only writing process, but also modifying and reading time!
  • 15. Mnemonics (abbreviations) .element { les 2p bac #1C6BA0 }Common CSS keywords have mnemonics. Parameters are 3 letters long, values 2, and units just 1 letter (The whole list)
  • 16. Medias Breakpoints Responsive Web Design takes a lot of time. And usually it is very repetitive work. Like copying declarations between media queries, or jumping between totally unrelated parts of the code.
  • 17. Medias Breakpoints @cod-media { tablet (min-width: 768px) } .element { les 2p les 3p @tablet } Now RWS is highly intuitive
  • 18. Comments Commenting out CSS is not a big deal but it’s used so often that should be better. With CSS-On-Diet you can comment out: ● a single line quickly ● around text with other comment inside (that was very annoying)
  • 19. One line comments .element { les 2p // why not 3? bac #1C6BA0 // deep ocean }No need to remember to close those comments
  • 20. Nested comments .element { /* les /*3p*/ 2p */ bac #1C6BA0 } Now you can comment out code with other comment inside. Finally...
  • 21. Arithmetics Did you ever want to write the element width as a sum of two numbers? I bet you did. Calculations operation is the most basic feature. Every preprocessor has it. Some even very advanced. In everyday work just +,-,*,/ will pay you back superfluously.
  • 22. Arithmetics .element { wid 200p+2*10p les 3p-1 bac #1C6BA0 } CSS needs calculations. That's more than sure.
  • 23. Short RGBA It’s quite big inconsistency to write color with Alpha Channel in the different format. When you have #1c6ba0 and want to add transparency you have to convert it to rgba(28,107,160,0.95).
  • 24. Short RGBA .element { les 3p-1 bac #1C6BA0F1 } In CSS-On-Diet you can add just two more digits to have transparency with your color (here F1)
  • 25. Variables The most important and needed feature are the variables. You store color, width, anything under variable name and then you can use it in arbitrary number of places. When you want to adjust that color, just change it in one place! Stay DRY!
  • 26. Variables @cod-defines { sp2014 3p-1 ocean #1C6BA0F1 } .element { les sp2014 bac ocean } Every line in the @cod- defines{} is a variable name and a body. That name will be changed to that body text when used.
  • 27. Mixins Mixins are bigger parts of CSS which can be reused. Imagine the mixin as a variable containing not single value, but whole lines of CSS. Additionally mixin can use arguments to better mix CSS in places where is use.
  • 28. Mixins @cod-defines { sp2014 3p-1 ocean bac #1C6BA0_ARG1_ ; bai url("fish.png") } .element { les sp2014 ocean(F1) } ocean is the mixin name which expands to bac and bai (background color and image). _ARG1_ will be changed to F1
  • 29. Including files CSS @import forces browsers to download included file in a separate http request. Generating more traffic. Preprocessors have their own mechanism of importing which concatenates all files in the one, reducing network traffic.
  • 30. Including files @cod-include { file1.cod dir1/dir2/file2.css } That will include and merge two files in the place where this code is written.
  • 31. Links Thank you. That’s all. Check out these links for more information about CSS-On-Diet: Home page Developer Guide (inside detailed Installation and Usage Instructions)

Editor's Notes

  1. * ? imports examples