gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): move guide to english directory

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-12 04:28:46 +05:30
committed by mrugesh mohapatra
parent 3a270cab98
commit 73a97354e1
4289 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
client/src/pages/guide/english/css/css-frameworks/css-framework-bootstrap/index.md Normal file
View File

@@ -0,0 +1,63 @@
---
title: CSS Framework Bootstrap
---
# CSS Framework Bootstrap
Bootstrap is the most popular CSS framework for developing responsive, mobile first projects for the web.
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Bootstrap library. We have used a CDN in this example, but you can checkout other ways of installing Bootstrap <a href='http://getbootstrap.com/getting-started/#download' target='_blank' rel='nofollow'>here</a>.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
```
## UPDATE - Bootstrap 4
Here is the simple HTML template used in the Bootstrap 4 CSS & Javascript framework. Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
```
That’s all you need for overall page requirements in the new version of Bootstrap.
## Learning Resources
* Checkout the official Bootstrap 4 Docs <a href="https://v4-alpha.getbootstrap.com" target="_blank">here</a>
* The official documentation for Bootstrap is available <a href='http://getbootstrap.com/components/' target='_blank' rel='nofollow'>here</a>.
* Checkout Bootstrap's open source GitHub repository <a href='https://github.com/twbs/bootstrap' target='_blank' rel='nofollow'>here</a>.
* At <a href='https://www.freecodecamp.com/' target='_blank' rel='nofollow'>FreeCodeCamp</a>, we teach Bootstrap as part of our curriculum.

32
client/src/pages/guide/english/css/css-frameworks/css-framework-bulma/index.md Normal file
View File

@@ -0,0 +1,32 @@
---
title: CSS Framework Bulma
---
# CSS Framework Bulma
Bulma is a modern CSS framework based on <a href='http://forum.freecodecamp.com/t/css-flexbox-tips-and-tricks' target='_blank' rel='nofollow'>Flexbox</a> and highly customizable using <a href='http://sass-lang.com/' target='_blank' rel='nofollow'>Sass</a> (SCSS).
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS for the Bulma library.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.23/css/bulma.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
</body>
</html>
```
We have used a CDN in this example, but you can checkout other ways of installing Bulma <a href='http://bulma.io/documentation/overview/start/' target='_blank' rel='nofollow'>here</a>.
## Learning Resources
* The official documentation for Bulma is available <a href='http://bulma.io/documentation/overview/start/' target='_blank' rel='nofollow'>here</a>.
* Checkout Bulma's open source GitHub repository <a href='https://github.com/jgthms/bulma' target='_blank' rel='nofollow'>here</a>.

37
client/src/pages/guide/english/css/css-frameworks/css-framework-foundation/index.md Normal file
View File

@@ -0,0 +1,37 @@
---
title: CSS Framework Foundation
---
# CSS Framework Foundation
[Foundation](http://foundation.zurb.com/) is an open-source, mobile first CSS framework created by [Zurb](https://zurb.com/).
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Foundation library.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Foundation Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
</body>
</html>
```
This example makes use of a CDN that loads the default settings. If you'd like to customize the grid layout, change the colors or add and remove components you can do so on the Foundation [download](http://foundation.zurb.com/sites/download/) page.
#### Learning Resources
1. [Foundation Documentation](http://foundation.zurb.com/sites/docs/)
1. [List of Foundation Tutorials](https://github.com/zurb/foundation-sites)
1. [Foundation Source Files on GitHub](http://foundation.zurb.com/learn/tutorials.html)
1. [DevTips YouTube Series on Foundation Grid](https://www.youtube.com/playlist?list=PLqGj3iMvMa4LJo_lBMTJwAlQRElulSeL8)

31
client/src/pages/guide/english/css/css-frameworks/css-framework-material-design-lite/index.md Normal file
View File

@@ -0,0 +1,31 @@
---
title: CSS Framework Material Design Lite
---
# CSS Framework Material Design Lite
Material Design Lite lets you add a Material Design look and feel to your websites. It aims to optimize for cross-device use.
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS for the MDL library.
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
</body>
</html>
```
We have used a CDN in this example, but you can checkout other ways of installing MDL <a href='https://getmdl.io/started/index.html' target='_blank' rel='nofollow'>here</a>.
### Learning Resources
* The official documentation for MDL is available <a href='https://getmdl.io/started/index.html' target='_blank' rel='nofollow'>here</a>.
* Checkout MDL's open source GitHub repository <a href='https://github.com/google/material-design-lite' target='_blank' rel='nofollow'>here</a>.

38
client/src/pages/guide/english/css/css-frameworks/css-framework-materialize/index.md Normal file
View File

@@ -0,0 +1,38 @@
---
title: CSS Framework Materialize
---
# CSS Framework Materialize
Materialize is a Responsive CSS framework based on Google's <a href='https://design.google.com/spec/' target='_blank' rel='nofollow'>Material Design</a> Language.
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Materialize library.
```html
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<h1>Hello World!</h1>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
```
We have used a CDN in this example, but you can checkout other ways of installing Materialize <a href='http://materializecss.com/getting-started' target='_blank' rel='nofollow'>here</a>.
## Learning Resources
* The official documentation for Materialize is available <a href='www.materializecss.com/' target='_blank' rel='nofollow'>here</a>.
* Checkout Materialize's open source GitHub repository <a href='https://github.com/Dogfalo/materialize' target='_blank' rel='nofollow'>here</a>.
* <a href='https://scotch.io/tutorials/make-material-design-websites-with-the-materialize-css-framework' target='_blank' rel='nofollow'>Here</a> is a handy tutorial on using Materialize.

31
client/src/pages/guide/english/css/css-frameworks/css-framework-semanticui/index.md Normal file
View File

@@ -0,0 +1,31 @@
---
title: CSS Framework Semantic UI
---
# CSS Framework Semantic UI
Semantic UI is one of the most popular CSS framework for developing responsive, mobile first projects for the web.
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Semantic UI library. We have used a CDN in this example, but you can checkout other ways of installing Semantic UI <a href='https://semantic-ui.com/introduction/getting-started.html' target='_blank' rel='nofollow'>here</a>.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Semantic UI Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.js"></script>
</body>
</html>
```
## Learning Resources
* The official documentation for Semantic UI is available <a href='https://semantic-ui.com/introduction/getting-started.html' target='_blank' rel='nofollow'>here</a>.
* Checkout Semantic UI's open source GitHub repository <a href='https://github.com/Semantic-Org/Semantic-UI' target='_blank' rel='nofollow'>here</a>.

37
client/src/pages/guide/english/css/css-frameworks/css-framework-skeleton/index.md Normal file
View File

@@ -0,0 +1,37 @@
---
title: CSS Framework Skeleton
---
# CSS Framework Skeleton
Skeleton is a dead simple boilerplate to kickstart any responsive project.
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS for the Skeleton library.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skeleton Template</title>
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
```
<kbd>[![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/31bd555700f1ee85bb4ddcacf595f0dfd8a16254.png) **JSBin Demo**](http://jsbin.com/sekojaxali/edit?html,output)</kbd>
We have used a CDN in this example, but you can checkout other ways of installing Skeleton <a href='https://github.com/dhg/Skeleton#getting-started' target='_blank' rel='nofollow'>here</a>.
## Learning Resources
* ![:point_right:](//forum.freecodecamp.com/images/emoji/emoji_one/point_right.png?v=2 ":point_right:") <a href='http://getskeleton.com/#grid' target='_blank' rel='nofollow'>**`Official Documentation`**</a> of Skeleton.
* Checkout Skeleton's open source GitHub repository <a href='https://github.com/dhg/Skeleton' target='_blank' rel='nofollow'>here</a>.
* <a href='http://getskeleton.com/#examples' target='_blank' rel='nofollow'>Here</a> are some examples of how Skeleton was used on different websites.

32
client/src/pages/guide/english/css/css-frameworks/css-frameworks-uikit/index.md Normal file
View File

@@ -0,0 +1,32 @@
---
title: CSS Framework UIKit
---
## CSS Framework UIKit
UIKit is A lightweight and modular front-end framework for developing fast and powerful web interfaces.
### Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS for the UIKit library.
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/jquery.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
</head>
<body>
</body>
</html>
```
We have used a CDN in this example, but you can checkout other ways of installing UIKit <a href='https://getuikit.com/docs/introduction' target='_blank' rel='nofollow'>here</a>.
### Learning Resources
* The official documentation for UIKit is available <a href='https://getuikit.com/docs/introduction' target='_blank' rel='nofollow'>here</a>.
* Checkout UIKit's open source GitHub repository <a href='https://github.com/uikit/uikit' target='_blank' rel='nofollow'>here</a>.

10
client/src/pages/guide/english/css/css-frameworks/index.md Normal file
View File

@@ -0,0 +1,10 @@
---
title: CSS Frameworks
---
## CSS Frameworks
CSS frameworks provide building blocks to allow developers to rapidly build a layout using a common set of components. These may include a reset style sheet, a grid framework, typography and / or icon fonts, or JavaScript libraries. Some CSS frameworks are compiled from SASS or LESS.
CSS frameworks are extremely popular for front-end development; one notable framework, Bootstrap, is currently the most-starred project on GitHub, with over one hundred thousand stars and fifty thousand forks.
In this section, we introduce you to some of the most popular CSS frameworks in use today.