76 |
77 | ### Installation
78 |
79 | Add our Nova Tool to your Nova Service Proivder:
80 |
81 | ```
82 | // app/Providers/NovaServiceProvider.php
83 |
84 | public function tools()
85 | {
86 | return [
87 | new \Xpersonas\Styleguide\Providers\StyleguideNovaTool(),
88 | ];
89 | }
90 | ```
91 |
92 | ### Laravel Nova Color Field (optional)
93 |
94 | This package is also compatible with the excellent Laravel Nova Color Field from [timothyasp](https://github.com/timothyasp/nova-color-field).
95 |
96 | ```
97 | composer require timothyasp/nova-color-field
98 | ```
99 |
100 | 
101 |
102 | ## Contribute
103 |
104 | https://github.com/xpersonas/laravel-styleguide/pulls
105 |
106 | ## Author
107 |
108 | **[xpersonas](mailto:justin.neel@gmail.com)**
109 |
--------------------------------------------------------------------------------
/app/Http/Controllers/Controller.php:
--------------------------------------------------------------------------------
1 | isEmpty()) {
25 | $id = $basics->last()->id;
26 | return redirect()->route('basics.edit', $id)->with('success', 'Styleguide color is successfully saved.');
27 | } else {
28 | $styleguideBasics = new StyleguideBasics();
29 | $fillable = $styleguideBasics->getFillable();
30 |
31 | return view('styleguide::basics/edit', compact('fillable'));
32 | }
33 | }
34 |
35 | /**
36 | * Show the form for creating a new resource.
37 | *
38 | * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\View\View
39 | */
40 | public function create()
41 | {
42 | $styleguideBasics = new StyleguideBasics();
43 | $fillable = $styleguideBasics->getFillable();
44 |
45 | return view('styleguide::basics/edit', compact('fillable'));
46 | }
47 |
48 | /**
49 | * Store a newly created resource in storage.
50 | *
51 | * @param \Illuminate\Http\Request $request
52 | * @return \Illuminate\Http\RedirectResponse
53 | */
54 | public function store(Request $request)
55 | {
56 | $basics = collect($request->input('basics'))
57 | ->mapWithKeys(function ($value) {
58 | return [$value => 1];
59 | });
60 |
61 | StyleguideBasics::create($basics->toArray());
62 |
63 | return redirect()->route('basics.index')->with('success', 'Styleguide color is successfully saved.');
64 | }
65 |
66 | /**
67 | * Show the form for editing the specified resource.
68 | *
69 | * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
70 | */
71 | public function edit($id)
72 | {
73 | $basics = StyleguideBasics::findOrFail($id);
74 | $fillable = $basics->getFillable();
75 |
76 | return view('styleguide::basics/edit', compact('basics', 'fillable'));
77 | }
78 |
79 | /**
80 | * Update the specified resource in storage.
81 | *
82 | * @param \Illuminate\Http\Request $request
83 | * @param int $id
84 | * @return \Illuminate\Http\RedirectResponse
85 | */
86 | public function update(Request $request, $id)
87 | {
88 | $basics = collect($request->input('basics'))
89 | ->mapWithKeys(function ($value) {
90 | return [$value => 1];
91 | });
92 |
93 | StyleguideBasics::updateOrCreate(['id' => $id], $basics->toArray());
94 |
95 | return redirect()->route('basics.edit', $id)->with('success', 'Styleguide color is successfully updated.');
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/app/Http/Controllers/StyleguideColorController.php:
--------------------------------------------------------------------------------
1 | all());
44 | return redirect()->route('color.index')->with('success', 'Styleguide color is successfully saved.');
45 | }
46 |
47 | /**
48 | * Show the form for editing the specified resource.
49 | *
50 | * @param \Xpersonas\Styleguide\StyleguideColor $color
51 | * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
52 | */
53 | public function edit(StyleguideColor $color)
54 | {
55 | return view('styleguide::colors/edit', compact('color'));
56 | }
57 |
58 | /**
59 | * Update the specified resource in storage.
60 | *
61 | * @param \Xpersonas\Styleguide\Http\Requests\StyleguideColorPost $request
62 | * @param $id
63 | * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
64 | */
65 | public function update(StyleguideColorPost $request, $id)
66 | {
67 | StyleguideColor::updateOrCreate(['id' => $id], $request->all());
68 | return redirect()->route('color.index')->with('success', 'Styleguide color is successfully updated.');
69 | }
70 |
71 | /**
72 | * Remove the specified resource from storage.
73 | *
74 | * @param \Xpersonas\Styleguide\StyleguideColor $color
75 | * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
76 | */
77 | public function destroy(StyleguideColor $color)
78 | {
79 | $color->delete();
80 | return redirect()->route('color.index')->with('success', 'Styleguide color is successfully deleted.');
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/app/Http/Controllers/StyleguideController.php:
--------------------------------------------------------------------------------
1 | validate([
36 | 'title' => 'required|max:255',
37 | 'description' => 'required',
38 | 'pattern' => 'required',
39 | ]);
40 |
41 | StyleguidePattern::create($validatedData);
42 |
43 | return redirect()->route('pattern.index')->with('success', 'Styleguide pattern is successfully saved.');
44 | }
45 |
46 | /**
47 | * Show the form for editing the specified resource.
48 | *
49 | * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
50 | */
51 | public function edit(StyleguidePattern $pattern)
52 | {
53 | return view('styleguide::patterns/edit', compact('pattern'));
54 | }
55 |
56 | /**
57 | * Update the specified resource in storage.
58 | *
59 | * @param \Illuminate\Http\Request $request
60 | * @param int $id
61 | * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
62 | */
63 | public function update(Request $request, $id)
64 | {
65 | $validatedData = $request->validate([
66 | 'title' => 'required|max:255',
67 | 'description' => 'required',
68 | 'pattern' => 'required',
69 | ]);
70 |
71 | StyleguidePattern::updateOrCreate(['id' => $id], $validatedData);
72 |
73 | return redirect()->route('pattern.index')->with('success', 'Styleguide pattern is successfully updated.');
74 | }
75 |
76 | /**
77 | * Remove the specified resource from storage.
78 | *
79 | * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
80 | */
81 | public function destroy(StyleguidePattern $pattern)
82 | {
83 | $pattern->delete();
84 |
85 | return redirect()->route('pattern.index')->with('success', 'Styleguide pattern is successfully deleted.');
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/app/Http/Requests/StyleguideColorPost.php:
--------------------------------------------------------------------------------
1 | 'required|max:255',
29 | 'description' => 'required',
30 | 'hex' => 'regex:/^#?([0-9a-fA-F]{3}){1,2}$/i',
31 | ];
32 | }
33 |
34 | /**
35 | * Get the error messages for the defined validation rules.
36 | *
37 | * @return array
38 | */
39 | public function messages()
40 | {
41 | return [
42 | 'hex.regex' => 'Invalid hexadecimal color. Please enter the 3 or 6
43 | character code. Hashtag is optional and not required.',
44 | ];
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/app/Nova/StyleguideBasics.php:
--------------------------------------------------------------------------------
1 | isEmpty()) {
58 | return true;
59 | }
60 |
61 | return false;
62 | }
63 |
64 | public function authorizedToDelete(Request $request)
65 | {
66 | return false;
67 | }
68 |
69 | /**
70 | * Get the fields displayed by the resource.
71 | *
72 | * @param \Illuminate\Http\Request $request
73 | * @return array
74 | */
75 | public function fields(Request $request)
76 | {
77 | return [
78 | ID::make()
79 | ->hideFromIndex()
80 | ->hideFromDetail()
81 | ->hideWhenCreating()
82 | ->hideWhenUpdating(),
83 | Boolean::make('headings'),
84 | Boolean::make('text'),
85 | Boolean::make('lists'),
86 | Boolean::make('blockquote'),
87 | Boolean::make('rule'),
88 | Boolean::make('table'),
89 | Boolean::make('breadcrumbs'),
90 | Boolean::make('forms'),
91 | Boolean::make('buttons'),
92 | ];
93 | }
94 |
95 | /**
96 | * Get the cards available for the request.
97 | *
98 | * @param \Illuminate\Http\Request $request
99 | * @return array
100 | */
101 | public function cards(Request $request)
102 | {
103 | return [];
104 | }
105 |
106 | /**
107 | * Get the filters available for the resource.
108 | *
109 | * @param \Illuminate\Http\Request $request
110 | * @return array
111 | */
112 | public function filters(Request $request)
113 | {
114 | return [];
115 | }
116 |
117 | /**
118 | * Get the lenses available for the resource.
119 | *
120 | * @param \Illuminate\Http\Request $request
121 | * @return array
122 | */
123 | public function lenses(Request $request)
124 | {
125 | return [];
126 | }
127 |
128 | /**
129 | * Get the actions available for the resource.
130 | *
131 | * @param \Illuminate\Http\Request $request
132 | * @return array
133 | */
134 | public function actions(Request $request)
135 | {
136 | return [];
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/app/Nova/StyleguideColor.php:
--------------------------------------------------------------------------------
1 | sortable(),
55 | Date::make('CREATED', 'created_at')
56 | ->sortable()
57 | ->format('MMMM DD')
58 | ->exceptOnForms(),
59 | Text::make('class')
60 | ->sortable(),
61 | Trix::make('description')->hideFromIndex()->alwaysShow(),
62 | $this->getColorField()->rules('required', 'regex:/^#?([0-9a-fA-F]{3}){1,2}$/i')
63 | ];
64 | }
65 |
66 | /**
67 | * Check for Color class.
68 | *
69 | * If Timothyasp\Color\Color exists, return Color field.
70 | * Otherwise return plain textfield.
71 | *
72 | * @return \Laravel\Nova\Fields\Text
73 | */
74 | public function getColorField()
75 | {
76 | if (class_exists('\Timothyasp\Color\Color')) {
77 | $colorField = \Timothyasp\Color\Color::make('Color', 'hex');
78 | } else {
79 | $colorField = Text::make('Color', 'hex');
80 | }
81 |
82 | return $colorField;
83 | }
84 |
85 | /**
86 | * Customizations for color detail page.
87 | *
88 | * @param \Laravel\Nova\Http\Requests\NovaRequest $request
89 | *
90 | * @return array
91 | */
92 | public function fieldsForDetail(NovaRequest $request)
93 | {
94 | return [
95 | Date::make('Created', 'created_at')
96 | ->format('MMMM DD'),
97 | Text::make('Class', 'class'),
98 | Trix::make('Description', 'description')->alwaysShow(),
99 | Text::make('Color', function () {
100 | return "{$this->hex}";
101 | })->asHtml()
102 | ];
103 | }
104 |
105 | /**
106 | * Customizations for the color index page.
107 | *
108 | * @param \Laravel\Nova\Http\Requests\NovaRequest $request
109 | *
110 | * @return array
111 | */
112 | public function fieldsForIndex(NovaRequest $request)
113 | {
114 | return [
115 | Date::make('Created', 'created_at')
116 | ->format('MMMM DD'),
117 | Text::make('Class', 'class'),
118 | Text::make('Color', function () {
119 | return "{$this->hex}";
120 | })->asHtml()
121 | ];
122 | }
123 |
124 | /**
125 | * Get the cards available for the request.
126 | *
127 | * @param \Illuminate\Http\Request $request
128 | * @return array
129 | */
130 | public function cards(Request $request)
131 | {
132 | return [];
133 | }
134 |
135 | /**
136 | * Get the filters available for the resource.
137 | *
138 | * @param \Illuminate\Http\Request $request
139 | * @return array
140 | */
141 | public function filters(Request $request)
142 | {
143 | return [];
144 | }
145 |
146 | /**
147 | * Get the lenses available for the resource.
148 | *
149 | * @param \Illuminate\Http\Request $request
150 | * @return array
151 | */
152 | public function lenses(Request $request)
153 | {
154 | return [];
155 | }
156 |
157 | /**
158 | * Get the actions available for the resource.
159 | *
160 | * @param \Illuminate\Http\Request $request
161 | * @return array
162 | */
163 | public function actions(Request $request)
164 | {
165 | return [];
166 | }
167 | }
168 |
--------------------------------------------------------------------------------
/app/Nova/StyleguidePattern.php:
--------------------------------------------------------------------------------
1 | sortable(),
56 | Text::make('title')->sortable(),
57 | Trix::make('description')->hideFromIndex()->alwaysShow(),
58 | Code::make('pattern'),
59 | ];
60 | }
61 |
62 | public function fieldsForDetail($request)
63 | {
64 | return [
65 | Date::make('Created', 'created_at')
66 | ->format('MMMM DD'),
67 | Text::make('title')->sortable(),
68 | Trix::make('description')->hideFromIndex()->alwaysShow(),
69 | Code::make('pattern'),
70 | ];
71 | }
72 |
73 | public function fieldsForIndex($request)
74 | {
75 | return [
76 | Date::make('Created', 'created_at')
77 | ->format('MMMM DD'),
78 | Text::make('title')->sortable(),
79 | Trix::make('description')->hideFromIndex()->alwaysShow(),
80 | Code::make('pattern'),
81 | ];
82 | }
83 | /**
84 | * Get the cards available for the request.
85 | *
86 | * @param \Illuminate\Http\Request $request
87 | * @return array
88 | */
89 | public function cards(Request $request)
90 | {
91 | return [];
92 | }
93 |
94 | /**
95 | * Get the filters available for the resource.
96 | *
97 | * @param \Illuminate\Http\Request $request
98 | * @return array
99 | */
100 | public function filters(Request $request)
101 | {
102 | return [];
103 | }
104 |
105 | /**
106 | * Get the lenses available for the resource.
107 | *
108 | * @param \Illuminate\Http\Request $request
109 | * @return array
110 | */
111 | public function lenses(Request $request)
112 | {
113 | return [];
114 | }
115 |
116 | /**
117 | * Get the actions available for the resource.
118 | *
119 | * @param \Illuminate\Http\Request $request
120 | * @return array
121 | */
122 | public function actions(Request $request)
123 | {
124 | return [];
125 | }
126 | }
127 |
--------------------------------------------------------------------------------
/app/Observers/StyleguideColorObserver.php:
--------------------------------------------------------------------------------
1 | hex = $this->formatHexValue($color->hex);
13 | }
14 |
15 | /**
16 | * Add pound sign to beginning of string if not present already.
17 | *
18 | * @param $value
19 | *
20 | * @return string
21 | */
22 | public function formatHexValue($value)
23 | {
24 | if (! Str::startsWith($value, '#')) {
25 | return '#'. $value;
26 | }
27 |
28 | return $value;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/app/Providers/StyleguideColorModelServiceProvider.php:
--------------------------------------------------------------------------------
1 | app->make('Xpersonas\Styleguide\Http\Controllers\StyleguideController');
21 |
22 | // Package views.
23 | $this->loadViewsFrom(__DIR__.'/../../resources/views', 'styleguide');
24 | }
25 |
26 | /**
27 | * Bootstrap services.
28 | *
29 | * @return void
30 | */
31 | public function boot()
32 | {
33 | // Package routes.
34 | include __DIR__.'/../../routes/routes.php';
35 |
36 | // Package views.
37 | $this->loadViewsFrom(__DIR__.'/../../resources/views', 'styleguide');
38 |
39 | // Package migrations.
40 | $this->loadMigrationsFrom(__DIR__.'/../../database/migrations/');
41 |
42 | $this->loadViewComponentsAs('styleguide', [
43 | Base::class,
44 | ]);
45 |
46 | $this->publishes([
47 | __DIR__.'/../../public/js/styleguide.js' =>
48 | public_path('js/vendor/xpersonas/styleguide.js'),
49 | __DIR__.'/../../public/css/styleguide.css' =>
50 | public_path('css/vendor/xpersonas/styleguide.css'),
51 | __DIR__.'/../../database/seeds/StyleguideBasicsSeeder.php' =>
52 | database_path('seeds/StyleguideBasicsSeeder.php'),
53 | __DIR__.'/../../database/seeds/StyleguidePatternSeeder.php' =>
54 | database_path('seeds/StyleguidePatternSeeder.php'),
55 | __DIR__.'/../../database/seeds/StyleguideColorSeeder.php' =>
56 | database_path('seeds/StyleguideColorSeeder.php'),
57 | __DIR__.'/../../database/factories/StyleguideBasicsFactory.php' =>
58 | database_path('factories/StyleguideBasicsFactory.php'),
59 | __DIR__.'/../../database/factories/StyleguideColorFactory.php' =>
60 | database_path('factories/StyleguideColorFactory.php'),
61 | __DIR__.'/../../database/factories/StyleguidePatternFactory.php' =>
62 | database_path('factories/StyleguidePatternFactory.php'),
63 | ], 'xpersonas-styleguide');
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/app/StyleguideBasics.php:
--------------------------------------------------------------------------------
1 | true]);
36 | }
37 |
38 | $colorsEntities = StyleguideColor::all();
39 | $colors = null;
40 | foreach ($colorsEntities as $key => $value) {
41 | $rgb = $this->hex2rgb($value->hex);
42 | $colors[$key] = [
43 | 'class' => $value->class,
44 | 'description' => $value->description,
45 | 'hex' => $value->hex,
46 | 'rgb' => implode(', ', $rgb),
47 | ];
48 | }
49 |
50 | $patternsEntities = StyleguidePattern::all();
51 | $patterns = null;
52 | foreach ($patternsEntities as $key => $value) {
53 | $patterns[$key] = [
54 | 'id' => $value->id,
55 | 'title' => $value->title,
56 | 'description' => $value->description,
57 | 'pattern' => $value->pattern,
58 | ];
59 | }
60 |
61 | $basicSettings = StyleguideBasics::all();
62 | if ($basicSettings->isEmpty() || $this->isDefaultComponentsEmpty($basicSettings[0])) {
63 | $basics = null;
64 | } else {
65 | $basics = StyleguideBasics::findOrFail($basicSettings[0]->id);
66 | $fillable = $basics->getFillable();
67 | }
68 |
69 | return view(
70 | 'styleguide::components.base',
71 | compact('colors', 'patterns', 'basics')
72 | );
73 | }
74 |
75 | public function isDefaultComponentsEmpty($component)
76 | {
77 | if (!$component->headings &&
78 | !$component->text &&
79 | !$component->lists &&
80 | !$component->blockquote &&
81 | !$component->rule &&
82 | !$component->table &&
83 | !$component->breadcrumbs &&
84 | !$component->forms &&
85 | !$component->buttons
86 | ) {
87 | return true;
88 | }
89 | }
90 |
91 | /**
92 | * Convert hex values to rgb.
93 | *
94 | * @param $colour
95 | *
96 | * @return array|bool
97 | */
98 | public function hex2rgb($colour)
99 | {
100 | if ($colour[0] == '#') {
101 | $colour = substr($colour, 1);
102 | }
103 |
104 | if (strlen($colour) == 6) {
105 | [$r, $g, $b] = [
106 | $colour[0].$colour[1], $colour[2].$colour[3],
107 | $colour[4].$colour[5],
108 | ];
109 | } elseif (strlen($colour) == 3) {
110 | [$r, $g, $b] = [
111 | $colour[0].$colour[0], $colour[1].$colour[1],
112 | $colour[2].$colour[2],
113 | ];
114 | } else {
115 | return [];
116 | }
117 |
118 | $r = hexdec($r);
119 | $g = hexdec($g);
120 | $b = hexdec($b);
121 |
122 | return ['red' => $r, 'green' => $g, 'blue' => $b];
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "xpersonas/laravel-styleguide",
3 | "description": "Simple styleguide for use with Laravel projects. Quickly create a page of html elements and components to be styled with your front end stylesheets.",
4 | "keywords": ["laravel", "styleguide"],
5 | "type": "project",
6 | "license": "GPL-3.0-or-later",
7 | "authors": [
8 | {
9 | "name": "xpersonas",
10 | "email": "justin.neel@gmail.com"
11 | }
12 | ],
13 | "autoload": {
14 | "psr-4": {
15 | "Xpersonas\\Styleguide\\": "app/"
16 | }
17 | },
18 | "autoload-dev": {
19 | "psr-4": {
20 | "Xpersonas\\Styleguide\\Tests\\": "tests/"
21 | }
22 | },
23 | "require": {
24 | "php": ">=7.3",
25 | "eloquent/composer-npm-bridge": "^5.0"
26 | },
27 | "require-dev": {
28 | "phpunit/phpunit": "^9.2",
29 | "orchestra/testbench": "^5.3",
30 | "squizlabs/php_codesniffer": "*"
31 | },
32 | "suggest": {
33 | "timothyasp/nova-color-field":"If using Nova, consider using this color picker."
34 | },
35 | "extra": {
36 | "laravel": {
37 | "providers": [
38 | "Xpersonas\\Styleguide\\Providers\\StyleguideColorModelServiceProvider",
39 | "Xpersonas\\Styleguide\\Providers\\StyleguideServiceProvider"
40 | ]
41 | },
42 | "npm-bridge": {
43 | "timeout": 9000,
44 | "optional": true
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/database/factories/StyleguideBasicsFactory.php:
--------------------------------------------------------------------------------
1 | define(StyleguideBasics::class, function (Faker $faker) {
9 | return [
10 | 'headings' => $faker->boolean(75),
11 | 'text' => $faker->boolean(75),
12 | 'lists' => $faker->boolean(75),
13 | 'blockquote' => $faker->boolean(75),
14 | 'rule' => $faker->boolean(75),
15 | 'table' => $faker->boolean(75),
16 | 'breadcrumbs' => $faker->boolean(75),
17 | 'forms' => $faker->boolean(75),
18 | 'buttons' => $faker->boolean(75),
19 | ];
20 | });
21 |
--------------------------------------------------------------------------------
/database/factories/StyleguideColorFactory.php:
--------------------------------------------------------------------------------
1 | define(StyleguideColor::class, function (Faker $faker) {
9 | return [
10 | 'class' => $faker->word,
11 | 'description' => $faker->text,
12 | 'hex' => $faker->hexcolor
13 | ];
14 | });
15 |
--------------------------------------------------------------------------------
/database/factories/StyleguidePatternFactory.php:
--------------------------------------------------------------------------------
1 | define(StyleguidePattern::class, function (Faker $faker) {
9 | return [
10 | 'title' => $faker->word,
11 | 'description' => $faker->text,
12 | 'pattern' => $faker->randomHtml()
13 | ];
14 | });
15 |
--------------------------------------------------------------------------------
/database/migrations/2020_07_07_201044_create_styleguide_patterns_table.php:
--------------------------------------------------------------------------------
1 | id();
18 | $table->string('title');
19 | $table->longText('description');
20 | $table->longText('pattern');
21 | $table->timestamps();
22 | });
23 | }
24 |
25 | /**
26 | * Reverse the migrations.
27 | *
28 | * @return void
29 | */
30 | public function down()
31 | {
32 | Schema::dropIfExists('styleguide_patterns');
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/database/migrations/2020_07_09_171757_create_styleguide_colors_table.php:
--------------------------------------------------------------------------------
1 | id();
18 | $table->string('class');
19 | $table->longText('description');
20 | $table->string('hex');
21 | $table->timestamps();
22 | });
23 | }
24 |
25 | /**
26 | * Reverse the migrations.
27 | *
28 | * @return void
29 | */
30 | public function down()
31 | {
32 | Schema::dropIfExists('styleguide_colors');
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/database/migrations/2020_07_11_145517_create_styleguide_basics_table.php:
--------------------------------------------------------------------------------
1 | id();
18 | $table->timestamps();
19 | $table->boolean('headings')->nullable();
20 | $table->boolean('text')->nullable();
21 | $table->boolean('lists')->nullable();
22 | $table->boolean('blockquote')->nullable();
23 | $table->boolean('rule')->nullable();
24 | $table->boolean('table')->nullable();
25 | $table->boolean('breadcrumbs')->nullable();
26 | $table->boolean('forms')->nullable();
27 | $table->boolean('buttons')->nullable();
28 | });
29 | }
30 |
31 | /**
32 | * Reverse the migrations.
33 | *
34 | * @return void
35 | */
36 | public function down()
37 | {
38 | Schema::dropIfExists('styleguide_basics');
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/database/seeds/StyleguideBasicsSeeder.php:
--------------------------------------------------------------------------------
1 | create();
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/database/seeds/StyleguideColorSeeder.php:
--------------------------------------------------------------------------------
1 | create();
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/database/seeds/StyleguidePatternSeeder.php:
--------------------------------------------------------------------------------
1 | create();
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/mix-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "/public/js/styleguide.js": "/public/js/styleguide.js",
3 | "/public/css/styleguide.css": "/public/css/styleguide.css",
4 | "/public/js/styleguide.js.map": "/public/js/styleguide.js.map"
5 | }
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
5 | "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
6 | },
7 | "devDependencies": {
8 | "axios": "^0.19",
9 | "cross-env": "^7.0",
10 | "laravel-mix": "^5.0.1",
11 | "lodash": "^4.17.13",
12 | "resolve-url-loader": "^3.1.0",
13 | "sass": "^1.15.2",
14 | "sass-loader": "^8.0.0",
15 | "vue-template-compiler": "^2.6.11"
16 | },
17 | "browserslist": [
18 | "last 2 versions",
19 | "ie >= 9"
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/public/css/styleguide.css:
--------------------------------------------------------------------------------
1 | .simple-styleguide--site-styles{width:90%;max-width:1030px;margin-left:auto;margin-right:auto}.simple-styleguide--site-styles h3.simple-styleguide--sectionhead{padding:20px 20px 12px 0;margin:80px 0 10px;color:#000;font-size:1.2rem;position:relative;border-bottom:4px solid #000;border-top:1px solid #000;text-transform:uppercase}.simple-styleguide--site-styles h3.simple-styleguide--sectionhead.first{margin-top:20px}.simple-styleguide--site-styles .simple-styleguide{margin:40px 0}.simple-styleguide--site-styles .simple-styleguide:after{content:"";display:block;clear:both}.simple-styleguide--site-styles .label{background:#ccc}.simple-styleguide--site-styles .simple-styleguide code{display:block;background:#eee;padding:10px;margin-top:20px;color:#9e9e9e;line-height:1.5}.simple-styleguide--jump-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:5px 0 0}.simple-styleguide--jump-nav li{list-style:none;margin:0 0 10px;padding:0;width:100%}@media (min-width:480px){.simple-styleguide--jump-nav li{width:50%}}@media (min-width:600px){.simple-styleguide--jump-nav li{width:25%}}.simple-styleguide--view-sourecode{cursor:pointer}.simple-styleguide pre{background:#f1f1f1;padding:20px;border:solid #fff;border-width:1px 1px 4px;margin:0;color:#9e9e9e}.simple-styleguide pre.active{display:block}.simple-styleguide--pattern{margin-top:20px}.simple-styleguide--colors{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.simple-styleguide--color{margin-right:2%;margin-bottom:15px;width:48%}.simple-styleguide--color:nth-child(2n){margin-right:0}@media (min-width:600px){.simple-styleguide--color{margin-right:2%;margin-bottom:15px;width:23%}.simple-styleguide--color:nth-child(2n){margin-right:2%}.simple-styleguide--color:nth-child(4n){margin-right:0}}.simple-styleguide--color--swatch--class,.simple-styleguide--color--swatch--usage,.simple-styleguide--color--swatch--values{display:block;font-size:10px;font-family:sans-serif}.simple-styleguide--color--swatch--usage{border-top:1px solid #9e9e9e;padding-top:5px;margin-top:5px}.simple-styleguide--color--swatch--class label,.simple-styleguide--color--swatch--values label,.simple-styleguide--color--swatch label{display:inline;font-weight:700;padding:0}.simple-styleguide--color--swatch{padding:4%;background:#fff}.simple-styleguide--site-styles .simple-styleguide--color--block{width:100%;height:100px;border:1px solid #fff}.simple-styleguide .calculate .info{display:block;font-size:10px;font-family:sans-serif}.simple-styleguide .calculate .info label{font-weight:700;display:inline}
--------------------------------------------------------------------------------
/public/js/styleguide.js:
--------------------------------------------------------------------------------
1 | function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==_typeof(e)&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=0)}([function(e,t,n){n(1),e.exports=n(2)},function(e,t){var n=document.querySelectorAll(".simple-styleguide--view-sourecode");[].forEach.call(n,function(e){e.addEventListener("click",function(){e.nextElementSibling.classList.toggle("active")})});var o=document.querySelectorAll(".calculate");[].forEach.call(o,function(e){var t=e.querySelector(".measure"),n=e.querySelector(".info"),o=" ".concat(window.getComputedStyle(t).lineHeight),r=" ".concat(window.getComputedStyle(t).fontSize),l=" ".concat(window.getComputedStyle(t).marginBottom,"\n ").concat(window.getComputedStyle(t).marginRight," ").concat(window.getComputedStyle(t).marginBottom," ").concat(window.getComputedStyle(t).marginLeft);n.innerHTML="".concat(r,"").concat(o,"
").concat(l)})},function(e,t){}]); 2 | -------------------------------------------------------------------------------- /public/js/styleguide.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./resources/js/styleguide.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","viewSourceLinks","document","querySelectorAll","forEach","el","addEventListener","nextElementSibling","classList","toggle","calculableElements","measuredElement","querySelector","info","lineHeight","window","getComputedStyle","fontSize","margins","marginBottom","marginRight","marginLeft","innerHTML"],"mappings":"aACE,IAAIA,EAAmB,GAGvB,SAASC,EAAoBC,GAG5B,GAAGF,EAAiBE,GACnB,OAAOF,EAAiBE,GAAUC,QAGnC,IAAIC,EAASJ,EAAiBE,GAAY,CACzCG,EAAGH,EACHI,GAAG,EACHH,QAAS,IAUV,OANAI,EAAQL,GAAUM,KAAKJ,EAAOD,QAASC,EAAQA,EAAOD,QAASF,GAG/DG,EAAOE,GAAI,EAGJF,EAAOD,QAKfF,EAAoBQ,EAAIF,EAGxBN,EAAoBS,EAAIV,EAGxBC,EAAoBU,EAAI,SAASR,EAASS,EAAMC,GAC3CZ,EAAoBa,EAAEX,EAASS,IAClCG,OAAOC,eAAeb,EAASS,EAAM,CAAEK,YAAY,EAAMC,IAAKL,KAKhEZ,EAAoBkB,EAAI,SAAShB,GACX,oBAAXiB,QAA0BA,OAAOC,aAC1CN,OAAOC,eAAeb,EAASiB,OAAOC,YAAa,CAAEC,MAAO,WAE7DP,OAAOC,eAAeb,EAAS,aAAc,CAAEmB,OAAO,KAQvDrB,EAAoBsB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQrB,EAAoBqB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,iBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKX,OAAOY,OAAO,MAGvB,GAFA1B,EAAoBkB,EAAEO,GACtBX,OAAOC,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOrB,EAAoBU,EAAEe,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRzB,EAAoB6B,EAAI,SAAS1B,GAChC,IAAIS,EAAST,GAAUA,EAAOqB,WAC7B,WAAwB,OAAOrB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAH,EAAoBU,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRZ,EAAoBa,EAAI,SAASiB,EAAQC,GAAY,OAAOjB,OAAOkB,UAAUC,eAAe1B,KAAKuB,EAAQC,IAGzG/B,EAAoBkC,EAAI,IAIjBlC,EAAoBA,EAAoBmC,EAAI,G,qDC5ErD,IAAMC,EAAkBC,SAASC,iBAC7B,sCAGJ,GAAGC,QAAQhC,KAAK6B,GAAiB,SAAAI,GAC7BA,EAAGC,iBAAiB,SAAS,WACzBD,EAAGE,mBAAmBC,UAAUC,OAAO,gBAI/C,IAAMC,EAAqBR,SAASC,iBAAiB,cAErD,GAAGC,QAAQhC,KAAKsC,GAAoB,SAAAL,GAChC,IAAMM,EAAkBN,EAAGO,cAAc,YACnCC,EAAOR,EAAGO,cAAc,SACxBE,EAAa,+BAAH,OACZC,OAAOC,iBAAiBL,GAAiBG,YAEvCG,EAAW,6BAAH,OACVF,OAAOC,iBAAiBL,GAAiBM,UAEvCC,EAAU,0BAAH,OACTH,OAAOC,iBAAiBL,GAAiBQ,aADhC,qBAGPJ,OAAOC,iBAAiBL,GAAiBS,YAHlC,YAITL,OAAOC,iBAAiBL,GAAiBQ,aAJhC,YAKTJ,OAAOC,iBAAiBL,GAAiBU,YAE7CR,EAAKS,UAAL,UAAoBL,EAApB,gBAAoCH,EAApC,gBAAsDI,O","file":"/public/js/styleguide.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","/**\n * @file\n * Simple styleguide javascript.\n *\n */\n\nconst viewSourceLinks = document.querySelectorAll(\n '.simple-styleguide--view-sourecode'\n);\n\n[].forEach.call(viewSourceLinks, el => {\n el.addEventListener('click', () => {\n el.nextElementSibling.classList.toggle('active');\n });\n});\n\nconst calculableElements = document.querySelectorAll('.calculate');\n\n[].forEach.call(calculableElements, el => {\n const measuredElement = el.querySelector('.measure');\n const info = el.querySelector('.info');\n const lineHeight = ` ${\n window.getComputedStyle(measuredElement).lineHeight\n }`;\n const fontSize = ` ${\n window.getComputedStyle(measuredElement).fontSize\n }`;\n const margins = ` ${\n window.getComputedStyle(measuredElement).marginBottom\n }\n ${window.getComputedStyle(measuredElement).marginRight} ${\n window.getComputedStyle(measuredElement).marginBottom\n } ${window.getComputedStyle(measuredElement).marginLeft}`;\n\n info.innerHTML = `${fontSize}
${lineHeight}
${margins}`;\n});\n\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /resources/js/styleguide.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Simple styleguide javascript. 4 | * 5 | */ 6 | 7 | const viewSourceLinks = document.querySelectorAll( 8 | '.simple-styleguide--view-sourecode' 9 | ); 10 | 11 | [].forEach.call(viewSourceLinks, el => { 12 | el.addEventListener('click', () => { 13 | el.nextElementSibling.classList.toggle('active'); 14 | }); 15 | }); 16 | 17 | const calculableElements = document.querySelectorAll('.calculate'); 18 | 19 | [].forEach.call(calculableElements, el => { 20 | const measuredElement = el.querySelector('.measure'); 21 | const info = el.querySelector('.info'); 22 | const lineHeight = ` ${ 23 | window.getComputedStyle(measuredElement).lineHeight 24 | }`; 25 | const fontSize = ` ${ 26 | window.getComputedStyle(measuredElement).fontSize 27 | }`; 28 | const margins = ` ${ 29 | window.getComputedStyle(measuredElement).marginBottom 30 | } 31 | ${window.getComputedStyle(measuredElement).marginRight} ${ 32 | window.getComputedStyle(measuredElement).marginBottom 33 | } ${window.getComputedStyle(measuredElement).marginLeft}`; 34 | 35 | info.innerHTML = `${fontSize}
${lineHeight}
${margins}`; 36 | }); 37 | 38 | -------------------------------------------------------------------------------- /resources/sass/styleguide.scss: -------------------------------------------------------------------------------- 1 | .simple-styleguide--site-styles { 2 | width: 90%; 3 | max-width: 1030px; 4 | margin-left: auto; 5 | margin-right: auto; 6 | } 7 | .simple-styleguide--site-styles h3.simple-styleguide--sectionhead { 8 | padding: 20px 20px 12px 0; 9 | margin: 80px 0 10px 0; 10 | color: #000; 11 | font-size: 1.2rem; 12 | position: relative; 13 | border-bottom: 4px solid #000; 14 | border-top: 1px solid #000; 15 | text-transform: uppercase; 16 | } 17 | .simple-styleguide--site-styles h3.simple-styleguide--sectionhead.first { 18 | margin-top: 20px; 19 | } 20 | .simple-styleguide--site-styles .simple-styleguide { 21 | margin: 40px 0; 22 | } 23 | .simple-styleguide--site-styles .simple-styleguide:after { 24 | content: ""; 25 | display: block; 26 | clear: both; 27 | } 28 | .simple-styleguide--site-styles .label { 29 | background: #ccc; 30 | } 31 | .simple-styleguide--site-styles .simple-styleguide code { 32 | display: block; 33 | background: #eee; 34 | padding: 10px; 35 | margin-top: 20px; 36 | color: #9e9e9e; 37 | line-height: 1.5; 38 | } 39 | 40 | .simple-styleguide--jump-nav { 41 | display: flex; 42 | flex-wrap: wrap; 43 | margin: 5px 0 0 0; 44 | } 45 | 46 | .simple-styleguide--jump-nav li { 47 | list-style: none; 48 | margin: 0 0 10px 0; 49 | padding: 0; 50 | width: 100%; 51 | } 52 | 53 | @media (min-width: 480px) { 54 | .simple-styleguide--jump-nav li { 55 | width: 50%; 56 | } 57 | } 58 | 59 | @media (min-width: 600px) { 60 | .simple-styleguide--jump-nav li { 61 | width: 25%; 62 | } 63 | } 64 | 65 | .simple-styleguide--view-sourecode { 66 | cursor: pointer; 67 | } 68 | 69 | .simple-styleguide pre { 70 | background: #f1f1f1; 71 | padding: 20px; 72 | border: 1px solid #fff; 73 | border-bottom: 4px solid #fff; 74 | margin: 0; 75 | color: #9e9e9e; 76 | } 77 | 78 | .simple-styleguide pre.active { 79 | display: block; 80 | } 81 | 82 | .simple-styleguide--pattern { 83 | margin-top: 20px; 84 | } 85 | 86 | .simple-styleguide--colors { 87 | display: flex; 88 | flex-wrap: wrap; 89 | } 90 | 91 | .simple-styleguide--color { 92 | /*border: 1px solid #d3d3d3;*/ 93 | margin-right: 2%; 94 | margin-bottom: 15px; 95 | width: 48%; 96 | } 97 | 98 | .simple-styleguide--color:nth-child(2n) { 99 | margin-right: 0; 100 | } 101 | 102 | @media (min-width: 600px) { 103 | .simple-styleguide--color { 104 | margin-right: 2%; 105 | margin-bottom: 15px; 106 | width: 23%; 107 | } 108 | .simple-styleguide--color:nth-child(2n) { 109 | margin-right: 2%; 110 | } 111 | .simple-styleguide--color:nth-child(4n) { 112 | margin-right: 0; 113 | } 114 | } 115 | 116 | 117 | .simple-styleguide--color--swatch--class, 118 | .simple-styleguide--color--swatch--values, 119 | .simple-styleguide--color--swatch--usage { 120 | display: block; 121 | font-size: 10px; 122 | font-family: sans-serif; 123 | } 124 | 125 | .simple-styleguide--color--swatch--usage { 126 | border-top: 1px solid #9e9e9e; 127 | padding-top: 5px; 128 | margin-top: 5px; 129 | } 130 | 131 | .simple-styleguide--color--swatch--class label, 132 | .simple-styleguide--color--swatch--values label, 133 | .simple-styleguide--color--swatch label { 134 | display: inline; 135 | font-weight: bold; 136 | padding: 0; 137 | } 138 | 139 | .simple-styleguide--color--swatch { 140 | padding: 4%; 141 | background: #fff; 142 | } 143 | 144 | .simple-styleguide--site-styles .simple-styleguide--color--block { 145 | width: 100%; 146 | height: 100px; 147 | border: 1px solid #fff; 148 | } 149 | 150 | .simple-styleguide .calculate .info { 151 | display: block; 152 | font-size: 10px; 153 | font-family: sans-serif; 154 | } 155 | 156 | .simple-styleguide .calculate .info label { 157 | font-weight: bold; 158 | display: inline; 159 | } 160 | -------------------------------------------------------------------------------- /resources/views/basics/edit.blade.php: -------------------------------------------------------------------------------- 1 | @extends('styleguide::layout') 2 | 3 | @section('content') 4 | 9 |
Edit Basic Settings
10 |-
18 | @foreach ($errors->all() as $error)
19 |
- {{ $error }} 20 | @endforeach 21 |
23 | @endif 24 | 25 | @isset($basics) 26 | 46 | @else 47 | 61 | @endif 62 | 63 |
Basic Settings
10 |Add Color
10 |-
15 | @foreach ($errors->all() as $error)
16 |
- {{ $error }} 17 | @endforeach 18 |
20 | @endif 21 | 37 |
Edit Color
10 |-
15 | @foreach ($errors->all() as $error)
16 |
- {{ $error }} 17 | @endforeach 18 |
20 | @endif 21 | 41 |
Colors
10 |15 | @endif 16 | 17 |
| ID | 26 |Class | 27 |Description | 28 |Color | 29 |Preview | 30 |Action | 31 ||
| {{$color->id}} | 37 |{{$color->class}} | 38 |{!! $color->description !!} | 39 |{{$color->hex}} | 40 |41 | | Edit | 42 |43 | 48 | | 49 |
3 |
4 |
php artisan vendor:publish --tag=xpersonas-styleguide5 |
php artisan migrate
6 | styleguide colors
64 |headings
88 |96 | 102 |
103 | 109 |
110 | 116 |
117 | 123 |
124 | 130 |
131 |
H1 Heading
134 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis 135 | tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. 136 | Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. 137 | Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis 138 | in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis 139 | vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.
140 |H2 Heading
141 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis 142 | tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. 143 | Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. 144 | Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis 145 | in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis 146 | vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.
147 |H3 Heading
148 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis 149 | tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. 150 | Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. 151 | Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis 152 | in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis 153 | vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.
154 |H4 Heading
155 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis 156 | tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. 157 | Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. 158 | Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis 159 | in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis 160 | vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.
161 |H5 Heading
162 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis 163 | tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. 164 | Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. 165 | Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis 166 | in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis 167 | vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.
168 |H6 Heading
169 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis 170 | tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. 171 | Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. 172 | Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis 173 | in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis 174 | vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.
175 |text
181 |Normal text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
183 | iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et
184 | mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros,
185 | viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta
186 | tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada
187 | et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet
188 | massa est.
Vivamus pretium placerat lorem, in tempor massa convallis sit amet. Aliquam sed quam eget ligula 190 | luctus aliquam sed vitae nulla. Aliquam dui dolor, ullamcorper eget rutrum ut, hendrerit ac lorem. 191 | Donec magna est, sollicitudin vel ultrices vel, mattis ut odio. Integer vel felis laoreet purus 192 | sollicitudin varius sed id ipsum. Suspendisse potenti. Praesent ut justo vitae metus luctus vehicula 193 | a et purus. Suspendisse potenti. Sed viverra, quam non hendrerit laoreet, massa odio blandit arcu, 194 | ac molestie metus diam eu tortor. Donec erat arcu, ultrices sit amet placerat non, feugiat in arcu. 195 | Mauris eros quam, varius eget volutpat vel, tristique sed est. In faucibus feugiat urna sit amet 196 | elementum. Integer consequat rhoncus libero, in molestie augue posuere et. Phasellus ac eleifend 197 | magna. Proin vulputate dui ac justo pharetra consequat. In vel iaculis ligula.
198 |Cras vestibulum lacus sit amet sem commodo ullamcorper aliquet eros vestibulum. Sed fermentum nulla 199 | quis risus suscipit dapibus. Sed vitae velit ut dolor varius semper at id lectus. Aenean quis leo 200 | sit amet tellus tempus cursus. Vivamus semper vehicula ante eget semper. In ac ipsum erat. 201 | Suspendisse lectus erat, commodo nec fringilla quis, interdum non leo. Vivamus et lectus vitae risus 202 | porta sollicitudin luctus eget est. Etiam quis elit vel est suscipit tristique. Nullam fringilla 203 | purus ac velit gravida ullamcorper. Praesent porttitor ante non lacus suscipit porta. Nunc fermentum 204 | sem et metus aliquam ultricies non sollicitudin nibh. Vestibulum ut ligula dolor, in placerat 205 | tortor. Sed nec lacus sed nibh iaculis luctus. Pellentesque habitant morbi tristique senectus et 206 | netus et malesuada fames ac turpis egestas. Curabitur rutrum, diam vel tempor commodo, augue nunc 207 | viverra risus, in pellentesque neque justo eget dolor. Maecenas quis odio leo, a auctor lorem.
208 |Link:
This is an example of a link within copy. Lorem ipsum
209 | dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt,
210 | felis enim venenatis lorem, nec lobortis nisl urna et mi.
Strong:
This is an example of strong text within copy. Lorem
212 | ipsum bold text, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis
213 | tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi.
Emphasis:
This is an example of emphasis placed on text within copy.
215 | Lorem ipsum dolor sit italic text, consectetur adipiscing elit. Aliquam iaculis, velit
216 | gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi.
Superscript/Subscript:
This is an example of superscript2 text and
218 | subscript2 text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
219 | iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et
220 | mi. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec
221 | lobortis2 nisl urna et mi. Aliquam iaculis, velit gravida convallis2
222 | tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Aliquam iaculis, velit gravida
223 | convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Aliquam iaculis,
224 | velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi.
Small:
This is an example of small text within copy. Lorem ipsum
226 | dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt,
227 | felis enim venenatis lorem, nec lobortis nisl urna et mi.
Link:
This is an example of a link within copy. Lorem ipsum
229 | dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt,
230 | felis enim venenatis lorem, nec lobortis nisl urna et mi.
Underline:
This is an example of underlined text within copy. Lorem ipsum
232 | dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt,
233 | felis enim venenatis lorem, nec lobortis nisl urna et mi.
Delete:
This is an
235 | example of deleted text
236 | within copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida
237 | convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi.
238 |
lists
245 |Unordered List:
248 |Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia 249 | odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue 250 | laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius 251 | blandit sit amet non magna.
252 |-
253 |
- lacinia 254 |
- Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit 255 | sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed 256 | posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient 257 | montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. 258 | 259 |
- lobortis 260 |
- lobortis 261 |
- erat 262 |
Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia 264 | odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue 265 | laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius 266 | blandit sit amet non magna.
267 |Ordered List:
270 |Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia 271 | odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue 272 | laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius 273 | blandit sit amet non magna.
274 |-
275 |
- erat 276 |
- eros 277 |
- iaculis 278 |
- in 279 |
- sed 280 |
Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia 282 | odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue 283 | laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius 284 | blandit sit amet non magna.
285 |Nested Lists:
288 |Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, 289 | commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. 290 | Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec 291 | magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent 292 | taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget 293 | nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris 294 | eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 295 | inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam 296 | euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.
297 |-
298 |
- Item One 299 |
- Item Two 300 |
- Item Three
301 |
-
302 |
- Nested Item One 303 |
- Nested Item Two 304 |
- Nested Item Three 305 |
307 | - Item Four 308 |
- Item Five 309 |
- Item Six 310 |
- Item Seven
311 |
-
312 |
- Nested Item One 313 |
- Nested Item Two
314 |
-
315 |
- Double Nested Item One 316 |
- Double Nested Item Two 317 |
- Double Nested Item Three 318 |
320 | - Nested Item Three 321 |
323 | - Item Eight 324 |
- Item Nine 325 |
- Item Ten 326 |
Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, 328 | commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. 329 | Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec 330 | magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent 331 | taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget 332 | nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris 333 | eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 334 | inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam 335 | euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.
336 |-
337 |
- Item One 338 |
- Item Two 339 |
- Item Three
340 |
-
341 |
- Nested Item One 342 |
- Nested Item Two 343 |
- Nested Item Three 344 |
346 | - Item Four 347 |
- Item Five 348 |
- Item Six 349 |
- Item Seven
350 |
-
351 |
- Nested Item One 352 |
- Nested Item Two
353 |
-
354 |
- Double Nested Item One 355 |
- Double Nested Item Two 356 |
- Double Nested Item Three 357 |
359 | - Nested Item Three 360 |
362 | - Item Eight 363 |
- Item Nine 364 |
- Item Ten 365 |
Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, 367 | commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. 368 | Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec 369 | magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent 370 | taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget 371 | nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris 372 | eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 373 | inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam 374 | euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.
375 |blockquote
382 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis 384 | tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. 385 | Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. 386 | Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis 387 | in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis 388 | vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.
389 |Aliquam sed quam eget ligula luctus aliquam sed vitae nulla. Aliquam dui dolor, ullamcorper 390 | eget rutrum ut, hendrerit ac lorem. Donec magna est, sollicitudin vel ultrices vel, mattis ut odio. 391 |392 |
Vivamus pretium placerat lorem, in tempor massa convallis sit amet. Aliquam sed quam eget ligula 393 | luctus aliquam sed vitae nulla. Aliquam dui dolor, ullamcorper eget rutrum ut, hendrerit ac lorem. 394 | Donec magna est, sollicitudin vel ultrices vel, mattis ut odio. Integer vel felis laoreet purus 395 | sollicitudin varius sed id ipsum. Suspendisse potenti. Praesent ut justo vitae metus luctus vehicula 396 | a et purus. Suspendisse potenti. Sed viverra, quam non hendrerit laoreet, massa odio blandit arcu, 397 | ac molestie metus diam eu tortor. Donec erat arcu, ultrices sit amet placerat non, feugiat in arcu. 398 | Mauris eros quam, varius eget volutpat vel, tristique sed est. In faucibus feugiat urna sit amet 399 | elementum. Integer consequat rhoncus libero, in molestie augue posuere et. Phasellus ac eleifend 400 | magna. Proin vulputate dui ac justo pharetra consequat. In vel iaculis ligula.
401 |Cras vestibulum lacus sit amet sem commodo ullamcorper aliquet eros vestibulum. Sed fermentum nulla 402 | quis risus suscipit dapibus. Sed vitae velit ut dolor varius semper at id lectus. Aenean quis leo 403 | sit amet tellus tempus cursus. Vivamus semper vehicula ante eget semper. In ac ipsum erat. 404 | Suspendisse lectus erat, commodo nec fringilla quis, interdum non leo. Vivamus et lectus vitae risus 405 | porta sollicitudin luctus eget est. Etiam quis elit vel est suscipit tristique. Nullam fringilla 406 | purus ac velit gravida ullamcorper. Praesent porttitor ante non lacus suscipit porta. Nunc fermentum 407 | sem et metus aliquam ultricies non sollicitudin nibh. Vestibulum ut ligula dolor, in placerat 408 | tortor. Sed nec lacus sed nibh iaculis luctus. Pellentesque habitant morbi tristique senectus et 409 | netus et malesuada fames ac turpis egestas. Curabitur rutrum, diam vel tempor commodo, augue nunc 410 | viverra risus, in pellentesque neque justo eget dolor. Maecenas quis odio leo, a auctor lorem.
411 |rule
417 |Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo 419 | eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur 420 | ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. 421 | Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti 422 | sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit 423 | porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis 424 | luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 425 | Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. 426 | Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.
427 |428 |
Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo 429 | eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur 430 | ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. 431 | Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti 432 | sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit 433 | porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis 434 | luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 435 | Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. 436 | Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.
437 |table
443 || Name | 448 |Title of Employee within Company | 449 |Hire Date | 450 |Number | 451 |Description | 452 |
|---|---|---|---|---|
| Bob Barker | 457 |Web Developer | 458 |05/19/2014 | 459 |00234 | 460 |Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. | 461 |
| Pat Sajak | 464 |Concierge | 465 |02/24/2011 | 466 |003455 | 467 |Dui purus, eleifend vel, consequat non, dictum porta, nulla. | 468 |
| Steve Harvey | 471 |Consultant | 472 |10/19/2013 | 473 |43223 | 474 |Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, 475 | nulla. Eleifend vel, consequat non, dictum porta, nulla. 476 | | 477 |
| Alex Trebek | 480 |Mechanic | 481 |01/09/2016 | 482 |00345234225 | 483 |Dui purus, eleifend vel, consequat non, dictum porta, nulla. | 484 |
| Chuck Woolery | 487 |Makeup | 488 |01/19/1978 | 489 |4322343223 | 490 |Eleifend vel. | 491 |
| Bob Eubanks | 494 |Sales | 495 |12/09/1999 | 496 |003455 | 497 |Dui purus, eleifend vel, consequat non, dictum porta, nulla. Dui purus, eleifend vel, 498 | consequat non, dictum porta, nulla. 499 | | 500 |
| Regis Philbin | 503 |Intern | 504 |01/19/2013 | 505 |43223 | 506 |Eleifend vel, consequat non, dictum porta, nulla. | 507 |
512 |
Narrow Table:
513 || Name | 517 |Title of Employee within Company | 518 |
|---|---|
| Bob Barker | 523 |Web Developer | 524 |
| Pat Sajak | 527 |Concierge | 528 |
| Steve Harvey | 531 |Consultant | 532 |
| Alex Trebek | 535 |Mechanic | 536 |
| Chuck Woolery | 539 |Makeup | 540 |
| Bob Eubanks | 543 |Sales | 544 |
| Regis Philbin | 547 |Intern | 548 |
553 |
Long Table:
554 || Name | 558 |Title of Employee within Company | 559 |Hire Date | 560 |Birthday | 561 |Favorite Color | 562 |Lucky Number | 563 |Number | 564 |Description | 565 |Random Column Heading | 566 |Random Column Heading | 567 |Random Column Heading | 568 |
|---|---|---|---|---|---|---|---|---|---|---|
| Bob Barker | 573 |Web Developer | 574 |05/19/2014 | 575 |05/19/2014 | 576 |red | 577 |7 | 578 |00234 | 579 |Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. | 580 |Random Value | 581 |Random Value | 582 |Random Value | 583 |
| Pat Sajak | 586 |Concierge | 587 |02/24/2011 | 588 |05/19/2014 | 589 |yellow | 590 |7 | 591 |003455 | 592 |Dui purus, eleifend vel, consequat non, dictum porta, nulla. | 593 |Random Value | 594 |Random Value | 595 |Random Value | 596 |
| Steve Harvey | 599 |Consultant | 600 |10/19/2013 | 601 |05/19/2014 | 602 |green | 603 |7 | 604 |43223 | 605 |Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, 606 | nulla. Eleifend vel, consequat non, dictum porta, nulla. 607 | | 608 |Random Value | 609 |Random Value | 610 |Random Value | 611 |
| Alex Trebek | 614 |Mechanic | 615 |01/09/2016 | 616 |05/19/2014 | 617 |purple | 618 |7 | 619 |00345234225 | 620 |Dui purus, eleifend vel, consequat non, dictum porta, nulla. | 621 |Random Value | 622 |Random Value | 623 |Random Value | 624 |
breadcrumbs
633 |forms
657 |buttons
839 |
851 | <a href="javascript:void(0);" class="button">Link Button</a>
852 | <a href="javascript:void(0);" class="button active">Link Button Active</a>
853 | <input type="button" value="Button Input" class="button" />
854 | <input type="reset" value="Form Reset" class="button" />
855 | <button type="button" name="button">Button</button>
856 | <button type="submit" name="submit2">Submit</button>
857 | <button type="reset" name="reset2">Reset</button>
858 | <button disabled>Cancel</button>
859 |
860 | {{$pattern['title']}}
872 |{!! $pattern['description'] !!}
873 | 874 | {!! $pattern['pattern'] !!} 875 | 876 |{!! e($pattern['pattern']) !!}
878 | Styleguide Components
7 |This page displays all the default components found in the styleguide. You will need to place this within your own app to apply your css styles.
8 |
9 | To place within your own blade template files use the component <x-styleguide-base />.
10 |
Add Custom Pattern
10 |-
15 | @foreach ($errors->all() as $error)
16 |
- {{ $error }} 17 | @endforeach 18 |
20 | @endif 21 | 37 |
Edit Custom Pattern
10 |-
15 | @foreach ($errors->all() as $error)
16 |
- {{ $error }} 17 | @endforeach 18 |
20 | @endif 21 | 38 |
Patterns
10 |15 | @endif 16 | 17 |
| ID | 26 |Title | 27 |Description | 28 |Action | 29 ||
| {{$pattern->id}} | 35 |{{$pattern->title}} | 36 |{!! $pattern->description !!} | 37 |Edit | 38 |39 | 44 | | 45 |