Skip to content

Commit

Permalink
Merge pull request #6396 from Piterden/fix/src-readme-formatting
Browse files Browse the repository at this point in the history
Fixed some formatting
  • Loading branch information
jlukic authored Jun 18, 2018
2 parents 185b320 + ec7e089 commit 1f34062
Showing 1 changed file with 9 additions and 7 deletions.
16 changes: 9 additions & 7 deletions src/README.md
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

0 comments on commit 1f34062

Please sign in to comment.