Пытаюсь понять общие приемы front-end в дистрибутивах Jektll, Foundation, Bootstrap

Скопировал с Гитхаба несколько вариантов фреймворков. Здесь пытаюсь сравнить структуру папок, подходы и методологии CSS, фреймфорки для верстки, ... с учетом того, что Bootstrap переходит на SASS. Здесь еще фрагменты _config.yml (jekyll)

jekyllbootstrap.com/lessonsAfter installing jekyll you'll need to format your website directory in a way jekyll expects. Jekyll-bootstrap conveniently provides the base directory format.
Directory structure -jekyllrb.com Jekyll 3 and Foundation 6 The following tutorial goes through the process of adding Foundation to a Jekyll website and having Jekyll automatically build all the necessary assets. It uses Jekyll 3.0.1 and Foundation 6, and may need to be adjusted for future versions
Готовимся к Jekyll 3 and Foundation, вспоминаем, где уже установлен Jekyll Bootstrap
bootstrap-sass Sass By default all of Bootstrap is imported. You can also import components explicitly. To start with a full list of modules copy _bootstrap.scss file into your assets as _bootstrap-custom.scss . Then comment out components you do not want from _bootstrap-custom . In the application Sass file, replace @import 'bootstrap' with: @import 'bootstrap-custom';

Сначала просто jekyll¶

In [ ]:

F:\stradorusite\jekyll\test_jek_1>tree /F
Структура папок тома MYLINUXLIVE
Серийный номер тома: CE7F-8134
F:.
│   .gitignore
│   about.md
│   feed.xml
│   index.html
│   _config.yml
│
├───css
│       main.scss
│
├───_includes
│       footer.html
│       head.html
│       header.html
│       icon-github.html
│       icon-github.svg
│       icon-twitter.html
│       icon-twitter.svg
│
├───_layouts
│       default.html
│       page.html
│       post.html
│
├───_posts
│       2016-04-30-welcome-to-jekyll.markdown
│
├───_sass
│       _base.scss
│       _layout.scss
│       _syntax-highlighting.scss
│
├───.sass-cache
│   └───e783c06d9774e6d530b8878dc24ffd067816a73b
│           _base.scssc
│           _layout.scssc
│           _syntax-highlighting.scssc
│
└───_site
    │   feed.xml
    │   index.html
    │
    ├───about
    │       index.html
    │
    ├───css
    │       main.css
    │
    └───jekyll
        └───update
            └───2016
                └───04
                    └───30
                            welcome-to-jekyll.html


F:\stradorusite\jekyll\test_jek_1>

И уже установленная (в марте) Jekyll с bootstrap¶

In [ ]:

F:\stradorusite\jekyll\test_jek_1>dir F:\stradorusite\bootstrap\atom_with_bootsrap\bootstrap-3.3.6
 Том в устройстве F имеет метку MYLINUXLIVE
 Серийный номер тома: CE7F-8134

 Содержимое папки F:\stradorusite\bootstrap\atom_with_bootsrap\bootstrap-3.3.6

19.02.2016  14:34    <DIR>          .
19.02.2016  14:34    <DIR>          ..
24.11.2015  22:37               232 .editorconfig
24.11.2015  22:37               363 .gitattributes
24.11.2015  22:37               421 .gitignore
24.11.2015  22:37                79 .hound.yml
24.11.2015  22:37             3 289 .travis.yml
24.11.2015  22:37               425 CHANGELOG.md
24.11.2015  22:37                17 CNAME
24.11.2015  22:37            13 708 CONTRIBUTING.md
24.11.2015  22:37            15 108 Gruntfile.js
24.11.2015  22:37             1 084 LICENSE
24.11.2015  22:37             7 489 README.md
24.11.2015  22:37             1 456 _config.yml
24.11.2015  22:37               641 bower.json
24.11.2015  22:37               743 composer.json
24.11.2015  22:37    <DIR>          dist
24.11.2015  22:37    <DIR>          docs
24.11.2015  22:37    <DIR>          fonts
24.11.2015  22:37    <DIR>          grunt
24.11.2015  22:37    <DIR>          js
24.11.2015  22:37    <DIR>          less
24.11.2015  22:37    <DIR>          nuget
24.11.2015  22:37               964 package.js
24.11.2015  22:37             2 073 package.json
24.11.2015  22:37    <DIR>          test-infra
16.03.2016  22:42    <DIR>          _gh_pages
21.03.2016  20:06    <DIR>          mytest_with_atom
              16 файлов         48 092 байт
              12 папок   2 467 028 992 байт свободно

F:\stradorusite\jekyll\test_jek_1>

Теперь Jekyll с Foundation¶

In [ ]:

 Содержимое папки F:\stradorusite\foundation\jekyll\jekyll-foundation

29.04.2016  21:55    <DIR>          .
29.04.2016  21:55    <DIR>          ..
29.04.2016  21:55               480 .babelrc
29.04.2016  21:55                38 .bowerrc
29.04.2016  21:55               254 .editorconfig
29.04.2016  21:55               571 .gitignore
29.04.2016  21:55             1 586 .htaccess
29.04.2016  21:55               339 .travis.yml
29.04.2016  21:55               183 Gemfile
29.04.2016  21:55             1 063 LICENSE.md
29.04.2016  21:55               330 Makefile
29.04.2016  21:55             1 183 README.md
29.04.2016  21:55               834 _config.yml
29.04.2016  21:55    <DIR>          _data
29.04.2016  21:55    <DIR>          _includes
29.04.2016  21:55    <DIR>          _layouts
29.04.2016  21:55    <DIR>          _pages
29.04.2016  21:55    <DIR>          _posts
29.04.2016  21:55    <DIR>          assets
29.04.2016  21:55    <DIR>          blog
29.04.2016  21:55               271 bower.json
29.04.2016  21:55               116 composer.json
29.04.2016  21:55             1 099 feed.xml
29.04.2016  21:55    <DIR>          gulp
29.04.2016  21:55               150 gulpfile.js
29.04.2016  21:55             1 821 package.json
29.04.2016  21:55                15 robots.txt
29.04.2016  22:04    <DIR>          node_modules
29.04.2016  22:20    <DIR>          .bundle
29.04.2016  23:29               877 Gemfile.lock
29.04.2016  23:40    <DIR>          _site
29.04.2016  23:40             7 414 .jekyll-metadata
              19 файлов         18 624 байт
              13 папок   2 467 028 992 байт свободно

F:\stradorusite\jekyll\test_jek_1>

Вспоминаем, что там было с Bootsrap¶

In [ ]:

F:\stradorusite\bootstrap\atom_with_bootsrap\bootstrap-3.3.6>jekyll serve
Configuration file: F:/stradorusite/bootstrap/atom_with_bootsrap/bootstrap-3.3.6/_config.yml
            Source: docs
       Destination: _gh_pages
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 22.103 seconds.
 Auto-regeneration: enabled for 'docs'
Configuration file: F:/stradorusite/bootstrap/atom_with_bootsrap/bootstrap-3.3.6/_config.yml
    Server address: http://0.0.0.0:9001/
  Server running... press ctrl-c to stop.

In [ ]:

# %load F:/stradorusite/bootstrap/atom_with_bootsrap/bootstrap-3.3.6/_config.yml
# Dependencies
markdown:         kramdown
highlighter:      rouge

# Permalinks
permalink:        pretty

# Server
source:           docs
destination:      _gh_pages
host:             0.0.0.0
port:             9001
url:              http://getbootstrap.com
encoding:         UTF-8

# Custom vars
current_version:  3.3.6
repo:             https://github.com/twbs/bootstrap
sass_repo:        https://github.com/twbs/bootstrap-sass

download:
  source:         https://github.com/twbs/bootstrap/archive/v3.3.6.zip
  dist:           https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
  sass:           https://github.com/twbs/bootstrap-sass/archive/v3.3.6.tar.gz

blog:             http://blog.getbootstrap.com
expo:             http://expo.getbootstrap.com

cdn:
  # See https://www.srihash.org for info on how to generate the hashes
  css:            https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  css_hash:       "sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
  css_theme:      https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css
  css_theme_hash: "sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX"
  js:             https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
  js_hash:        "sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ=="

И весь сайт прекрасно работает на http://localhost:9001/ (полный аналог вот этого http://getbootstrap.com)

In [ ]:

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework 
                                 for faster and easier web development.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<title>
  
    Components · Bootstrap
  
</title>

<!-- Bootstrap core CSS -->

<style class="anchorjs"></style>
<link href="../dist/css/bootstrap.css" rel="stylesheet">


  <!-- Optional Bootstrap Theme -->

  <link id="bs-theme-stylesheet" href="data:text/css;charset=utf-8," rel="stylesheet" data-href="../dist/css/bootstrap-theme.css">



<!-- Documentation extras -->

<link href="../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="../assets/css/src/pygments-manni.css" rel="stylesheet">
<link href="../assets/css/src/docs.css" rel="stylesheet">

<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script id="gauges-tracker" src="//secure.gaug.es/track.js" async="" data-site-id="4f0dc9fef5a1f55508000013"></script>
<script src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ" async=""></script>
<script src="//www.google-analytics.com/analytics.js" async=""></script>
<script src="../assets/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/favicon.ico" rel="icon">

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-146052-10', 'getbootstrap.com');
  ga('send', 'pageview');
</script>

  <script id="_carbonads_projs" src="//srv.carbonads.net/ads/C6AILKT.json?segment=placement:getbootstrapcom&amp;
    callback=_carbonads_go" type="text/javascript">
  </script>
  <script src="//fallbacks.carbonads.com/home/e99a260b94849497ea962f674f0aebd9/?146202416" type="text/javascript"></script>
    <style>
  .carbonad{display:block;background:#fdfdfd;background-image:-moz-linear-gradient(top,#f8f8f8,#fdfdfd);
            background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f8f8f8),color-stop(1,#fdfdfd));
            border:1px solid #d5d5d5;
            font-family:Lucida Grande,Arial,Helvetica,sans-serif;
            font-size:11px;
            height:118px;
            line-height:15px;overflow:hidden;width:300px}
  .carbonad-img{border:none;display:inline;float:left;height:100px;margin:9px;width:130px}
  .carbonad-text{display:inline;float:left;width:142px;padding-top:13px}
  .carbonad-text a{color:#000;text-decoration:none;text-transform:none;}
  .carbonad-tag{float:left;margin-top:9px;text-align:center;width:142px;color:#999}
  .carbonad-tag a{color:#999;text-decoration:none}
  </style>
    </head>

Ага, все документы для jekyll в подпапке docs

In [5]:

!dir F:\stradorusite\bootstrap\atom_with_bootsrap\bootstrap-3.3.6\docs

 ’®¬ ў гбва®©б⢥ F Ё¬ҐҐв ¬ҐвЄг MYLINUXLIVE
 ‘ҐаЁ©­л© ­®¬Ґа ⮬ : CE7F-8134

 ‘®¤Ґа¦Ё¬®Ґ Ї ЇЄЁ F:\stradorusite\bootstrap\atom_with_bootsrap\bootstrap-3.3.6\docs

19.02.2016  14:34    <DIR>          .
19.02.2016  14:34    <DIR>          ..
24.11.2015  22:37            19я466 LICENSE
24.11.2015  22:37    <DIR>          _data
24.11.2015  22:37    <DIR>          _includes
24.11.2015  22:37    <DIR>          _jade
24.11.2015  22:37    <DIR>          _layouts
24.11.2015  22:37    <DIR>          _plugins
17.03.2016  19:29             7я192 about.html
24.11.2015  22:37             6я140 apple-touch-icon.png
24.11.2015  22:37    <DIR>          assets
24.11.2015  22:37             1я702 browser-bugs.html
24.11.2015  22:37             1я037 components.html
24.11.2015  22:37               543 css.html
24.11.2015  22:37            12я975 customize.html
24.11.2015  22:37    <DIR>          dist
24.11.2015  22:37    <DIR>          examples
24.11.2015  22:37             5я430 favicon.ico
24.11.2015  22:37             1я068 getting-started.html
24.11.2015  22:37             3я556 index.html
24.11.2015  22:37               574 javascript.html
24.11.2015  22:37            16я786 migration.html
24.11.2015  22:37               123 robots.txt
24.11.2015  22:37               749 sitemap.xml
              14 д ©«®ў         77я341 Ў ©в
              10 Ї Ї®Є   2я467я016я704 Ў ©в бў®Ў®¤­®

А где же сборки страниц? Ага, их замаскировали в html:

In [ ]:

# %load F:\\stradorusite\\bootstrap\\atom_with_bootsrap\\bootstrap-3.3.6\\docs\\components.html
---
layout: default
title: Components
slug: components
lead: "Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more."
---


{% include components/glyphicons.html %}
{% include components/dropdowns.html %}
{% include components/button-groups.html %}
{% include components/button-dropdowns.html %}
{% include components/input-groups.html %}
{% include components/navs.html %}
{% include components/navbar.html %}
{% include components/breadcrumbs.html %}
{% include components/pagination.html %}
{% include components/labels.html %}
{% include components/badges.html %}
{% include components/jumbotron.html %}
{% include components/page-header.html %}
{% include components/thumbnails.html %}
{% include components/alerts.html %}
{% include components/progress-bars.html %}
{% include components/media.html %}
{% include components/list-group.html %}
{% include components/panels.html %}
{% include components/responsive-embed.html %}
{% include components/wells.html %}

Посты чуть ниже также могут вас заинтересовать