massive / styleguide-bundle
A bundle to create styleguide pages.
Installs: 2 723
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 11
Forks: 1
Open Issues: 1
Language:HTML
Type:sulu-bundle
Requires
- symfony/config: ^3.4
- symfony/dependency-injection: ^3.4
- symfony/framework-bundle: ^3.4
- symfony/http-foundation: ^3.4
- symfony/http-kernel: ^3.4
This package is auto-updated.
Last update: 2024-10-21 20:31:28 UTC
README
Base Styleguide
The base styleguide will show you a side to side view off all your texts in all breakpoints.
<?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, ] ); } }
An example _breakpoint.scss
can look like this:
// Breakpoints set by max-width value: $breakpoints: ( laptop: 1200px, // 992px - 1440px tablet: 991px, // 768px - 991px mobile: 767px, // 0px - 767px );
Define the routes:
<?xml version="1.0" encoding="UTF-8" ?> <routes xmlns="http://symfony.com/schema/routing" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://symfony.com/schema/routing http://symfony.com/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>
You can then create the styleguide in your 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 %}
You can also use annotations in your scss file to generate styleguide:
// @styleguide('button-round') .button-round { // ... } // @styleguide('button-round', { "container": "black", "text": "W" }) .button-round--white { // ... } // @styleguide('title', { "tag": "h1", "break": true }) .headline { // ... }
Sulu Styleguide
You can use the sulu traits to create a dummy data for rendering a sulu site.
<?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; } }