From: Nicolas Coden Date: Wed, 10 Jan 2018 21:56:59 +0000 (+0100) Subject: docs: improve design of package manager installation X-Git-Tag: v6.6.0~55^2~4 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ed5cb75b723520a95ce56afe404a6545d19128bf;p=thirdparty%2Ffoundation%2Ffoundation-sites.git docs: improve design of package manager installation --- diff --git a/docs/assets/img/icons/logo-bower.svg b/docs/assets/img/icons/logo-bower.svg new file mode 100755 index 000000000..f76149c0c --- /dev/null +++ b/docs/assets/img/icons/logo-bower.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/img/icons/logo-composer.svg b/docs/assets/img/icons/logo-composer.svg new file mode 100644 index 000000000..96d276434 --- /dev/null +++ b/docs/assets/img/icons/logo-composer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/img/icons/logo-meteor.svg b/docs/assets/img/icons/logo-meteor.svg new file mode 100755 index 000000000..7d120ceeb --- /dev/null +++ b/docs/assets/img/icons/logo-meteor.svg @@ -0,0 +1 @@ + diff --git a/docs/assets/img/icons/logo-npm.svg b/docs/assets/img/icons/logo-npm.svg new file mode 100644 index 000000000..4330983db --- /dev/null +++ b/docs/assets/img/icons/logo-npm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/img/icons/logo-nuget.svg b/docs/assets/img/icons/logo-nuget.svg new file mode 100644 index 000000000..148a5e166 --- /dev/null +++ b/docs/assets/img/icons/logo-nuget.svg @@ -0,0 +1,20 @@ + + + + + logo_nuget + + + + + + + \ No newline at end of file diff --git a/docs/assets/scss/content/_install.scss b/docs/assets/scss/content/_install.scss new file mode 100644 index 000000000..bb5b79946 --- /dev/null +++ b/docs/assets/scss/content/_install.scss @@ -0,0 +1,4 @@ +.docs-install-vendor-icon { + min-height: rem-calc(64px); + max-width: rem-calc(64px); +} diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 7880b0df1..4e37cc12a 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -23,6 +23,7 @@ $foundation-dark: #074E68 ; $true-white: #fff; @import 'foundation-docs'; +@import 'content/install'; @import 'examples/grid'; @import 'examples/motion-ui'; @import 'examples/off-canvas'; diff --git a/docs/pages/installation.md b/docs/pages/installation.md index 3261afdb5..7d9e59865 100644 --- a/docs/pages/installation.md +++ b/docs/pages/installation.md @@ -4,6 +4,80 @@ description: There are many ways to install Foundation, but if you're just getti video: '6KwsGcEHVTE' --- +## Install with Package Managers + +Foundation is available on npm, Bower, Meteor, and Composer. The package includes all of the source Sass and JavaScript files, as well as compiled CSS and JavaScript, in uncompressed and compressed flavors. + +
+
+ NPM +
+
+
+ + npm install foundation-sites + +
+
+ +
+ Bower +
+
+
+ + bower install foundation-sites + +
+
+ +
+ Meteor +
+
+
+ + meteor add zurb:foundation-sites + +
+
+ +
+ Composer +
+
+
+ + php composer.phar require zurb/foundation + +
+
+ +
+ NuGet +
+
+
+ + Install-Package foundation-sites + +
+
+
+ +Here's what comes in the package. + +``` +├─ scss Source Sass files. Use this folder as a load path in Sass. +├─ js Source JavaScript files. If you're using a build system, make sure `foundation.core.js` is loaded first. +└─ dist Compiled files: + ├─ css * Compiled CSS files. Includes minified and unminified files. + ├─ js * Concatenated JavaScript files. Includes minified and unminified files. + └─ plugins * Standalone JavaScript plugins. +``` + +--- + ## Install with Foundation CLI Not a fan of GUIs? The Node-powered Foundation CLI can install the same template projects for you. @@ -140,29 +214,6 @@ From Foundation 6.4, flex is enabled by default and **only the new XY Grid is av --- -## Install with Package Managers - -Foundation is available on npm, Bower, Meteor, and Composer. The package includes all of the source Sass and JavaScript files, as well as compiled CSS and JavaScript, in uncompressed and compressed flavors. - -- npm: `npm install foundation-sites` -- Bower: `bower install foundation-sites` -- Meteor: `meteor add zurb:foundation-sites` -- Composer: `php composer.phar require zurb/foundation` -- NuGet: `Install-Package foundation-sites` - -Here's what comes in the package. - -``` -├─ scss Source Sass files. Use this folder as a load path in Sass. -├─ js Source JavaScript files. If you're using a build system, make sure `foundation.core.js` is loaded first. -└─ dist Compiled files: - ├─ css * Compiled CSS files. Includes minified and unminified files. - ├─ js * Concatenated JavaScript files. Includes minified and unminified files. - └─ plugins * Standalone JavaScript plugins. -``` - ---- - ## HTML Starter Template Start with this HTML template and adapt it to your needs. Be sure to include the `.no-js` class on the `html` tag of your template. Adding this class prevents [flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) for a number of foundation components.