base_css-rails 1.1 → 1.2

Sign up to get free protection for your applications and to get access to all the features.
data/README.md CHANGED
@@ -19,25 +19,43 @@ Or install it yourself as:
19
19
 
20
20
  ## Usage
21
21
 
22
+ ### With the installer
23
+
24
+ Run the rails generator:
25
+
26
+ rails g base_css:install
27
+
28
+ ### Manual installation
29
+
22
30
  Once installed on the Rails application, you just have to require the stylesheet on your application.css file
23
31
 
24
- ```
25
- *= require base-style
26
- ```
32
+
33
+ *= require base-style
34
+
27
35
 
28
36
  Also you have to require the javascript file on you application.js file
29
37
 
30
- ```
31
- //= require base-script
32
- ```
33
38
 
34
- And you're ready to go, for more information on how to use the framework, check the [Documentation](http://matthewhartman.github.com/base/demo/)
39
+ //= require base-script
40
+
41
+
42
+ And you're ready to go, for more information on how to use the framework, check the [Documentation](http://matthewhartman.github.com/base/docs/base-css.html)
43
+
44
+ ## Changelog
45
+
46
+ - Added a install generator
47
+ - Updated the file to the latest [update](https://github.com/matthewhartman/base/commit/2be664ce77faadb167aef89e7964d1d48227724b) from the Github repository
48
+
35
49
 
36
50
  ## Credits
37
51
 
52
+ ### Base author
53
+
38
54
  Credits go to [matthewhartman](https://github.com/matthewhartman) for creating this cool and easy to use framework
39
55
 
40
- Also, you can follow me on [twitter](http://twitter.com/rkrdo89)
56
+ ### About me
57
+
58
+ You can follow me on [Twitter](http://twitter.com/rkrdo89), [Facbeook](https://www.facebook.com/rkrdoc89) and [Linkedn](http://www.linkedin.com/pub/ricardo-cruz/55/38/2b3)
41
59
 
42
60
  ## License
43
61
  Copyright (c) 2012 Ricardo Cruz
@@ -0,0 +1,6 @@
1
+ module BaseCss
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ end
5
+ end
6
+ end
@@ -1,5 +1,5 @@
1
1
  module BaseCss
2
2
  module Rails
3
- VERSION = "1.1"
3
+ VERSION = "1.2"
4
4
  end
5
5
  end
@@ -2,8 +2,6 @@ require "base_css-rails/version"
2
2
 
3
3
  module BaseCss
4
4
  module Rails
5
- # Your code goes here...
6
- class Engine < ::Rails::Engine
7
- end
5
+ require 'base_css-rails/engine'
8
6
  end
9
7
  end
@@ -0,0 +1,27 @@
1
+ require 'rails/generators'
2
+
3
+ module BaseCss
4
+ module Generators
5
+ class InstallGenerator < ::Rails::Generators::Base
6
+
7
+ desc 'This generator adds the basecss files to the assets manifest'
8
+ def add_assets
9
+ insert_into_file "app/assets/javascripts/application#{detect_js_format[0]}", "#{detect_js_format[1]} require base-script\n", :after => "jquery_ujs\n"
10
+ insert_into_file "app/assets/stylesheets/application#{detect_css_format[0]}", "#{detect_css_format[1]} require base-style\n", :after => "require_self\n"
11
+ end
12
+
13
+ def detect_js_format
14
+ return ['.js.coffee', '#='] if File.exist?('app/assets/javascripts/application.js.coffee')
15
+ return ['.js', '//='] if File.exist?('app/assets/javascripts/application.js')
16
+ end
17
+
18
+ def detect_css_format
19
+ return ['.css', ' *='] if File.exist?('app/assets/stylesheets/application.css')
20
+ return ['.css.sass', ' //='] if File.exist?('app/assets/stylesheets/application.css.sass')
21
+ return ['.sass', ' //='] if File.exist?('app/assets/stylesheets/application.sass')
22
+ return ['.css.scss', ' //='] if File.exist?('app/assets/stylesheets/application.css.scss')
23
+ return ['.scss', ' //='] if File.exist?('app/assets/stylesheets/application.scss')
24
+ end
25
+ end
26
+ end
27
+ end
@@ -2,7 +2,7 @@
2
2
 
3
3
  Base Stylesheet - http://matthewhartman.github.com/base/
4
4
  Author: Matthew Hartman - http://www.matthewhartman.com.au/
5
- Version: 1.2 - Last Updated: 12th January, 2013
5
+ Version: 1.2 - Last Updated: 16th January, 2013
6
6
 
7
7
  ========================================================================== */
8
8
  /* ==========================================================================
@@ -31,6 +31,17 @@
31
31
  .section {
32
32
  zoom: 1;
33
33
  }
34
+ .checkbox:before,
35
+ .checkbox:after {
36
+ content: "";
37
+ display: table;
38
+ }
39
+ .checkbox:after {
40
+ clear: both;
41
+ }
42
+ .checkbox {
43
+ zoom: 1;
44
+ }
34
45
  /* General Resets */
35
46
  /* Start font size at 100% */
36
47
  html {
@@ -43,12 +54,18 @@ select,
43
54
  textarea {
44
55
  font-family: sans-serif;
45
56
  }
46
- /* Remove all default borders */
57
+ /* Remove default borders */
47
58
  form,
48
59
  fieldset,
49
60
  a img {
50
61
  border: 0;
51
62
  }
63
+ /* Remove default spacing */
64
+ form,
65
+ fieldset {
66
+ margin: 0;
67
+ padding: 0;
68
+ }
52
69
  /* Common Classes */
53
70
  .left {
54
71
  float: left;
@@ -185,27 +202,42 @@ small {
185
202
  /* Block Quotes, Pre and Code Blocks */
186
203
  blockquote,
187
204
  q {
188
- quotes: none;
189
- background-color: #f7f7f9;
190
- border: 1px solid #e1e1e8;
191
- -webkit-border-radius: 3px;
192
- -moz-border-radius: 3px;
193
- border-radius: 3px;
194
- -moz-background-clip: padding;
195
- -webkit-background-clip: padding-box;
196
- background-clip: padding-box;
197
- padding: .5em 1em;
198
- margin: 0;
205
+ font-size: 20px;
206
+ font-size: 1.25rem;
207
+ line-height: 32px;
208
+ line-height: 2rem;
209
+ padding: 20px 30px;
210
+ margin: 20px 0;
211
+ font-family: "Georgia", "Times";
199
212
  font-style: italic;
200
213
  }
201
- code,
202
- pre {
214
+ blockquote:before,
215
+ q:before,
216
+ blockquote:after,
217
+ q:after {
218
+ font-size: 80px;
219
+ font-size: 5rem;
220
+ color: #999999;
221
+ }
222
+ blockquote:before,
223
+ q:before {
224
+ content: "\201C";
225
+ margin-left: -0.5em;
226
+ float: left;
227
+ }
228
+ blockquote:after,
229
+ q:after {
230
+ content: "\201D";
231
+ margin-right: -0.5em;
232
+ float: right;
233
+ }
234
+ code {
203
235
  padding: 2px 6px;
204
- font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
236
+ font-family: Monaco, Andale Mono, "Courier New", monospace;
205
237
  font-size: 12px;
206
238
  font-size: 0.75rem;
207
- background-color: #f1f1f1;
208
- border: 1px solid #dddddd;
239
+ background-color: #fee9cc;
240
+ border: 1px solid #ffc9b3;
209
241
  line-height: normal;
210
242
  color: #222222;
211
243
  -webkit-border-radius: 3px;
@@ -232,6 +264,10 @@ table {
232
264
  border-left: 0;
233
265
  background-color: #fff;
234
266
  border-spacing: 0;
267
+ table-layout: fixed;
268
+ word-wrap: break-word;
269
+ -ms-word-wrap: break-word;
270
+ *white-space: normal;
235
271
  }
236
272
  table th,
237
273
  table td {
@@ -273,6 +309,202 @@ ol ol {
273
309
  }
274
310
  /* 1.5 Forms, Labels and Inputs
275
311
  ========================================================================== */
312
+ fieldset {
313
+ margin: 1.5em 0;
314
+ }
315
+ legend {
316
+ font-family: arial, helvetica, clean, sans-serif;
317
+ font-size: 32px;
318
+ font-size: 2rem;
319
+ line-height: normal;
320
+ font-weight: bold;
321
+ width: 100%;
322
+ display: block;
323
+ border: 0;
324
+ *margin-left: -5px;
325
+ }
326
+ label {
327
+ font-weight: bold;
328
+ cursor: pointer;
329
+ }
330
+ .inline-field label {
331
+ display: inline-block;
332
+ *zoom: 1;
333
+ *display: inline;
334
+ margin-right: 1em;
335
+ }
336
+ .field {
337
+ padding: 0.2em 0;
338
+ }
339
+ .field label {
340
+ display: block;
341
+ }
342
+ .checkbox {
343
+ display: block;
344
+ position: relative;
345
+ line-height: normal;
346
+ padding: 0.2em 0;
347
+ }
348
+ .checkbox label {
349
+ display: table-cell;
350
+ *zoom: 1;
351
+ }
352
+ .checkbox input[type=checkbox],
353
+ .checkbox input[type=radio] {
354
+ float: left;
355
+ top: -2px;
356
+ position: relative;
357
+ margin-right: 1em;
358
+ }
359
+ /* Inputs (Text, Search, Email, etc) */
360
+ input[type=text],
361
+ input[type=password],
362
+ input[type=email],
363
+ input[type=search],
364
+ input[type=tel],
365
+ input[type=file] {
366
+ outline: 0;
367
+ padding: 2px 5px;
368
+ height: 28px;
369
+ -webkit-appearance: none;
370
+ -moz-appearance: none;
371
+ vertical-align: middle;
372
+ font-size: 21px;
373
+ font-size: 1.3125rem;
374
+ font-weight: bold;
375
+ background-color: #ffffff;
376
+ color: #666666;
377
+ border: 1px solid #dddddd;
378
+ border-top: 1px solid #999999;
379
+ -webkit-border-radius: 3px;
380
+ -moz-border-radius: 3px;
381
+ border-radius: 3px;
382
+ -moz-background-clip: padding;
383
+ -webkit-background-clip: padding-box;
384
+ background-clip: padding-box;
385
+ }
386
+ input[type=file] {
387
+ border: 0;
388
+ height: 20px;
389
+ }
390
+ input[type=button]::-moz-focus-inner,
391
+ input[type=submit]::-moz-focus-inner,
392
+ input[type=reset]::-moz-focus-inner {
393
+ padding: 0;
394
+ border: 0;
395
+ }
396
+ input[type="search"]::-webkit-search-cancel-button {
397
+ -webkit-appearance: none;
398
+ }
399
+ input[type=submit],
400
+ input[type=button],
401
+ input[type=reset] {
402
+ line-height: normal;
403
+ cursor: pointer;
404
+ -webkit-appearance: none;
405
+ /* Remove Default Browser Behaviour for Safari */
406
+
407
+ -moz-appearance: none;
408
+ /* Remove Default Browser Behaviour for Firefox */
409
+
410
+ }
411
+ textarea {
412
+ font-size: 21px;
413
+ font-size: 1.3125rem;
414
+ font-weight: bold;
415
+ background-color: #ffffff;
416
+ color: #666666;
417
+ outline: 0;
418
+ padding: 2px 5px;
419
+ vertical-align: top;
420
+ border: 1px solid #dddddd;
421
+ padding: 10px;
422
+ resize: none;
423
+ -webkit-border-radius: 3px;
424
+ -moz-border-radius: 3px;
425
+ border-radius: 3px;
426
+ -moz-background-clip: padding;
427
+ -webkit-background-clip: padding-box;
428
+ background-clip: padding-box;
429
+ }
430
+ select {
431
+ font-size: 14px;
432
+ font-size: 0.875rem;
433
+ outline: 0;
434
+ border: 0;
435
+ padding: 7px;
436
+ height: 30px;
437
+ line-height: normal;
438
+ display: inline-block;
439
+ *zoom: 1;
440
+ *display: inline;
441
+ vertical-align: middle;
442
+ *border: 10px solid #ffffff;
443
+ outline: 1px solid #999999;
444
+ }
445
+ select[multiple] {
446
+ min-height: 100px;
447
+ vertical-align: top;
448
+ border: 1px solid #dddddd;
449
+ }
450
+ select,
451
+ input[type=text],
452
+ input[type=password],
453
+ input[type=email],
454
+ input[type=search],
455
+ input[type=tel] {
456
+ width: 280px;
457
+ }
458
+ textarea {
459
+ width: 260px;
460
+ }
461
+ /* Buttons */
462
+ .buttons {
463
+ padding: 1em 0;
464
+ }
465
+ .button {
466
+ font-size: 14px;
467
+ font-size: 0.875rem;
468
+ line-height: normal;
469
+ cursor: pointer;
470
+ border: 0;
471
+ padding: 0.8em 3em;
472
+ color: #222222;
473
+ text-decoration: none;
474
+ text-align: center;
475
+ }
476
+ .orange-button {
477
+ background-color: #fee9cc;
478
+ }
479
+ .orange-button:hover {
480
+ background-color: #ffe0b5;
481
+ }
482
+ .orange-button:active {
483
+ background-color: #fdeed8;
484
+ }
485
+ .button[disabled],
486
+ .button.disabled {
487
+ color: #999999;
488
+ background-color: #f1f1f1;
489
+ }
490
+ .no-style-button {
491
+ font-size: 13px;
492
+ font-size: 0.8125rem;
493
+ color: #ff3300;
494
+ text-decoration: underline;
495
+ border: 0;
496
+ background: transparent;
497
+ height: auto;
498
+ padding: 0;
499
+ }
500
+ .no-style-button:hover {
501
+ text-decoration: none;
502
+ }
503
+ .no-style-button[disabled],
504
+ .no-style-button.disabled {
505
+ text-decoration: none;
506
+ color: #999999;
507
+ }
276
508
  /* ==========================================================================
277
509
  /* 2.0 - Grid Layout (Responsive)
278
510
  ========================================================================== */
@@ -373,6 +605,7 @@ ol ol {
373
605
  padding: 0;
374
606
  margin: 0;
375
607
  }
608
+ /* Mobile Grid */
376
609
  .one,
377
610
  .two,
378
611
  .three,
@@ -394,10 +627,24 @@ ol ol {
394
627
  padding-left: 20px;
395
628
  padding-right: 20px;
396
629
  }
630
+ /* Mobile Tables */
397
631
  table th,
398
632
  table td {
399
633
  padding: 4px;
400
634
  }
635
+ /* Mobile Forms */
636
+ input[type=text],
637
+ input[type=password],
638
+ input[type=email],
639
+ input[type=search],
640
+ input[type=tel],
641
+ textarea {
642
+ width: 90%;
643
+ padding: 5%;
644
+ }
645
+ select {
646
+ width: 100%;
647
+ }
401
648
  .nomobile {
402
649
  display: none;
403
650
  }
@@ -405,148 +652,4 @@ ol ol {
405
652
  display: block;
406
653
  }
407
654
  }
408
- /* End Mobile Media Query */
409
- /* ==========================================================================
410
- /* -- Print Layout
411
- ========================================================================== */
412
- @media print {
413
- body {
414
- font-family: serif;
415
- /* Serif is easier to read offscreen */
416
- margin: 0.5cm;
417
- }
418
- }
419
- /* End Print Media Query */
420
- .header {
421
- background-color: #d6511d;
422
- margin-bottom: 10px;
423
- padding-top: 10px;
424
- padding-bottom: 10px;
425
- }
426
- .logo {
427
- margin: 14px 0 0 0;
428
- color: #fff;
429
- font-size: 32px;
430
- font-size: 2rem;
431
- font-weight: bold;
432
- text-transform: uppercase;
433
- text-decoration: none;
434
- }
435
- .logo .small {
436
- font-size: 11px;
437
- position: relative;
438
- top: -20px;
439
- }
440
- .logo:hover,
441
- .logo:active,
442
- .logo:visited {
443
- color: #fff;
444
- }
445
- .navigation {
446
- line-height: normal;
447
- padding-top: 12px;
448
- }
449
- .navigation ul {
450
- list-style: none;
451
- padding: 0;
452
- margin: 0;
453
- }
454
- .navigation ul li {
455
- float: left;
456
- margin-left: 10px;
457
- }
458
- .navigation ul li:first-child {
459
- margin-left: 0;
460
- }
461
- .navigation ul li a {
462
- text-transform: uppercase;
463
- color: #fff;
464
- padding: 8px 24px;
465
- border: 1px solid #d6511d;
466
- text-decoration: none;
467
- font-size: 12px;
468
- }
469
- .navigation ul li a.current {
470
- border-color: #fff;
471
- }
472
- .navigation ul li a:hover {
473
- border-color: #fff0ea;
474
- }
475
- .navigation ul li a:active {
476
- background-color: #ffc9b3;
477
- border-color: #ffc9b3;
478
- color: #222;
479
- }
480
- .content-inner {
481
- padding-top: 20px;
482
- padding-bottom: 20px;
483
- }
484
- @media only screen and (min-width: 720px) and (max-width: 959px) {
485
- .navigation ul li {
486
- margin-left: 5px;
487
- }
488
- .navigation ul li a {
489
- padding: 10px 15px;
490
- }
491
- }
492
- @media only screen and (max-width: 719px) {
493
- .header {
494
- padding-bottom: 0;
495
- text-align: center;
496
- }
497
- .header .container {
498
- padding: 0;
499
- }
500
- .logo {
501
- float: none;
502
- margin: 0 auto;
503
- display: inline-block;
504
- *zoom: 1;
505
- *display: inline;
506
- }
507
- .logo .small {
508
- font-size: 1em;
509
- position: static;
510
- }
511
- .nav-toggle {
512
- display: block;
513
- background-color: #fddfd3;
514
- text-align: center;
515
- color: #222;
516
- padding: 10px;
517
- text-decoration: none;
518
- }
519
- .nav-toggle:hover,
520
- .nav-toggle.active {
521
- background-color: #fff0ea;
522
- }
523
- .navigation {
524
- float: none;
525
- }
526
- .navigation ul li {
527
- float: none;
528
- margin-left: 0;
529
- }
530
- .navigation ul li a {
531
- color: #222;
532
- padding: 10px;
533
- display: block;
534
- font-size: 1em;
535
- text-transform: none;
536
- background-color: #fddfd3;
537
- border: 0;
538
- }
539
- .navigation ul li a:hover {
540
- background-color: #fff0ea;
541
- }
542
- .menu {
543
- list-style: none;
544
- padding: 0;
545
- margin: 0;
546
- }
547
- .showmobile.inline-block {
548
- display: inline-block;
549
- *zoom: 1;
550
- *display: inline;
551
- }
552
- }
655
+ /* End Mobile Media Query */
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: base_css-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: '1.1'
4
+ version: '1.2'
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-01-22 00:00:00.000000000 Z
12
+ date: 2013-02-24 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: railties
@@ -35,8 +35,10 @@ executables: []
35
35
  extensions: []
36
36
  extra_rdoc_files: []
37
37
  files:
38
+ - lib/base_css-rails/engine.rb
38
39
  - lib/base_css-rails/version.rb
39
40
  - lib/base_css-rails.rb
41
+ - lib/generators/base_css/install_generator.rb
40
42
  - vendor/assets/javascripts/base-script.js
41
43
  - vendor/assets/stylesheets/base-style.css
42
44
  - LICENSE.txt