README

基本风格指南

基本风格指南将展示您所有文本在所有断点上的侧边对比视图。

<?php

namespace AppBundle\Controller;

use Massive\Bundle\StyleguideBundle\Controller\ParseBreakpointTrait;
use Massive\Bundle\StyleguideBundle\Controller\ParseIconTrait;
use Massive\Bundle\StyleguideBundle\Controller\ParseScssTrait;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class StyleguideController extends Controller
{
    use ParseBreakpointTrait;
    use ParseIconTrait;
    use ParseScssTrait;

    public function baseAction()
    {
        $breakpoints = $this->parseBreakpoints(dirname(__DIR__) . '/Resources/css/settings/_breakpoint.scss');

        return $this->render(
            '@MassiveStyleguide/styleguide/base.html.twig',
            [
                'route' => 'app.styleguide.text',
                'breakpoints' => $breakpoints,
            ]
        );
    }

    public function textAction()
    {
        $elements = $this->parseScss(dirname(__DIR__) . '/Resources/css/main.scss');
        $icons = $this->parseIcons(dirname(__DIR__) . '/Resources/public/icons/icomoon/variables.scss');

        return $this->render(
            'styleguide/styleguide-text.html.twig',
            [
                'icons' => $icons,
                'elements' => $elements,
            ]
        );
    }
}

一个示例 _breakpoint.scss 可能看起来像这样

// Breakpoints set by max-width value:
$breakpoints: (
    laptop: 1200px,     // 992px - 1440px
    tablet: 991px,      // 768px -  991px
    mobile: 767px,      //   0px -  767px
);

定义路由

<?xml version="1.0" encoding="UTF-8" ?>
<routes xmlns="https://symfony.ac.cn/schema/routing"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="https://symfony.ac.cn/schema/routing https://symfony.ac.cn/schema/routing/routing-1.0.xsd">

    <route id="app.styleguide.base" path="/_styleguide">
        <default key="_controller">AppBundle:Styleguide:base</default>
    </route>

    <route id="app.styleguide.text" path="/_styleguide/text">
        <default key="_controller">AppBundle:Styleguide:text</default>
    </route>
</routes>

您可以在 styleguide/styleguide-text.html.twig 中创建风格指南

{% extends '@MassiveStyleguide/styleguide/base-text.html.twig' %}

{% block style %}
    <link rel="stylesheet" href="{{ asset('/bundles/app/css/main.css', 'static') }}">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="styleguide-sub-title">
        Titles
    </div>

    <div class="styleguide-container">
        <div class="countdown__title">
            Countdown title<br/>
            with a break
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="{{ asset('/bundles/app/js/main.js', 'static') }}"></script>
{% endblock %}

您还可以在 scss 文件中使用注解来生成风格指南

// @styleguide('button-round')
.button-round {
    // ...
}

// @styleguide('button-round', { "container": "black", "text": "W" })
.button-round--white {
    // ...
}

// @styleguide('title', { "tag": "h1", "break": true })
.headline {
    // ...
}

Sulu 风格指南

您可以使用 sulu 特性来创建用于渲染 sulu 网站的虚拟数据。

<?php

namespace AppBundle\Controller;

use Massive\Bundle\StyleguideBundle\Controller\SuluRenderTrait;
use Massive\Bundle\StyleguideBundle\DataTrait\SuluTrait;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class StyleguideController extends Controller
{
    use SuluRenderTrait;
    use SuluTrait;

    public function homepageAction()
    {
        return $this->render(
            'templates/homepage.html.twig',
            $this->getHomepageAttributes()
        );
    }

    private function getHomepageAttributes()
    {
        $parameters = [
            'uuid' => null,
            'content' => [
                'title' => 'Styleguide Startpage',
                'headerImages' => $this->createDummyImages(1),
                'quoteText' => '<p>When people askme if<br />I went to film school I tell them:<br />≪No I went to films.≫</p>',
                'quoteAuthor' => 'Quentin Tarantino',
                'headline' => "A reader will be\ndistracted by the\nreadable content.",
                'description' => $this->createDummyText(),
                'homeBlocks' => [
                    [
                        'type' => 'countdown',
                        'title' => 'Until the topic assignment',
                        'date' => (new \DateTime())->modify('+2weeks')->format('Y-m-d H:i:s'),
                    ],
                ],
                'teasers' => $this->createDummyTeasers('Teaser', 3),
            ],
            'view' => [
            ],
        ];

        return $parameters;
    }
}