Кроме процесса установки здесь еще штук 20 ссылок с аннотациями. После вчерашней установки Jekyll сегодня снова попробовал его в дистрибутиве Bootstrap. К вечеру удалось уложить набор для веб-дизайна (Bootstrap, Jekyll, Grunt... ) в голове... Я уже начал представлять, как же я буду работать... но предстоит еще понять, как подбирать стили с sass, scss, less, stulys. Миксины и прочие прибамбасы постпроцессоров - это все красиво, но чего-то не хватает... Надеюсь, что kompass - это как раз то, чего мне не хватает...
Jekyll по своей сути это движок трансформации текста. Его концепция состоит в следующем: вы передаете текст написанный в выбранном вами формате Markdown (Markdown, Textile и т.д.) или в чистом HTML, а Jekyll форматирует его в соответствии с файлами шаблонов. В ходе этого процесса вы можете настроить как будут выглядеть URL вашего сайта, какие данные будут отражаться в макете и многое другое. Все это делается путем редакции текстовых файлов , финальным продуктом является статический сайт.
Jekyll docs site This directory contains the code for the Jekyll docs site, jekyllrb.com.
jekyllrb.comTransform your plain text into static websites and blogs
Блог на Jekyll и Github Пройдемся по исходникам:
_includes/ (готовые куски html для вставки)
_layouts/ (шаблоны)
_posts/ (статьи)
Шаблоны работают с помощью Liquid
Названия для постов требует строго форматирования аля год–месяц–день–name.format
Формат: textile или markdown.
Liquid is a template engine which was crafted for very specific requirements
GitHub Pages -Hosted directly from your GitHub repository. Just edit, push, and your changes are live. Roll vanilla, or generate a site for your project to quickly get started
What are GitHub Pages? You can create and publish GitHub Pages online using the Automatic Page Generator. If you prefer to work locally, you can use the GitHub Desktop or the command line.
desktop.github.com
Compass — инструмент для эффективной работы с CSS
compass-style.org Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy. If you're not familiar with Sass, Go to sass-lang.com to learn all about how it works.
Compass-Plugins
Scout is a cross-platform app that delivers the power of Sass & Compass into the hands of web designers.
Compass.app is a menubar only app for Sass and Compass. It helps designers compile stylesheets easily without resorting to command line interface.
Fire.app Dead Easy HTML Prototyping
BourbonA simple and lightweight mixin library for Sass. Bourbon is a library of pure Sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.
bourbon.io The animation mixin supports comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule.
susy CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?
Grid Frameworks for Sass The amount of grid systems out in the wild is quite outstanding. Some are super light weight and some are bloated nightmares. With so much choice it’s really hard to decided which one is right and is something that shouldn’t be taken lightly.
Gridle is a fully customizable grid system. To do that, you have to configure your grid with simple options.
Getting Started With Foundation CSS Here's the simplest way to get going. The straight CSS version of Foundation includes everything you need to start hacking away, right now! It's a perfect way to kickstart a new prototype or create a finished product with Foundation.
Compiling Sass into CSS & Creating a Project Sass is a great way to speed up front-end development. SCSS (Sassy CSS) syntax was introduced as "the new main syntax" for Sass and builds on the existing syntax of CSS. We created a SCSS version to allow more friendly and dynamic styling. This version also allows for greater customization than the HTML/CSS version. There are two easy ways our CLI helps you compile SCSS: Compass or Libsass with Grunt.
Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.
The 10 Best SASS Tools for Modern Web Design
Sass (Syntactically Awesome StyleSheets)
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.
sassmeister.com
My Favorite Sass Tools Playgrounds, compilers, Grid Systems, Testing Tools, Libraries
Motion UI A Sass library for creating CSS transitions and animations from your friends at ZURB. Originally integrated into Foundation for Apps, the code is now a standalone library, soon to be used by Foundation for Sites and Foundation for Apps.
Foundation for Sites (Public Beta) This is the in-development version of Foundation for Sites 6.0.
The official repo of the CSS Zen Garden. Pull requests with improvements welcomed, but remember that changes to the HTML file affect the entire archive of 200+ designs. If you're changing the markup, you'll need to commit changes to all designs affected.
The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.
CSS3, Please!
Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way
autoprefixer
caniuse.com
Jade is a template language ... аналого плагинов к Atom, которые вместо div набирают весь тег...
Jade docs
Запускаем сервер jekyll и открываем браузер на 127.0.0.0.1:9001¶
F:\stradorusite\bootstrap\bootstrap-3.3.6 (bootstrap@3.3.6)
λ jekyll serve
Configuration file: F:/stradorusite/bootstrap/bootstrap-3.3.6/_config.yml
Source: docs
Destination: _gh_pages
Incremental build: disabled. Enable with --incremental
Generating...
done in 22.978 seconds.
Auto-regeneration: enabled for 'docs'
Configuration file: F:/stradorusite/bootstrap/bootstrap-3.3.6/_config.yml
Server address: http://0.0.0.0:9001/
Server running... press ctrl-c to stop.
Ставим compass (ruby)¶
C:\Users\alter_000
λ gem update --system
Updating rubygems-update
Fetching: rubygems-update-2.6.2.gem (100%)
Successfully installed rubygems-update-2.6.2
Parsing documentation for rubygems-update-2.6.2
Installing ri documentation for rubygems-update-2.6.2
Installing darkfish documentation for rubygems-update-2.6.2
Done installing documentation for rubygems-update after 5 seconds
Parsing documentation for rubygems-update-2.6.2
Done installing documentation for rubygems-update after 0 seconds
Installing RubyGems 2.6.2
RubyGems 2.6.2 installed
Parsing documentation for rubygems-2.6.2
Installing ri documentation for rubygems-2.6.2
C:\Users\alter_000
λ gem install compass
Fetching: compass-import-once-1.0.5.gem (100%)
Successfully installed compass-import-once-1.0.5
Fetching: multi_json-1.11.2.gem (100%)
Successfully installed multi_json-1.11.2
Fetching: compass-core-1.0.3.gem (100%)
Successfully installed compass-core-1.0.3
Fetching: chunky_png-1.3.5.gem (100%)
Successfully installed chunky_png-1.3.5
Fetching: compass-1.0.3.gem (100%)
Compass is charityware. If you love it, please donate on our behalf at http://umdf.org/compass Thanks!
Successfully installed compass-1.0.3
Parsing documentation for compass-import-once-1.0.5
Installing ri documentation for compass-import-once-1.0.5
Parsing documentation for multi_json-1.11.2
Installing ri documentation for multi_json-1.11.2
Parsing documentation for compass-core-1.0.3
Installing ri documentation for compass-core-1.0.3
Parsing documentation for chunky_png-1.3.5
Installing ri documentation for chunky_png-1.3.5
Parsing documentation for compass-1.0.3
Installing ri documentation for compass-1.0.3
Done installing documentation for compass-import-once, multi_json, compass-core, chunky_png, compass after 11 seconds
5 gems installed
F:\stradorusite
λ compass create compassprojects
directory compassprojects/
directory compassprojects/sass/
directory compassprojects/stylesheets/
create compassprojects/config.rb
create compassprojects/sass/screen.scss
create compassprojects/sass/print.scss
create compassprojects/sass/ie.scss
write compassprojects/stylesheets/ie.css
write compassprojects/stylesheets/print.css
write compassprojects/stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
You may now add and edit sass stylesheets in the sass subdirectory of your project.
Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.
You can configure your project by editing the config.rb configuration file.
You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
1. To compile on demand:
compass compile [path/to/project]
2. To monitor your project for changes and automatically recompile:
compass watch [path/to/project]
More Resources:
* Website: http://compass-style.org/
* Sass: http://sass-lang.com
* Community: http://groups.google.com/group/compass-users/
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
F:\stradorusite
F:\stradorusite
λ compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
После compass watch можно нписать путь к файлу...
Установить расширение Compass также довольно просто:¶
#1. Устанавливаем расширение:
$ gem install {extension}
#2. Добавить в начало файла config.rb в Compass проекте:
require '{extension}'
#3. Подключить расширение:
@import '{extension}';
Sass is a great way to speed up front-end development. SCSS (Sassy CSS) syntax was introduced as "the new main syntax" for Sass and builds on the existing syntax of CSS. We created a SCSS version to allow more friendly and dynamic styling. This version also allows for greater customization than the HTML/CSS version. There are two easy ways our CLI helps you compile SCSS: Compass or Libsass with Grunt.
Далее пробую скопипастить картинку со схемой работы препроцессора, но не тут-то былою Так что, есть резоны кликнуть по последней ссылке
from IPython.display import Image
Image('http://foundation.zurb.com/sites/docs/v/5.5.3/assets/img/images/scssflow.svg')
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий