Jack Bouba and Brian Middleton, Planet Argon's two front-end developers, taught a workshop about Bootstrap, Sass, GItHub, and Jekyll. Check out http://modernwebworkshop.com for details.
queries and flexible images that will reorganize the content on a page according to the size of the browser window. Ethan Marcotte http://unstoppablerobotninja.com/
Stylesheets, is a CSS preprocessing language. CSS has limitations; Sass was created to give it some extra functionality. There are 2 syntaxes (and 2 file extensions):
Stylesheets, is a CSS preprocessing language. CSS has limitations; Sass was created to give it some extra functionality. There are 2 syntaxes (and 2 file extensions): • The original Sass indented, terse syntax (.sass)
Stylesheets, is a CSS preprocessing language. CSS has limitations; Sass was created to give it some extra functionality. There are 2 syntaxes (and 2 file extensions): • The original Sass indented, terse syntax (.sass) • The default SCSS syntax (.scss)
Stylesheets, is a CSS preprocessing language. CSS has limitations; Sass was created to give it some extra functionality. There are 2 syntaxes (and 2 file extensions): • The original Sass indented, terse syntax (.sass) • The default SCSS syntax (.scss) CSS is valid SCSS.
released Sass in 2007. “Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.”
released Sass in 2007. “Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” • Sass makes scaling easier.
released Sass in 2007. “Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” • Sass makes scaling easier. • Sass can help keep code DRY (Don't Repeat Yourself).
released Sass in 2007. “Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” • Sass makes scaling easier. • Sass can help keep code DRY (Don't Repeat Yourself). • Sass is just plain smarter than CSS.
normalish dynamic blog but rather than parsing content, templates, and tags on each request, Jekyll does this once beforehand and caches the entire website in a folder for serving statically.”
CEO of GitHub, introduced Jekyll with a blog post and released the code. “I was tired of complicated blogging engines...I wanted to write great posts, not...lag behind the latest software release.”
CEO of GitHub, introduced Jekyll with a blog post and released the code. “I was tired of complicated blogging engines...I wanted to write great posts, not...lag behind the latest software release.” “First, all my writing would be stored in a Git repository. Complexity would be kept to an absolute minimum...”
CEO of GitHub, introduced Jekyll with a blog post and released the code. “I was tired of complicated blogging engines...I wanted to write great posts, not...lag behind the latest software release.” “First, all my writing would be stored in a Git repository. Complexity would be kept to an absolute minimum...” “Jekyll is a simple, blog aware, static site generator. It takes a template directory (representing the raw form of a website), runs it through Textile [or Markdown] and Liquid converters, and spits out a complete, static website.”
database calls necessary • Doesn't require a caching layer • Fast • Secure • Easier local testing Organize your code (into templates and partials) for scaling and reusability.
database calls necessary • Doesn't require a caching layer • Fast • Secure • Easier local testing Organize your code (into templates and partials) for scaling and reusability. Jekyll is built into GitHub Pages - host your Jekyll site for free.
database calls necessary • Doesn't require a caching layer • Fast • Secure • Easier local testing Organize your code (into templates and partials) for scaling and reusability. Jekyll is built into GitHub Pages - host your Jekyll site for free. Write in Textile or Markdown.
Headline ### Level Three Headline This a parapraph full of **bold** and *italic* text, and a [link] (http://url.com) as well. * List item 1 * List item 2 Markdown <h1>Level One Headline</h1> <h2>Level Two Headline</h2> <h3>Level Three Headline</h3> <p>This is a paragraph full of <strong>bold</strong> and <em>italic</em> text, and a <a href=”http://url.com”>link</a> as well.</p> <ul> <li>First list item</li> <li>Second list item</li> </ul> Compiled HTML h1. Level One Headline h2. Level Two Headline h3. Level Three Headline This is a paragraph full of *bold* and _italic_ text, and a “link”:http://url.com as well. * List item 1 * List item 2 Textile
that was developed by Shopify for use on their own site. Templating languages include Haml, ERB, Handlebars, Jade, etc. There are 2 types of Liquid markup:
that was developed by Shopify for use on their own site. Templating languages include Haml, ERB, Handlebars, Jade, etc. There are 2 types of Liquid markup: • Output Markup
that was developed by Shopify for use on their own site. Templating languages include Haml, ERB, Handlebars, Jade, etc. There are 2 types of Liquid markup: • Output Markup • Tag Markup
what’s a gem? • Gems are Ruby programs and libraries distributed through RubyGems $ gem install jekyll $ jekyll build “Every GitHub Page is run through Jekyll when you push content to your repo.” GitHub Pages will compile our Jekyll site for us. MAGIC!
serve --watch The jekyll build command compiles our site. jekyll serve fires up a server that will host your _site directory. The --watch flag tells Jekyll to rebuild the site whenever files are modified.
oracle4engineer
amaotone
ryosk7
shinichirokawano
tsukuha
maikamibayashi
cyberagentdevelopers
freee
kymmt90
taddy_919
techniczna
yuu26
marcduiker
michaelherold
jrom
jnunemaker
panda_program
morganepeng
kneath
tammyeverts
mclloyd
marcelosomers
lemiorhan
scottboms
![You did it! Thanks so much for joining us! [email protected]](https://files.speakerdeck.com/presentations/d53e1c00a15c0130e3a03ae6d0237df6/slide_166.jpg){kind=link}