https://github.com/superfly-css/superfly-css-task-test
Test task
https://github.com/superfly-css/superfly-css-task-test
Last synced: about 1 year ago
JSON representation
Test task
- Host: GitHub
- URL: https://github.com/superfly-css/superfly-css-task-test
- Owner: superfly-css
- License: mit
- Created: 2015-10-20T05:11:48.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-03-13T20:19:12.000Z (over 9 years ago)
- Last Synced: 2025-04-15T06:46:28.414Z (about 1 year ago)
- Language: JavaScript
- Size: 16.6 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# superfly-css-task-test
The [superfly-css-task-test](https://github.com/superfly-css/superfly-css-task-test):
- Supports nunjucks templating
- Highlights content contained in `Test-markup`
- Generates a corresponding `Test-render` block that displays the markup contained in the `Test-markup` block
## Usage
Clone the package:
``` console
git clone https://github.com/superfly-css/superfly-css-task-test
```
Move to the root of the package
``` console
cd supefly-css-task-test
```
Build the test `src/test/html/index.html` by running:
``` console
gulp test:css
```
The prebuilt contents are shown below. Once `src/test/html/index.html` is built the markup contained in `Test-markup` will be highlighted, and a corresponding `Test-render` block will be generated after the `Test-then` block.
```html
When the .Grid container holds 2 .Grid-cell instances:
{% for cell in ['1', '2'] %}
{{cell}}/2
{% endfor %}
Each grid cell occupies the same amount of space witin the grid container row.
```
Post build the test file looks like this:
```html
...
When the .Grid container holds 2 .Grid-cell instances:
<div class="Grid">
<div class="Grid-cell">1/2</div>
<div class="Grid-cell">2/2</div>
</div>
Each grid cell occupies the same amount of space.
1/2
2/2
...
```