Client-based Web Programming
(1DV022)
CSS Preprocessors
Static Site generators
Licence for this work
This work is produced by Johan Leitet for the course Client-based Web Programming (1DV022) at Linnaeus University.
All content in this work excluding photographs, icons, picture of course litterature and Linnaeus University logotype and symbol, is licensied under a
Creative Commons Attribution 4.0 International License.
You are free to
- copy and redistribute the material in any medium or format
- spread the whole or parts of the content
- show the whole or parts of the content publicly and digital
- convert the content to another format
- change the content
If you change the content do not use the photographs, icons, picture of the course literature or Linnaeus University logotype and symbol in your new work!
At all times you must give credit to: ”Linnaeus university – Client-based Web Programming (1DV022)” with the link https://coursepress.lnu.se/kurs/klientbaserad-webbprogrammering/ and to the Creative Common-license above.
CSS Preprocessors
A CSS Preprocessor is a set of rulesthat lets you extend the css-language
with some usable parts. The extended
css is transformed to regular css using
the preprocessor.
Why use CSS Preprocessors?
- Less css to maintain
- DRY css
- Make calculations in your css
- Better organized css
- Nesting
- Separate in files
- Use mixins
- Use variables!
Which?
- We will default to sass in this course,
but you are free to choose another
preprocessor if you like.
Features of most CSS Preprocessors
- Variables
- Nestning
- Mixins
- Partials
- @import
- Operators
- ...
Variables
- How about not needing to repeat the same value over and over again?
scss:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
css:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Nesting
- Nest your css selectors in the same manner as your html
scss:
nav {
ul { margin: 0; padding: 0; list-style: none; }
li { display: inline-block; }
a { display: block;
padding: 6px 12px;
text-decoration: none;
}
}
css:
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block;
padding: 6px 12px; text-decoration: none; }
Mixins
- DRY css
scss:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
css:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Partials and @import
- Minimize http calls
scss:
@import "css-file.css";
@import "_reset";
@import "mobile";
css:
@import url(css-file.css);
body { margin: 0; }
div { width: 100%; }
Operators
- Calculations in your css (+ * / %)
scss:
$width: 960px;
.container { width: 100%; }
aside[role="complimentary"] {
float: right;
width: 300px / $width * 100%;
}
css:
.container { width: 100%; }
aside[role="complimentary"] {
float: right;
width: 31.25%;
}
Disadvantages?
- Harder to debug your code
- Line numbers in browser !== line numbers in source
- Greater complexity
- More tools
- More setup
- Building times increase
- Save generated files in souce control?
Källa:
http://adamsilver.io/articles/the-disadvantages-of-css-preprocessors/
Source maps, enable debuging
- When building a sass-project you get a .map-file
main.css.map
{ "version": 3, "mappings": "AAAA,IAAK;EAAE,MAAM,EAAE,CAAC;;ACAhB,GAAI;EACH,KAAK,EAAE,IAAI", "sources": ["_reset.scss","mobile.scss"], "names": [], "file": "main.css" } - And a source-map comment in your css-file:
... css code here ...
/*# sourceMappingURL=main.css.map */
- This will enable scss line debugging in the browser
- FF, Chrome, Safari, Edge
Static Site Generators
Takes templates, text, html as input and produces a static html site
Why use static site generators?
- Performance
- Version controlled content
- Security
- No updates required
- No databases
- Only a simple web server needed
- Traffic
- Scale
- Cache
Which?
- We will use Jekyll in this course hosting the site on github-pages.
Features of most SSGs
- Partials/includes
- header.html, footer.html...
- Layouts
- Templates
- Liquid for Jekyll
- Markdown (md) support
- ...
Partials/includes
default.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
....
</div>
{% include footer.html %}
</body>
</html>
- In Jekyll:
- Partials in folder "_includes"
Templates
- Simple markdown language often converted to HTML
blogpage.html:
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
- In Jekyll:
- Liquid is the templating engine
Markdown (.md)
- Simple markdown language often converted to HTML
.md:
##Header 2
This is a normal paragraph.
###Header 3
1. This
2. list is
* nested
3. and ordered
html
<h2>Header 2</h2>
<p>This is a normal paragraph.</p>
<h3>Header 3</h3>
<ol>
<li>This</li>
<li>list is
<ul><li>nested</li></ul>
</li>
<li>and ordered</li>
</ol>
Disadvantages?
- Only static content
- No realtime content
- No user input
- no admin UI
- More complexity
- compared to static html
- Tools needed to build
- or hosting supporting the ssg
Getting started:
- Install Jekyll
- Requires Ruby, RubyGems, [Linux || Unix || OSX], NodeJS
- Create a new site
~ $ jekyll new myblog
- Edit the site
- build the site
cd myblog~/myblog $ jekyll serve
- Testa resultatet
The first assignment in the course:
Client-based Web Programming
(1DV022)
CSS Preprocessors
Static Site generators