From ec7e0897b3a7cf9d45a777fb7eb94abf3cec3042 Mon Sep 17 00:00:00 2001 From: Denis Efremov Date: Thu, 17 May 2018 02:14:16 +0300 Subject: [PATCH] Fixed some formatting --- src/README.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/README.md b/src/README.md index b725d670f8..20d35241d9 100644 --- a/src/README.md +++ b/src/README.md @@ -3,6 +3,7 @@ ### Built-In Tools From the Semantic directory you can setup gulp to build Semantic by running. + ```bash npm install ``` @@ -10,11 +11,12 @@ 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 ``` @@ -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)); ``` @@ -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'; } @@ -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/`. @@ -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 -