Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed some formatting #6396

Merged
merged 1 commit into from
Jun 18, 2018
Merged

Fixed some formatting #6396

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions src/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,20 @@
### Built-In Tools

From the Semantic directory you can setup gulp to build Semantic by running.

```bash
npm install
```

Semantic will automatically configure itself using a `post-install` script built into the package.

After set-up can use gulp to build your project's css:

```bash
/* Watch files */
# Watch files
gulp watch

/* Build all files */
# Build all files
gulp build
```

Expand All @@ -27,9 +29,8 @@ Visit the [Getting Started Guide](http://learnsemantic.com/guide/expert.html) fo
Each gulp task can be imported into your own Gulpfile using `require`

```javascript
var
watch = require('path/to/semantic/tasks/watch')
;
const watch = require('path/to/semantic/tasks/watch');

gulp.task('watch ui', 'Watch Semantic UI', watch));
```

Expand All @@ -40,12 +41,14 @@ gulp.task('watch ui', 'Watch Semantic UI', watch));
Before using source files you will need to create a `theme.config` by renaming `theme.config.example`, and a site folder by renaming `_site/` to `site/`

You can then import Semantic from your own LESS files:

```less
/* Import all components */
@import 'src/semantic';
```

To import individual components you will have to create a scope for each import using `& {}`

```less
/* Import a specific component */
& { @import 'src/definitions/elements/button'; }
Expand All @@ -61,7 +64,6 @@ filename | usage | Initial Name
**site/** | folder storing all your site's variables and css overrides for each UI component | _site/
**semantic.json** | stores folder paths for build tools and current installed version for updates. Only necessary when using build tools | semantic.json.example


### Workflow

You will only need to use Semantic's build tools while refining your UI. When designing pages, you can rely on the compiled css packages in `dist/`.
Expand Down Expand Up @@ -119,9 +121,9 @@ You may also specify your own custom LESS in `site/elements/button.overrides`. T
You can modify `theme.config` to use any prepackaged theme available in `src/themes/`.

For example you can modify `theme.config` to use a `github` button theme by changing

```less
@button: 'github';
```

View the [Customization Guide](http://learnsemantic.com/developing/customizing.html) to learn more