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

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
guide/english/semantic-ui/index.md Normal file
View File

@ -0,0 +1,101 @@
---
title: Semantic UI
---
## Semantic UI
#### Introduction
Semantic UI is a front-end development framework similar to bootstrap designed for theming. It contains pre-built semantic components that helps create beautiful and responsive layouts using human-friendly HTML.
According to the Semantic UI website, the framework utilizes concise HTML, intuitive JavaScript, and simplified debugging to make a front-end development a fun and delightful experience. And it integrates with React, Angular, Meteor, Ember and many other frameworks to help organize UI layer alongside application logic.
#### Version History
The first pre-release appear on github on September 2013, created by [Jack Lukic](https://github.com/jlukic).
Semantic UI `1.x` was first released in November 2014 with breaking changes to previous pre-releases.
Semantic UI `2.x` was first released in June 2015 and introduced new ui, several bug fixes, enhancements, and default theme improvements.
#### Browser Support
The current version `2.2.x` support the following browsers
* Last 2 Versions FF, Chrome, Safari Mac
* IE 11+
* Android 4.4+, Chrome for Android 44+
* iOS Safari 7+
* Microsoft Edge 12+
#### Installation
There are several ways of installing Semantic UI, some of the simplest ways are as follows:
1. **Via Content Delivery Network (CDN)**
It is by far the easiest for beginners. Create an HTML file as below
```html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<!-- Add custom stylesheet here -->
</head>
<body>
<!-- Write your html code here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
</body>
</html>
```
`NOTE:` The above CDN link on line 5, will include all the available components in Semantic UI. If you want to install a specific component, [click here](https://cdnjs.com/libraries/semantic-ui) to see its respective CDN link.
2. **Using Build Tools**
This will assume you're using Ubuntu Linux OS with `node` and `npm` installed, for other operating systems [click here](https://semantic-ui.com/introduction/getting-started.html)
In your project directory, install gulp globally using npm
```
npm install -g gulp
```
Install Semantic UI
```
npm install semantic-ui --save
cd semantic/
gulp build
```
Include in HTML
```html
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
```
Update Via npm
```
npm update
```
3. **Integrating with other Frameworks**
You can integrate Semantic UI with other Front-end development frameworks like React, Angular, Ember or Meteor. [Click here](https://semantic-ui.com/introduction/integrations.html) for more informations and integration instructions.
#### More Information
Semantic UI has thorough and very well organized documentation, that will gets you up and running in no time. The following links will be helpful in your Semantic UI journey.
* [Semantic UI Website](https://semantic-ui.com/)
* [Getting Started with Semantic UI](https://semantic-ui.com/introduction/getting-started.html)
* [Sample Semantic UI Templates](https://semantic-ui.com/usage/layout.html#pages)
* [Customizing and Creating Semantic UI Themes](http://learnsemantic.com/)

100
guide/english/semantic-ui/semantic-ui-buttons/index.md Normal file
View File

@ -0,0 +1,100 @@
---
title: Semantic UI Buttons
---
## Semantic UI Buttons
A button indicates a possible user action. Semantic UI provides an easy-to-use syntax that simplifies not only the styling of a button, but also the natural language semantics.
#### How to Use
Semantic UI class is simply added to a button element, various example were given below to indicate how to use it.
#### Types
* Standard Button
Standard Semantic UI button
```
<button class="ui button">Standard Button</button>
```
* Emphasis Button
A button with a different level of emphasis
```
<button class="ui primary button">
```
Other emphasis classes are `secondary`, `positive`, and `negative`
* Animated Button
A button with animation, showing hidden contents
```
<div class="ui animated fade button" tabindex="0">
<div class="visible content">Sign-up for a Pro account</div>
<div class="hidden content">$12.99 a month</div>
</div>
```
The property `tabindex="0"` above makes the button keyboard focusable, since the `<button>`tag was not used.
* Labeled Button
A button alongside a label
```
<div class="ui labeled button" tabindex="0">
<div class="ui button"><i class="heart icon"></i> Like</div>
<a class="ui basic label">2,048</a>
</div>
```
the element `<i>` is used to specify an icon, here it is a heart icon `<i class="heart icon"></i>` alongside basic label `<a class="ui basic label">2,048</a>`
* Icon Button
A Semantic UI button can be just an icon
```
<button class="ui icon button">
<i class="camera icon"></i>
</button>
```
The above is just a camera icon
#### Groups
Semantic UI buttons can exist in a group
```
<div class="ui buttons">
<button class="ui button">One</button>
<button class="ui button">Two</button>
<button class="ui button">Three</button>
</div>
```
#### Content
Semantic UI buttons can contain conditionals
```
<div class="ui buttons">
<button class="ui positive button">Yes</button>
<div class="or" data-text="or"></div>
<button class="ui negative button">No</button>
</div>
```
#### States
Semantic UI buttons can exist in different states, `active`, `disabled`, `loading`. Simply add a state name to the `class` attribute` of `<button>` element.
```
<button class="ui loading button">Loading</button>
```
#### Variations
Semantic UI buttons exist in variety of sizes, `mini`, `tiny`, `small`, `medium`, `large`, `big`, `huge`, and `massive`.
```
<button class="ui massive button">Massive Button</button>
```
There is a lot more about Semantic UI buttons, visit the provided link in More Information section to learn more.
#### More Information:
* [Semantic UI Buttons Docs](https://semantic-ui.com/elements/button.html)