basemate-ui-core 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +9 -475
- data/lib/basemate/ui/core/version.rb +1 -1
- metadata +5 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: cd8315d25c6eeaeecd3fe279c87e167541501255b69d44dd55ae501c33ec5ec0
|
4
|
+
data.tar.gz: 220017e1c1d2c4a22cffc6a4027a125a55cc56ce706803de088cb59d1eabc7d3
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c2a4bf9f869fb4b2069405ae6c551466686f433c94a50b88127487ac5741a7dbd69d99779c46e140fd3a4e7dc363829d721a13b37b9c1e0048681bb34dab4a81
|
7
|
+
data.tar.gz: 31f55cbcb9c1fd0142a54f0661cd61908a25a39f3d308065443d04ff11e270d6e9c14a41e851bd988e604e9ce38057fff6c3e2e2951f2d4637d71274c5f8b5d1
|
data/README.md
CHANGED
@@ -3,13 +3,14 @@
|
|
3
3
|
Create component based, object oriented views. Get dynamic SPA-like behaviour
|
4
4
|
through integrated vue.js with zero effort.
|
5
5
|
|
6
|
-
## Purpose
|
7
|
-
|
8
|
-
TODO
|
9
|
-
|
10
6
|
## Why basemate?
|
11
7
|
|
12
|
-
|
8
|
+
### Our why:
|
9
|
+
Frontend development has gotten unnecessarily complex, messy and expensive. Implementing responsive, basic user interfaces often keeps us from creating the really valuable juice (= business logic).
|
10
|
+
### Our how:
|
11
|
+
We're replacing the original view-layer of Ruby on Rails, the most productive MVC framework we know, with our technology. By introducing basemate we get dynamic, fast and simple user interfaces without the need to touch HTML/HAML/ERB/JS/CSS. Plus, it feels like a single page application, but there's no need for all the API hustle SPAs usually bring with them.
|
12
|
+
### Our what:
|
13
|
+
basemate. Declarative frontend solutions.
|
13
14
|
|
14
15
|
## Current State
|
15
16
|
This repo is currently under heavy development and should not be used until the
|
@@ -17,478 +18,11 @@ first tested, stable version is released. Please use it only after being
|
|
17
18
|
onboarded by the basemate team. Feel free to reach out if you really can't
|
18
19
|
wait to start :)
|
19
20
|
|
20
|
-
|
21
|
-
|
22
|
-
## Table of Contents
|
23
|
-
1. [Setup](#setup)
|
24
|
-
2. [Usage](#usage)
|
25
|
-
3. [Customize](#customize)
|
26
|
-
4. [Bundles](#bundles)
|
27
|
-
5. [Themes](#themes)
|
28
|
-
6. [Contribution](#contribution)
|
29
|
-
7. [License](#license)
|
30
|
-
|
31
|
-
## Setup
|
32
|
-
This setup part documents the simplest approach to use Basemate::Ui::Core
|
33
|
-
without any basemate bundle or theme involved. Assets are compiled and served
|
34
|
-
only via sprockets. This makes it very easy to integrate it in a classic Rails
|
35
|
-
project without any further dependencies.
|
36
|
-
**Do not use this setup if you want to build custom vue.js components.**
|
37
|
-
If you want to extend basemate by building your own vue.js components,
|
38
|
-
use Webpacker (see: [Setup with Webpacker](#setup-with-webpacker)).
|
39
|
-
|
40
|
-
### Gemfile
|
41
|
-
|
42
|
-
Add 'basemate-ui-core' to your Gemfile
|
43
|
-
|
44
|
-
```ruby
|
45
|
-
gem 'basemate-ui-core', :git => 'https://github.com/basemate/basemate-ui-core.git'
|
46
|
-
```
|
47
|
-
|
48
|
-
and run
|
49
|
-
````
|
50
|
-
$ bundle install
|
51
|
-
````
|
52
|
-
|
53
|
-
### Javascript
|
54
|
-
|
55
|
-
Require 'basemate-ui-core' in your assets/javascript/application.js
|
56
|
-
|
57
|
-
```
|
58
|
-
//= require basemate-ui-core
|
59
|
-
```
|
60
|
-
|
61
|
-
### Basemate Folder
|
62
|
-
|
63
|
-
Create a folder called 'basemate' in your app directory. All your basemate apps,
|
64
|
-
pages, components (and more to come) will be defined there.
|
65
|
-
|
66
|
-
### Include Helper
|
67
|
-
|
68
|
-
Add the basemate Helper to your controllers. If you want to make the helpers
|
69
|
-
available in all controllers, add it to your 'ApplicationController' this way:
|
70
|
-
|
71
|
-
app/controllers/application_controller.rb
|
72
|
-
```ruby
|
73
|
-
class ApplicationController < ActionController::Base
|
74
|
-
include Basemate::Ui::Core::ApplicationHelper
|
75
|
-
end
|
76
|
-
```
|
77
|
-
|
78
|
-
## Usage
|
79
|
-
|
80
|
-
- [Basemate Page](#basemate-page)
|
81
|
-
- [Setup](#basic-page-setup)
|
82
|
-
- [Partials](#structure-your-basemate-page-response-with-partials)
|
83
|
-
- [Prepare Block](#use-the-prepare-method-to-implement-page-related-business-logic)
|
84
|
-
- [Iterators](#use-iterators)
|
85
|
-
- [Basemate App](#basemate-app)
|
86
|
-
- [Setup](#basic-app-setup)
|
87
|
-
|
88
|
-
### Basemate Page
|
89
|
-
|
90
|
-
#### Basic Page Setup
|
91
|
-
Scenario: You want to use a basemate Page instead of a classic Rails view as a
|
92
|
-
response for a controller action. This is what your setup looks like:
|
93
|
-
|
94
|
-
Your routes:
|
95
|
-
|
96
|
-
config/routes.rb
|
97
|
-
```ruby
|
98
|
-
Rails.application.routes.draw do
|
99
|
-
get '/home', to:'website#home'
|
100
|
-
end
|
101
|
-
```
|
102
|
-
|
103
|
-
Your Application Layout:
|
104
|
-
|
105
|
-
app/views/layouts/application.html.erb
|
106
|
-
```erb
|
107
|
-
<!DOCTYPE html>
|
108
|
-
<html>
|
109
|
-
<head>
|
110
|
-
<title>My App</title>
|
111
|
-
<%= csrf_meta_tags %>
|
112
|
-
<%= csp_meta_tag %>
|
113
|
-
|
114
|
-
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
|
115
|
-
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
|
116
|
-
</head>
|
117
|
-
|
118
|
-
<body>
|
119
|
-
<div id="basemate_ui">
|
120
|
-
<%= yield %>
|
121
|
-
</div>
|
122
|
-
</body>
|
123
|
-
</html>
|
124
|
-
```
|
125
|
-
Note: Wrap your content with a div and assgin the id "basemate_ui"
|
126
|
-
|
127
|
-
Your Controller Action:
|
128
|
-
|
129
|
-
app/controllers/website_controller.rb
|
130
|
-
```ruby
|
131
|
-
class WebsiteController < ApplicationController
|
132
|
-
|
133
|
-
def home
|
134
|
-
@foo = "foo"
|
135
|
-
@bar = "bar"
|
136
|
-
responder_for(Website::Home) #-> Basemate::Ui::Core::ApplicationHelper
|
137
|
-
end
|
138
|
-
|
139
|
-
end
|
140
|
-
```
|
141
|
-
|
142
|
-
Your basemate Page:
|
143
|
-
|
144
|
-
app/basemate/website/home.rb
|
145
|
-
```ruby
|
146
|
-
module Website
|
147
|
-
class Home < Page::Cell::Page
|
148
|
-
|
149
|
-
def response
|
150
|
-
|
151
|
-
components {
|
152
|
-
row do
|
153
|
-
col do
|
154
|
-
plain @foo
|
155
|
-
end
|
156
|
-
col id: "my_special_col" do
|
157
|
-
plain @bar
|
158
|
-
end
|
159
|
-
end
|
160
|
-
}
|
161
|
-
|
162
|
-
end
|
163
|
-
|
164
|
-
end
|
165
|
-
end
|
166
|
-
```
|
167
|
-
This gives you following output:
|
168
|
-
|
169
|
-
```html
|
170
|
-
<div id='website_home'>
|
171
|
-
<div class='row' id="row_1">
|
172
|
-
<div class='col' id="row_1__col_1">
|
173
|
-
foo
|
174
|
-
</div>
|
175
|
-
<div class='col' id="my_special_col">
|
176
|
-
bar
|
177
|
-
</div>
|
178
|
-
</div>
|
179
|
-
</div>
|
180
|
-
```
|
181
|
-
As you can see, each component receives an id that is automatically created
|
182
|
-
using the components' name. Those ids should help you style specific parts of
|
183
|
-
your page later on, and can be overwritten in the page response if you need more freedom.
|
184
|
-
|
185
|
-
Note:
|
186
|
-
- "row", "col", "plain" are predefined core components
|
187
|
-
- a documentation of predefined core component can be found here: TODO
|
188
|
-
- row/col class setup for bootstrap 4.x and material-design-lite can be found here:
|
189
|
-
- bootstrap 4.x: TODO
|
190
|
-
- material-design-lite: TODO
|
191
|
-
- you can customize the output of the core components
|
192
|
-
- see: [Customize](#customize)
|
193
|
-
- you can add your own components
|
194
|
-
- see: [Customize](#customize)
|
195
|
-
- you can use styles from Basemate Themes
|
196
|
-
- see: [Themes](#themes)
|
197
|
-
- you can use components from Basemate Bundles
|
198
|
-
- see: [Bundles](#bundles)
|
199
|
-
|
200
|
-
#### Structure your basemate Page response with partials
|
201
|
-
|
202
|
-
If you don't want to define the response of you page in one block, you can use
|
203
|
-
partials.
|
204
|
-
|
205
|
-
Let's take our app/basemate/website/home.rb and refactor it from this:
|
206
|
-
|
207
|
-
```ruby
|
208
|
-
module Website
|
209
|
-
class Home < Page::Cell::Page
|
210
|
-
|
211
|
-
def response
|
212
|
-
|
213
|
-
components {
|
214
|
-
row do
|
215
|
-
col do
|
216
|
-
plain @foo
|
217
|
-
end
|
218
|
-
col do
|
219
|
-
plain @bar
|
220
|
-
end
|
221
|
-
end
|
222
|
-
row do
|
223
|
-
col do
|
224
|
-
plain "hello"
|
225
|
-
end
|
226
|
-
col do
|
227
|
-
plain "world"
|
228
|
-
end
|
229
|
-
end
|
230
|
-
}
|
231
|
-
|
232
|
-
end
|
233
|
-
|
234
|
-
end
|
235
|
-
end
|
236
|
-
|
237
|
-
```
|
238
|
-
|
239
|
-
to this:
|
240
|
-
|
241
|
-
```ruby
|
242
|
-
module Website
|
243
|
-
class Home < Page::Cell::Page
|
244
|
-
|
245
|
-
def response
|
246
|
-
components {
|
247
|
-
partial :row_1
|
248
|
-
partial :row_2
|
249
|
-
}
|
250
|
-
end
|
251
|
-
|
252
|
-
def row_1
|
253
|
-
partial {
|
254
|
-
row do
|
255
|
-
col do
|
256
|
-
plain @foo
|
257
|
-
end
|
258
|
-
col do
|
259
|
-
plain @bar
|
260
|
-
end
|
261
|
-
end
|
262
|
-
}
|
263
|
-
end
|
264
|
-
|
265
|
-
def row_2
|
266
|
-
partial {
|
267
|
-
row do
|
268
|
-
col do
|
269
|
-
plain "hello"
|
270
|
-
end
|
271
|
-
col do
|
272
|
-
plain "world"
|
273
|
-
end
|
274
|
-
end
|
275
|
-
}
|
276
|
-
end
|
277
|
-
|
278
|
-
|
279
|
-
end
|
280
|
-
end
|
281
|
-
|
282
|
-
```
|
283
|
-
|
284
|
-
You could also implement dynamic partials, for example:
|
285
|
-
|
286
|
-
```ruby
|
287
|
-
module Website
|
288
|
-
class Home < Page::Cell::Page
|
289
|
-
|
290
|
-
def response
|
291
|
-
components {
|
292
|
-
partial :row, @foo, @bar
|
293
|
-
partial :row, "hello", "world"
|
294
|
-
}
|
295
|
-
end
|
296
|
-
|
297
|
-
def row first_col, second_col
|
298
|
-
partial {
|
299
|
-
row do
|
300
|
-
col do
|
301
|
-
plain first_col
|
302
|
-
end
|
303
|
-
col do
|
304
|
-
plain second_col
|
305
|
-
end
|
306
|
-
end
|
307
|
-
}
|
308
|
-
end
|
309
|
-
|
310
|
-
end
|
311
|
-
end
|
312
|
-
|
313
|
-
```
|
314
|
-
#### Use the Prepare method to implement page-related business logic
|
315
|
-
|
316
|
-
If you want to move code out of your controller action, you could place your
|
317
|
-
page-related business logic in the 'prepare'-method of your Basemate Page.
|
318
|
-
|
319
|
-
|
320
|
-
app/controllers/website_controller.rb
|
321
|
-
```ruby
|
322
|
-
class WebsiteController < ApplicationController
|
323
|
-
|
324
|
-
def home
|
325
|
-
#@foo = "foo" #moved to prepare method
|
326
|
-
#@bar = "bar" #moved to prepare method
|
327
|
-
responder_for(Website::Home)
|
328
|
-
end
|
329
|
-
|
330
|
-
end
|
331
|
-
|
332
|
-
```
|
333
|
-
|
334
|
-
app/basemate/website/home.rb
|
335
|
-
```ruby
|
336
|
-
module Website
|
337
|
-
class Home < Page::Cell::Page
|
338
|
-
|
339
|
-
def prepare
|
340
|
-
@foo = "foo"
|
341
|
-
@bar = "bar"
|
342
|
-
end
|
343
|
-
|
344
|
-
def response
|
345
|
-
components {
|
346
|
-
row do
|
347
|
-
col do
|
348
|
-
plain @foo
|
349
|
-
end
|
350
|
-
col do
|
351
|
-
plain @bar
|
352
|
-
end
|
353
|
-
end
|
354
|
-
}
|
355
|
-
end
|
356
|
-
|
357
|
-
end
|
358
|
-
end
|
359
|
-
|
360
|
-
```
|
361
|
-
|
362
|
-
#### Use Iterators
|
363
|
-
|
364
|
-
Often you need to iterate through some datastructure on your UI. Since you're
|
365
|
-
writing pure Ruby, it's straight forward. Iterations can use dynamic partials:
|
366
|
-
|
367
|
-
app/basemate/website/home.rb
|
368
|
-
```ruby
|
369
|
-
module Website
|
370
|
-
class Home < Page::Cell::Page
|
371
|
-
|
372
|
-
def prepare
|
373
|
-
@team_members = ["Mike", "Laura", "John"]
|
374
|
-
end
|
375
|
-
|
376
|
-
def response
|
377
|
-
components {
|
378
|
-
@team_members.each do |member|
|
379
|
-
partial :member_profile, member
|
380
|
-
end
|
381
|
-
}
|
382
|
-
end
|
383
|
-
|
384
|
-
def member_profile member
|
385
|
-
partial {
|
386
|
-
row do
|
387
|
-
col do
|
388
|
-
plain member
|
389
|
-
end
|
390
|
-
end
|
391
|
-
}
|
392
|
-
end
|
393
|
-
end
|
394
|
-
end
|
395
|
-
|
396
|
-
```
|
397
|
-
|
398
|
-
### Basemate App
|
399
|
-
|
400
|
-
### Basic App Setup
|
401
|
-
|
402
|
-
TODO
|
403
|
-
|
404
|
-
|
405
|
-
## Customize
|
406
|
-
|
407
|
-
### Customize Core Components
|
408
|
-
|
409
|
-
Add a ruby file to the correct basemate customize folder, for example:
|
410
|
-
|
411
|
-
app/basemate/customize/ui/core/row.rb
|
412
|
-
```ruby
|
413
|
-
|
414
|
-
module Customize::Ui::Core
|
415
|
-
class Row
|
416
|
-
|
417
|
-
def row_classes(classes, options)
|
418
|
-
classes << "justify-content-md-center" if options[:center] == true
|
419
|
-
end
|
420
|
-
|
421
|
-
end
|
422
|
-
end
|
423
|
-
```
|
424
|
-
|
425
|
-
and change your Basemate Page to use your new interface:
|
426
|
-
|
427
|
-
app/basemate/website/home.rb
|
428
|
-
```ruby
|
429
|
-
module Website
|
430
|
-
class Home < Page::Cell::Page
|
431
|
-
|
432
|
-
def response
|
433
|
-
|
434
|
-
components {
|
435
|
-
row center: true do
|
436
|
-
col do
|
437
|
-
plain @foo
|
438
|
-
end
|
439
|
-
col do
|
440
|
-
plain @bar
|
441
|
-
end
|
442
|
-
end
|
443
|
-
}
|
444
|
-
|
445
|
-
end
|
446
|
-
|
447
|
-
end
|
448
|
-
end
|
449
|
-
|
450
|
-
```
|
451
|
-
The result is the following, customized output:
|
452
|
-
|
453
|
-
```html
|
454
|
-
<div class='row justify-content-md-center'>
|
455
|
-
<div class='col'>
|
456
|
-
foo
|
457
|
-
</div>
|
458
|
-
<div class='col'>
|
459
|
-
bar
|
460
|
-
</div>
|
461
|
-
</div>
|
462
|
-
```
|
463
|
-
### Create your own Component
|
464
|
-
|
465
|
-
TODO
|
466
|
-
|
467
|
-
### Setup with Webpacker
|
468
|
-
|
469
|
-
TODO
|
470
|
-
|
471
|
-
## Bundles
|
472
|
-
|
473
|
-
TODO
|
474
|
-
|
475
|
-
## Templates
|
476
|
-
|
477
|
-
TODO
|
478
|
-
|
479
|
-
## Contribution
|
480
|
-
|
481
|
-
### Core
|
482
|
-
|
483
|
-
TODO
|
484
|
-
|
485
|
-
### Bundles
|
486
|
-
|
487
|
-
TODO
|
21
|
+
## Documentation
|
488
22
|
|
489
|
-
|
23
|
+
Documentation is built with basemate and hosted here: [Docs](https://basemate-ui-core.herokuapp.com)
|
490
24
|
|
491
|
-
|
25
|
+
Source code of documentation can be found here: [Docs Source](https://github.com/basemate/basemate-ui-core-docs)
|
492
26
|
|
493
27
|
## License
|
494
28
|
The gem is available as open source under the terms of the
|
metadata
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: basemate-ui-core
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.2.
|
4
|
+
version: 0.2.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jonas Jabari
|
8
8
|
- Pascal Wengerter
|
9
|
+
- Christopher Bastert
|
9
10
|
autorequire:
|
10
11
|
bindir: bin
|
11
12
|
cert_chain: []
|
@@ -103,6 +104,7 @@ description: We're replacing the original view-layer of Ruby on Rails, the most
|
|
103
104
|
email:
|
104
105
|
- jonas@basemate.io
|
105
106
|
- pascal@basemate.io
|
107
|
+
- chris@basemate.io
|
106
108
|
executables: []
|
107
109
|
extensions: []
|
108
110
|
extra_rdoc_files: []
|
@@ -173,7 +175,8 @@ files:
|
|
173
175
|
homepage: https://basemate.io
|
174
176
|
licenses:
|
175
177
|
- MIT
|
176
|
-
metadata:
|
178
|
+
metadata:
|
179
|
+
source_code_uri: https://github.com/basemate/basemate-ui-core
|
177
180
|
post_install_message:
|
178
181
|
rdoc_options: []
|
179
182
|
require_paths:
|