Кажется нашел именно то, что надо мне именно сейчас. На сайте foundation есть руководство по установке, команда compass create found-test-dir -r zurb-foundation --using foundation создает странную структуру папок (я в предыдущем посте научился использовать add_import_path для подключения в конфиге из залитой в kompass папки foundation или bootstrap).
Здесь же и документация scss с описанием переменных и миксинов для каждого компонента. Здесь же и видео (сильно небритый очкарик показывает свои крупные планы при каждом удобном случае), здесь же и 8 штук "responsive templates" (дабы я мог запомнить классы каркаса)... Есть еще и подписка от учебного центра, вот пример "Build a sticky navigation with Foundation for Sites 6"
Creating your first projectStart using Foundation the way you want, with more control than ever before. We've made it really easy to install using Compass so you'll need a little bit of knowledge before you get going. Visit the Compass and Sass sites to learn the basics if you don't already know them.
Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.
Video list Get started building amazing websites with Foundation
We want to get you up and running as quickly as possible so you can build great things! Check out these resources below to learn the ins and outs of Foundation.
Responsive templates to kick off your projects. You can build tons of layouts with the Foundation grid. Without using a single line of CSS outside of what comes with Foundation, we've created eight layouts for you to start from and build on.
Build a sticky navigation with Foundation for Sites 6 The first step is to wrap an element in the sticky container. This is a data-attribute that tells the Foundation JavaScript to read the height of the element within it. This will help in situations where you want the Sticky plugin to stop being sticky. An example would be a sticky sidebar that needs to stop before it overlaps the footer.
CSS Triangle
Оказывается, есть gem install zurb-foundation¶
F:\stradorusite>mkdir foundation
F:\stradorusite>cd foundation
F:\stradorusite\foundation>gem install zurb-foundation
Fetching: zurb-foundation-4.3.2.gem (100%)
Successfully installed zurb-foundation-4.3.2
Parsing documentation for zurb-foundation-4.3.2
Installing ri documentation for zurb-foundation-4.3.2
Done installing documentation for zurb-foundation after 2 seconds
1 gem installed
F:\stradorusite\foundation>
Начинаем повторять вслед за "Creating your first project"¶
Compass makes it really easy to start a new project. Since you've installed the Foundation gem by now, you now have Compass, Sass and a few other necessary dependencies available at your fingertips.
F:\stradorusite\foundation>compass create found-test -r zurb-foundation --using foundation
directory found-test/
directory found-test/javascripts/foundation/
directory found-test/javascripts/vendor/
directory found-test/sass/
directory found-test/stylesheets/
create found-test/config.rb
create found-test/sass/_normalize.scss
create found-test/sass/_settings.scss
create found-test/sass/app.scss
create found-test/humans.txt
create found-test/robots.txt
create found-test/MIT-LICENSE.txt
create found-test/javascripts/foundation/foundation.abide.js
create found-test/javascripts/foundation/foundation.alerts.js
create found-test/javascripts/foundation/foundation.clearing.js
create found-test/javascripts/foundation/foundation.cookie.js
create found-test/javascripts/foundation/foundation.dropdown.js
create found-test/javascripts/foundation/foundation.forms.js
create found-test/javascripts/foundation/foundation.interchange.js
create found-test/javascripts/foundation/foundation.joyride.js
create found-test/javascripts/foundation/foundation.magellan.js
create found-test/javascripts/foundation/foundation.orbit.js
create found-test/javascripts/foundation/foundation.placeholder.js
create found-test/javascripts/foundation/foundation.reveal.js
create found-test/javascripts/foundation/foundation.section.js
create found-test/javascripts/foundation/foundation.tooltips.js
create found-test/javascripts/foundation/foundation.topbar.js
create found-test/javascripts/vendor/custom.modernizr.js
create found-test/javascripts/vendor/jquery.js
create found-test/javascripts/vendor/zepto.js
create found-test/javascripts/foundation/foundation.js
create found-test/index.html
write found-test/stylesheets/app.css
directory found-test/stylesheets/foundation
write found-test/stylesheets/foundation/foundation.css
write found-test/stylesheets/foundation/normalize.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/
w00t! You're using ZURB Foundation, now go forth and rock 'n roll!
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="/stylesheets/_normalize.css" rel="stylesheet" type="text/css" />
<link href="/stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
</head>
F:\stradorusite\foundation>
Далее я решил сначала прочитать все мануалы, потом SASS мануалы¶
Так что практикум прерываем... А после того, как я уложу в голове все основы, надо бы не забыть разобраться с особенностями этой gem-заливки foundation. В приложении структура папок и фалов.
Приложение¶
F:\stradorusite\foundation>tree /F
Структура папок тома MYLINUXLIVE
Серийный номер тома: CE7F-8134
F:.
├───found-test
│ │ config.rb
│ │ humans.txt
│ │ robots.txt
│ │ MIT-LICENSE.txt
│ │ index.html
│ │
│ ├───javascripts
│ │ ├───foundation
│ │ │ foundation.abide.js
│ │ │ foundation.alerts.js
│ │ │ foundation.clearing.js
│ │ │ foundation.cookie.js
│ │ │ foundation.dropdown.js
│ │ │ foundation.forms.js
│ │ │ foundation.interchange.js
│ │ │ foundation.joyride.js
│ │ │ foundation.magellan.js
│ │ │ foundation.orbit.js
│ │ │ foundation.placeholder.js
│ │ │ foundation.reveal.js
│ │ │ foundation.section.js
│ │ │ foundation.tooltips.js
│ │ │ foundation.topbar.js
│ │ │ foundation.js
│ │ │
│ │ └───vendor
│ │ custom.modernizr.js
│ │ jquery.js
│ │ zepto.js
│ │
│ ├───sass
│ │ _normalize.scss
│ │ _settings.scss
│ │ app.scss
│ │
│ └───stylesheets
│ │ app.css
│ │
│ └───foundation
│ foundation.css
│ normalize.css
│
└───.sass-cache
├───46da27f1bdb251bd1d117b6675fc2ea8e9eb4c57
│ app.scssc
│ _settings.scssc
│ _normalize.scssc
│
├───a8be4fe2492032cfe8e30b00475fe8dcd0e8e719
│ foundation.scssc
│ normalize.scssc
│
├───e3906d10bc33cd51b1e86fcc1ed63ca64fbb85c5
│ _variables.scssc
│
└───06be40c983ba9211ef1f354fd04f9799e9721771
_custom-forms.scssc
_global.scssc
_pricing-tables.scssc
_grid.scssc
_keystrokes.scssc
_visibility.scssc
_labels.scssc
_panels.scssc
_block-grid.scssc
_inline-lists.scssc
_type.scssc
_pagination.scssc
_buttons.scssc
_progress-bars.scssc
_forms.scssc
_button-groups.scssc
_side-nav.scssc
_switch.scssc
_dropdown-buttons.scssc
_sub-nav.scssc
_tables.scssc
_split-buttons.scssc
_magellan.scssc
_flex-video.scssc
_thumbs.scssc
_section.scssc
_tooltips.scssc
_top-bar.scssc
_dropdown.scssc
_orbit.scssc
_reveal.scssc
_joyride.scssc
_clearing.scssc
_alert-boxes.scssc
_breadcrumbs.scssc
F:\stradorusite\foundation>
Посты чуть ниже также могут вас заинтересовать
2 комментария:
Вот альтернативный вариант импорта foundation в проект
http://foundation.zurb.com/sites/docs/sass.html
Foundation for Sites can be compiled with Ruby Sass and libsass. We tend to stick to the latest versions of both compilers when possible.
If you're using Compass, open your project's config.rb and add the import path there:
Copyadd_import_path "node_modules/foundation-sites/scss"
Отправить комментарий