dom_limpio 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (20) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +14 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +21 -0
  5. data/README.md +35 -0
  6. data/Rakefile +2 -0
  7. data/dom-limpio-logo.png +0 -0
  8. data/dom_limpio.gemspec +23 -0
  9. data/index.html +214 -0
  10. data/lib/dom_limpio/engine.rb +11 -0
  11. data/lib/dom_limpio/version.rb +3 -0
  12. data/lib/dom_limpio.rb +6 -0
  13. data/src/css/dom-limpio/_forms.scss +47 -0
  14. data/src/css/dom-limpio/_layout.scss +108 -0
  15. data/src/css/dom-limpio/_type.scss +134 -0
  16. data/src/css/dom-limpio.scss +9 -0
  17. data/src/css/site-type/_sample.scss +80 -0
  18. data/src/css/site-type/_variables.scss +23 -0
  19. data/src/css/site-type/_weft.scss +25 -0
  20. metadata +92 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: fd6c32608209de4baf452665d6cd00d1a682088d
4
+ data.tar.gz: dfc899e28606698dc90f04abf32d59009681c9cb
5
+ SHA512:
6
+ metadata.gz: 6c54377859cad8fde92f24734374137cabd8fcdd4546c521addfca0d631aa196c428eb88f723fbfbd4389a2fdf4bb886650da9ef1f01bd913515b7eeda5ec69c
7
+ data.tar.gz: 1b580c0a99489f7e3950ce34b3a20bfce455a376fe8bd7469a2c9df469629ca6c5686dc5ab52df359815f9f0c3be12fa05bacfdfa1f46d52dc1fc280de7f4b14
data/.gitignore ADDED
@@ -0,0 +1,14 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /Gemfile.lock
4
+ /_yardoc/
5
+ /coverage/
6
+ /doc/
7
+ /pkg/
8
+ /spec/reports/
9
+ /tmp/
10
+ *.bundle
11
+ *.so
12
+ *.o
13
+ *.a
14
+ mkmf.log
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in dom_limpio.gemspec
4
+ gemspec
data/LICENSE.txt ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2016 Carlos Cabo
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,35 @@
1
+
2
+ # dom-limpio
3
+
4
+ <img src="dom-limpio-logo.png" alt="dom-limpio-logo.png" align="left" style="float:left;margin-right:20px;margin-bottom:40px;">
5
+
6
+ Nuestro propio **reset de CSS** cogiendo las ideas que más nos interesan de las diferentes fuentes (_Normalize 4, HTML5 Doctor..._ ) e intentando añadir nuestras propias necesidades (lo que solemos emplear por defecto en los proyectos, y algunas cosas que necesitamos recurrentemente, especialmente en _mobile_).
7
+
8
+ ## Reset de tipografías
9
+ La segunda parte de la idea es que **dom-limpio** resetee todos los elementos de texto al mismo estilo _base_, esto nos facilitará más tarde porder hacer cambios de marcado (por necesidades de SEO, por ejemplo) con mucho menos dolor.
10
+
11
+ Por ejemplo convertir un `<p class="titulo">` en un `<h1 class="titulo">` sin dolores de cabeza.
12
+
13
+ ## Instalación / configuración
14
+
15
+ En el repo hay 2 carpetas:
16
+
17
+ `dom-limpio`
18
+ La carpeta de los resets propiamente dichos. Podemos elegir que elementos necesitamos resetear según el proyecto (por ejemplo, si nuestro proyecto no tiene formularios no necesitamos incluir `dom-limpio/_forms.scss`, o si no deseamos resetear las tipografías podemos ignorar `dom-limpio/_type.scss`).
19
+
20
+ `site-type`
21
+ Ejemplo de configuración de la tipografía de un proyecto, para usar de base en nuevos desarrollos.
22
+
23
+ El orden de inclusión de los parciales de CSS puede verse en `dom-limpio.scss`:
24
+
25
+ ````SASS
26
+ /* Include the modules your need for your project */
27
+ @import "dom-limpio/layout"; // Base layout reset
28
+ @import "dom-limpio/type"; // Typography reset
29
+ @import "dom-limpio/forms"; // Form reset
30
+
31
+ /* Define generice type styles for the project here */
32
+ @import "site-type/variables"; // Common variables
33
+ @import "site-type/weft"; // External font
34
+ @import "site-type/sample"; // Generic type styles for your site
35
+ ````
data/Rakefile ADDED
@@ -0,0 +1,2 @@
1
+ require "bundler/gem_tasks"
2
+
data/dom-limpio-logo.png ADDED
Binary file
data/dom_limpio.gemspec ADDED
@@ -0,0 +1,23 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'dom_limpio/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "dom_limpio"
8
+ spec.version = DomLimpio::VERSION
9
+ spec.authors = ["carloscabo"]
10
+ spec.email = ["carloscabo@gmail.com"]
11
+ spec.summary = 'Custom layout / form / typography reset in SASS'
12
+ spec.description = 'Our own CSS reset picking the best ideas from several sources (Normalize 4, HTML4 Doctor...) and trying to add our own customizations (what we use as default in most of the projects we start, specially mobile settings).'
13
+ spec.homepage = "https://github.com/carloscabo/dom-limpio"
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files -z`.split("\x0")
17
+ spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
18
+ spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
19
+ spec.require_paths = ["lib"]
20
+
21
+ spec.add_development_dependency "bundler", "~> 1.7"
22
+ spec.add_development_dependency "rake", "~> 10.0"
23
+ end
data/index.html ADDED
@@ -0,0 +1,214 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Test text elements</title>
6
+ <link rel="stylesheet" href="css/dom-limpio.css">
7
+ <style>
8
+ body {
9
+ padding: 20px;
10
+ }
11
+ #tests-elements {
12
+ width: 1024px;
13
+ }
14
+ .row {
15
+ padding-bottom: 16px;
16
+ }
17
+ </style>
18
+
19
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
20
+ <script>
21
+ $(document).ready(function() {
22
+ console.log('eo');
23
+ });
24
+ </script>
25
+ </head>
26
+ <body>
27
+ <div id="tests-elements">
28
+
29
+ <h1>h1. Lorem ipsum dolor sit amet, <b>b. consectetur <i>i. adipisicing</i></b> elit. Qui dolorum <i>i. blanditiis</i> quae amet tempore fuga quam cumque voluptatem fugiat necessitatibus.</h1>
30
+
31
+ <h2>h2. Lorem ipsum dolor sit amet, <b>b. consectetur <i>i. adipisicing</i></b> elit. Unde quod, <i>i. tenetur</i> obcaecati qui quae id suscipit facere esse nulla nobis.</h2>
32
+
33
+ <h3>h3. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Tempora, ut <i>fugiat illum</i> explicabo in cupiditate repellat. Repudiandae itaque, quis enim.</h3>
34
+
35
+ <h4>h4. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Voluptatem, maxime? <i>Repellat voluptas</i> sapiente magnam labore eius nam itaque! Cumque, sint.</h4>
36
+
37
+ <h5>h5. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Sint <i>recusandae placeat</i>, dolores aliquam nisi dicta temporibus unde eum consequatur! Provident!</h5>
38
+
39
+ <h6>h6. Lorem ipsum dolor sit amet, <b>consectetur<i> adipisicing</i></b> elit. Similique magnam facere voluptatibus cupiditate sequi vitae esse voluptate! Laborum, similique, magnam.</h6>
40
+
41
+ <p>p. Lorem ipsum dolor sit amet, <span>span. consectetur <span>span.adipisicing</span> elit</span>. <b>b. Fugiat facere similique</b> maiores itaque dignissimos rem <i>asperiores</i> esse! Nihil ea iure totam eum itaque qui, animi minima doloribus esse nam nostrum numquam laudantium id voluptatum, similique nulla aut eaque ut nobis vel quas, iusto eius veritatis? A voluptas necessitatibus est quibusdam <span>quam <b>obcaecati fugit</b> asperiores earum saepe anim<i>corporis cupiditate alias</i>e alias, accusantium ut ratione temporibus vel? Velit in itaque nostrum!</span> Nobis dolorem obcaecati <sup>23</sup> iure <sub>2356</sub> dolorum expedita aliquam reprehenderit illo inventore id <i>temporibus eum</i> debitis rem cum, ipsum odit quam iste libero non dolore error. Sint ipsum quo et, illo delectus.</p>
42
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis praesentium repellendus dolore hic alias commodi quia quod quisquam excepturi ipsam.</p>
43
+
44
+ <span>span.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, commodi quas adipisci sint vero cupiditate, repellendus atque totam voluptatibus dolore vitae. <span>span. Omnis <b>aspernatur velit</b>, assumenda sequi <i>veritatis delectus</i> suscipit error alias tempora molestiae dolorem accusamus aliquam, nemo consequuntur</span> ex ducimus <b>accusantium officia</b> nulla natus rerum? <i>Praesentium cupiditate</i> nemo eaque laborum inventore, nihil exercitationem aspernatur, accusamus unde ea ad necessitatibus, iste!</span>
45
+
46
+ <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, esse.</strong>
47
+ <b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, sapiente.</b>
48
+ <em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, officia.</em>
49
+ <i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, optio.</i>
50
+ <addess>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, in.</addess>
51
+
52
+ <hr><!-- //////////////////////////////// -->
53
+
54
+ <ul>
55
+ <li><b>ul.li.</b> Lorem ipsum dolor</li>
56
+ <li><p>sit amet, consectetur</p></li>
57
+ <li><span>adipisicing elit</span>
58
+ <ul>
59
+ <li><span>Quam dolor reiciendis vero</span></li>
60
+ <li>doloremque mollitia dolores
61
+ <ul>
62
+ <li><b>ipsam nisi, veritatis</b></li>
63
+ <li><i>deleniti unde vitae optio</i></li>
64
+ <li>fugiat cumque!</li>
65
+ <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores vel <span>nisi <b><i>praesentium</i> sint</b> necessitatibus dignissimos</span> cupiditate iste facilis doloribus exercitationem odio fuga aperiam fugiat officiis non, repellendus ratione suscipit ut ducimus corrupti recusandae modi vero vitae! Distinctio, nulla ab recusandae?</p></li>
66
+ <li>iure iste reprehenderit
67
+ <ul>
68
+ <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem aperiam praesentium non quasi molestiae adipisci sapiente, rem rerum eos. Dolorum.</li>
69
+ </ul>
70
+ </li>
71
+ <li>doloremque, recusandae</li>
72
+ </ul>
73
+ </li>
74
+ </ul>
75
+ </li>
76
+ <li>in nobis aspernatur</li>
77
+ <li>nostrum laudantium
78
+ <ul>
79
+ <li>eos ea similique</li>
80
+ <li>molestias sapiente</li>
81
+ <li>laborum quae nobis,</li>
82
+ </ul>
83
+ </li>
84
+ <li>optio cupiditate</li>
85
+ <li>necessitatibus, in nihil ipsum</li>
86
+ <li>quasi! Ea sunt, doloribus animi!</li>
87
+ </ul>
88
+
89
+ <ol>
90
+ <li><b>ol.li.</b> Lorem ipsum dolor</li>
91
+ <li><p>sit amet, consectetur</p></li>
92
+ <li><span>adipisicing elit</span>
93
+ <ol>
94
+ <li><span>Quam dolor reiciendis vero</span></li>
95
+ <li>doloremque mollitia dolores
96
+ <ol>
97
+ <li><b>ipsam nisi, veritatis</b></li>
98
+ <li><i>deleniti unde vitae optio</i></li>
99
+ <li>fugiat cumque!</li>
100
+ <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores vel <span>nisi <b><i>praesentium</i> sint</b> necessitatibus dignissimos</span> cupiditate iste facilis doloribus exercitationem odio fuga aperiam fugiat officiis non, repellendus ratione suscipit ut ducimus corrupti recusandae modi vero vitae! Distinctio, nolla ab recusandae?</p></li>
101
+ <li>iure iste reprehenderit
102
+ <ol>
103
+ <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem aperiam praesentium non quasi molestiae adipisci sapiente, rem rerum eos. Dolorum.</li>
104
+ </ol>
105
+ </li>
106
+ <li>doloremque, recusandae</li>
107
+ </ol>
108
+ </li>
109
+ </ol>
110
+ </li>
111
+ <li>in nobis aspernatur</li>
112
+ <li>nostrum laudantium
113
+ <ol>
114
+ <li>eos ea similique</li>
115
+ <li>molestias sapiente</li>
116
+ <li>laborum quae nobis,</li>
117
+ </ol>
118
+ </li>
119
+ <li>optio cupiditate</li>
120
+ <li>necessitatibus, in nihil ipsum</li>
121
+ <li>quasi! Ea sunt, doloribus animi!</li>
122
+ </ol>
123
+
124
+ <dl>
125
+ <dt><p>dl.dt.dd. <b>ipsum dolor <i>sit amet</i></b>, consectetur adipisicing elit. Iure deserunt odio ut. Facilis quam libero.</p></dd>
126
+ <dt><span>Lorem ipsum <b>dolor sit amet</b>, <i>consectetur adipisicing</i> elit. Odio, error.</span> animi soluta tempore quibusdam numquam </dt>
127
+ <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea debitis ipsum animi soluta tempore quibusdam numquam libero veniam, sapiente facere. Similique amet excepturi velit quos, quis, suscipit hic eius voluptatum.</dd>
128
+ <dt>dd</dt>
129
+ <dd>Item que contiene una definición.</dd>
130
+ </dl>
131
+
132
+ <hr><!-- //////////////////////////////// -->
133
+
134
+ <pre>
135
+ pre. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
136
+ </pre>
137
+ <code>
138
+ code. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
139
+ </code>
140
+ <kbd>
141
+ kbd. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
142
+ </kbd>
143
+ <samp>
144
+ samp. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
145
+ </samp>
146
+ <blockquote>
147
+ blockquote. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
148
+ </blockquote>
149
+ <q>
150
+ q. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
151
+ </q>
152
+ <cite>
153
+ cite. Lorem <span>ipsum dolor sit amet,</span> consectetur adipisicing elit. Amet consectetur at, <strong>quisquam aut <i>minus quo quam</i> quod dolor</strong> inventore eos iusto odit aliquam a similique ex? Reprehenderit soluta, modi velit.
154
+ </cite>
155
+
156
+ <hr><!-- //////////////////////////////// -->
157
+
158
+ <form action="">
159
+ <fieldset>
160
+ <legend> legend. Reprehenderit soluta, modi velit. </legend>
161
+ <div class="row">
162
+ <label for="">label. Blanditiis cum itaque enim</label>
163
+ </div>
164
+ <div class="row">
165
+ <input type="text" value="consectetur adipisicing elit. Amet consectetur at">
166
+ </div>
167
+ <div class="row">
168
+ <textarea name="name" rows="8" cols="40">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cum itaque enim, illo, magnam rem ratione asperiores autem commodi quisquam.</textarea>
169
+ </div>
170
+ <div class="row">
171
+ <select name="" id="">
172
+ <optgroup label="Group 1">
173
+ <option value="">Lorem ipsum</option>
174
+ <option value="">Dolor sit amet</option>
175
+ <option value="">Consectetur</option>
176
+ <option value="">Adipisicing elit</option>
177
+ </optgroup>
178
+ <optgroup label="Group 2">
179
+ <option value="">Lorem ipsum</option>
180
+ <option value="">Dolor sit amet</option>
181
+ <option value="">Consectetur</option>
182
+ <option value="">Adipisicing elit</option>
183
+ </optgroup>
184
+ </select>
185
+
186
+ <select name="" id="">
187
+ <option value="">Lorem ipsum</option>
188
+ <option value="">Dolor sit amet</option>
189
+ <option value="">Consectetur</option>
190
+ <option value="">Adipisicing elit</option>
191
+ </select>
192
+ </div>
193
+
194
+ <div class="row">
195
+ <label><input type="checkbox" name="" id=""> checkbox. Ipsum dolor sit amet</label>
196
+ </div>
197
+ <div class="row">
198
+ <fieldset>
199
+ <label><input type="radio" name="radio" id="radio"> radio. Ipsum dolor sit amet</label>
200
+ <label><input type="radio" name="radio" id="radio"> radio. Ipsum dolor sit amet</label>
201
+ <label><input type="radio" name="radio" id="radio"> radio. Ipsum dolor sit amet</label>
202
+ </fieldset>
203
+ </div>
204
+ <div class="row">
205
+ <input type="button" value="button. Lorem ipsum dolor sit amet, consectetur">
206
+ <input type="submit" value="submit. Lorem ipsum dolor sit amet, consectetur">
207
+ <input type="reset" value="reset. Lorem ipsum dolor sit amet, consectetur">
208
+ </div>
209
+ </fieldset>
210
+ </form>
211
+
212
+ </div>
213
+ </body>
214
+ </html>
data/lib/dom_limpio/engine.rb ADDED
@@ -0,0 +1,11 @@
1
+ module DomLimpio
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ initializer 'dom_limpio' do | app |
5
+ dl_path = File.expand_path("../../../src/css", __FILE__)
6
+ app.config.assets.paths << dl_path
7
+ app.middleware.use ::ActionDispatch::Static, "#{root}/src/css"
8
+ end
9
+ end
10
+ end
11
+ end
data/lib/dom_limpio/version.rb ADDED
@@ -0,0 +1,3 @@
1
+ module DomLimpio
2
+ VERSION = "0.1.0"
3
+ end
data/lib/dom_limpio.rb ADDED
@@ -0,0 +1,6 @@
1
+ require "dom_limpio/version"
2
+ require "dom_limpio/engine"
3
+
4
+ module DomLimpio
5
+ # Your code goes here...
6
+ end
data/src/css/dom-limpio/_forms.scss ADDED
@@ -0,0 +1,47 @@
1
+ //
2
+ // General forms
3
+ //
4
+
5
+ button, input, select, textarea, fieldset, legend, label, select {
6
+ font: 400 1em/1.35 serif;
7
+ text-align: left;
8
+ text-transform: none;
9
+ white-space: normal;
10
+ }
11
+
12
+ button,
13
+ input,
14
+ optgroup,
15
+ select,
16
+ textarea {
17
+ color: inherit;
18
+ font: inherit;
19
+ margin: 0;
20
+ }
21
+
22
+ input, select {
23
+ line-height: normal;
24
+ vertical-align: middle;
25
+ }
26
+
27
+ input[type="search"] {
28
+ -webkit-appearance: textfield;
29
+ &::-webkit-search-cancel-button,
30
+ &::-webkit-search-decoration {
31
+ -webkit-appearance: none;
32
+ }
33
+ }
34
+
35
+ button::-moz-focus-inner,
36
+ input::-moz-focus-inner {
37
+ border: 0;
38
+ padding: 0;
39
+ }
40
+
41
+ optgroup {
42
+ font-weight: 700;
43
+ }
44
+
45
+ textarea {
46
+ overflow: auto;
47
+ }
data/src/css/dom-limpio/_layout.scss ADDED
@@ -0,0 +1,108 @@
1
+ /*
2
+ base-reset
3
+ Combine with type-reset.scss to fix typo issues
4
+ */
5
+
6
+ body {
7
+ /* Disable horizontal scrollbar */
8
+ -ms-overflow-x: hidden;
9
+ overflow-x: hidden;
10
+ }
11
+
12
+ *, *:before, *:after {
13
+ box-sizing: border-box;
14
+ }
15
+
16
+
17
+ /* Base reset of margins + paddings */
18
+ html, body, div, span, object, iframe,
19
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
20
+ abbr, address, cite, code,
21
+ del, dfn, em, img, ins, kbd, q, samp,
22
+ small, strong, sub, sup, var,
23
+ b, i,
24
+ hr,
25
+ dl, dt, dd, ol, ul, li,
26
+ fieldset, form, label, legend,
27
+ table, caption, tbody, tfoot, thead, tr, th, td,
28
+ article, aside, canvas, details, figcaption, figure,
29
+ footer, header, hgroup, menu, nav, section, summary,
30
+ time, mark, audio, video {
31
+ margin: 0; padding: 0;
32
+ border: 0;
33
+ outline: 0;
34
+ background: transparent;
35
+
36
+ /* Remove outline color in some Android */
37
+ /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
38
+ }
39
+
40
+ /* Set block for HTML5 elements */
41
+ article,
42
+ aside,
43
+ details,
44
+ figcaption,
45
+ figure,
46
+ footer,
47
+ header,
48
+ hgroup,
49
+ hr,
50
+ main,
51
+ menu,
52
+ nav,
53
+ section,
54
+ summary {
55
+ display: block;
56
+ }
57
+
58
+ /* Correct display for IE 9 */
59
+ audio,
60
+ canvas,
61
+ progress,
62
+ video {
63
+ display: inline-block;
64
+ vertical-align: baseline;
65
+ }
66
+
67
+ /* Abreviatures and definitions */
68
+ abbr[title], dfn[title] {
69
+ border-bottom: 1px dotted;
70
+ cursor: help;
71
+ }
72
+
73
+ /* Force hidden of elements */
74
+ [hidden],
75
+ template {
76
+ display: none;
77
+ }
78
+
79
+ /* Images */
80
+ img {
81
+ margin-bottom: -0.285em; /* Removes extra margin */
82
+ border: 0 none;
83
+ }
84
+
85
+ /* SVG */
86
+ svg:not(:root) {
87
+ overflow: hidden;
88
+ }
89
+
90
+ /* Reset cursor on any element disabled */
91
+ [disabled] {
92
+ cursor: default;
93
+ }
94
+
95
+ /* Base <hr> customize color on your project */
96
+ hr {
97
+ height: 1px;
98
+ border: 0;
99
+ border-top: 1px solid;
100
+ overflow: visible;
101
+ /* border-color: #f00; */
102
+ }
103
+
104
+ /* Tables */
105
+ table {
106
+ border-collapse: collapse;
107
+ border-spacing: 0;
108
+ }
data/src/css/dom-limpio/_type.scss ADDED
@@ -0,0 +1,134 @@
1
+ html {
2
+ -ms-text-size-adjust: 100%;
3
+ -webkit-text-size-adjust: 100%;
4
+
5
+ -webkit-font-smoothing: antialiased;
6
+ -moz-osx-font-smoothing: grayscale;
7
+ text-rendering: optimizeLegibility;
8
+ // font-variant-ligatures: none;
9
+ // font-feature-settings: none;
10
+ font: 400 1em/1.35 serif;
11
+ text-align: left;
12
+ vertical-align: baseline;
13
+ color: #333;
14
+ }
15
+
16
+ // Genral properties
17
+ body,
18
+ ol, ul, li,
19
+ dl, dt, dd,
20
+ address,
21
+ abbr, dfn,
22
+ blockquote, pre, code, kbd, samp, cite, q,
23
+ figcaption,
24
+ sub, sup, small,
25
+ p, h1, h2, h3, h4, h5, h6 {
26
+ font-family: inherit;
27
+ font-size: inherit;
28
+ line-height: inherit;
29
+ text-align: inherit;
30
+ vertical-align: inherit;
31
+ color: #333;
32
+ }
33
+
34
+ // Reset of type elements
35
+
36
+ b,
37
+ strong {
38
+ font-weight: 700;
39
+ }
40
+
41
+ i,
42
+ em,
43
+ dfn {
44
+ font-style: italic;
45
+ }
46
+
47
+ abbr[title], dfn[title] {
48
+ border-bottom: 1px dotted;
49
+ cursor: help;
50
+ }
51
+
52
+ del {
53
+ text-decoration: line-through;
54
+ }
55
+
56
+ mark {
57
+ background: #fcf8e3;
58
+ color: #000;
59
+ }
60
+
61
+ pre,
62
+ code,
63
+ kbd,
64
+ samp {
65
+ font: monospace;
66
+ }
67
+
68
+ pre {
69
+ white-space: pre; /* CSS2 */
70
+ white-space: pre-wrap; /* CSS 2.1 */
71
+ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
72
+ word-wrap: break-word; /* IE */
73
+ }
74
+
75
+ blockquote, q {
76
+ quotes: none;
77
+ &:before,
78
+ &:after {
79
+ content: '';
80
+ content: none;
81
+ }
82
+ }
83
+
84
+ small {
85
+ font-size: 75%;
86
+ }
87
+
88
+ sub,
89
+ sup {
90
+ font-size: 75%;
91
+ line-height: 0;
92
+ position: relative;
93
+ vertical-align: baseline;
94
+ }
95
+
96
+ sup {
97
+ top: -0.5em;
98
+ }
99
+
100
+ sub {
101
+ bottom: -0.25em;
102
+ }
103
+
104
+ //
105
+ // Links por defecto
106
+ //
107
+
108
+ a {
109
+ background-color: transparent; /* remove IE 10 grey bg on :active */
110
+ &:link,
111
+ &:visited,
112
+ &:active,
113
+ &:hover,
114
+ &:focus {
115
+ outline: 0;
116
+ }
117
+ // Remove system styles for phone links on iOS
118
+ &[href^="tel"] {
119
+ color: inherit;
120
+ text-decoration: none;
121
+ }
122
+ }
123
+
124
+ //
125
+ // Listas
126
+ //
127
+ ul, ol, li {
128
+ list-style: none;
129
+ list-style-image: none;
130
+ }
131
+
132
+ /* ESTILOS POR DEFECTO */
133
+ /* ul li { list-style: disc outside; } */
134
+ /* ol li { list-style: decimal outside; } */
data/src/css/dom-limpio.scss ADDED
@@ -0,0 +1,9 @@
1
+ /* Include the modules your need for your project */
2
+ @import "dom-limpio/layout"; // Base layout reset
3
+ @import "dom-limpio/type"; // Typography reset
4
+ @import "dom-limpio/forms"; // Form reset
5
+
6
+ /* Define generice type styles for the project here */
7
+ @import "site-type/variables"; // Common variables
8
+ @import "site-type/weft"; // External font
9
+ @import "site-type/sample"; // Generic type styles for your site
data/src/css/site-type/_sample.scss ADDED
@@ -0,0 +1,80 @@
1
+ //
2
+ // Default styles to the site
3
+ // If you want to define some defaulst yo the whole site do it here
4
+
5
+ // General text elements
6
+
7
+ body,
8
+ ol, ul, li,
9
+ dl, dt, dd,
10
+ address,
11
+ abbr, dfn,
12
+ blockquote, pre, code, kbd, samp, cite, q,
13
+ figcaption,
14
+ sub, sup, small,
15
+ p, h1, h2, h3, h4, h5, h6 {
16
+ font: $dl-font-general;
17
+ @if $dl-add-rem-units {
18
+ font-size: #{$dl-f-size/16}rem;
19
+ }
20
+ color: $dl-f-color;
21
+ }
22
+
23
+ // h1,
24
+ .h1 {
25
+ $size: 36; // px
26
+ font-size: #{$size}px;
27
+ @if $dl-add-rem-units {
28
+ font-size: #{$size/16}rem;
29
+ }
30
+ line-height: 120%;
31
+
32
+ // Responsive sample, you need to include your mixin
33
+ /*@include media($tablet) {
34
+ & {
35
+ font-size: 24px;
36
+ }
37
+ }*/
38
+ }
39
+
40
+ // h2,
41
+ .h2 {
42
+ $size: 24; // px
43
+ font-size: #{$size}px;
44
+ @if $dl-add-rem-units {
45
+ font-size: #{$size/16}rem;
46
+ }
47
+ line-height: 125%;
48
+ }
49
+
50
+ // h3,
51
+ .h3 {
52
+ $size: 18; // px
53
+ font: normal 400 #{$size}px/130% Helvetica, Arial, sans-serif;
54
+ @if $dl-add-rem-units {
55
+ font-size: #{$size/16}rem;
56
+ }
57
+ }
58
+
59
+ a {
60
+ text-decoration: underline;
61
+ &:hover {
62
+ text-decoration: none;
63
+ }
64
+ }
65
+
66
+ // Responsive adjustement in end
67
+
68
+ //
69
+ // Tablet
70
+ //
71
+ /*@include media($tablet) {
72
+
73
+ }*/
74
+
75
+ //
76
+ // Mobile
77
+ //
78
+ /*@include media($mobile) {
79
+
80
+ }*/
data/src/css/site-type/_variables.scss ADDED
@@ -0,0 +1,23 @@
1
+ //
2
+ // Tipografia
3
+ //
4
+
5
+ // Config settings
6
+ $dl-add-rem-units: true !default;
7
+
8
+ // Default forn properties
9
+ $dl-f-size: 16 !default; // px
10
+ $dl-f-line-height: 135% !default; // Unit you want
11
+ $dl-f-color: #333 !default;
12
+
13
+ // Families only
14
+ // font-family: $dl-fam-general;
15
+ $dl-fam-general: 'Times New Roman', Times, serif !default;
16
+ $dl-fam-other: Helvetica, Arial, sans-serif !default;
17
+ $dl-fam-mono: monospace !default;
18
+
19
+ // Font declarations
20
+ // font: $dl-font-general;
21
+ $dl-font-general: normal 400 #{$dl-f-size}px/#{$dl-f-line-height} $dl-fam-general;
22
+ $dl-font-other: normal 400 #{$dl-f-size}px/#{$dl-f-line-height} $dl-fam-other;
23
+ $dl-font-mono: normal 400 #{$dl-f-size}px/#{$dl-f-line-height} $dl-fam-mono;
data/src/css/site-type/_weft.scss ADDED
@@ -0,0 +1,25 @@
1
+ //
2
+ // WEFT Web Embedding Font technologies
3
+ //
4
+
5
+ /* @font-face {
6
+ font-family: 'LucidaGrandeRegular';
7
+ src: url('lucida_grande-webfont.eot');
8
+ src: url('lucida_grande-webfont.eot?#iefix') format('embedded-opentype'),
9
+ url('lucida_grande-webfont.woff') format('woff'),
10
+ url('lucida_grande-webfont.ttf') format('truetype'),
11
+ url('lucida_grande-webfont.svg#LucidaGrandeRegular') format('svg');
12
+ font-weight: normal;
13
+ font-style: normal;
14
+ }
15
+
16
+ @font-face {
17
+ font-family: 'LucidaGrandeBold';
18
+ src: url('lucida_grande_bold-webfont.eot');
19
+ src: url('lucida_grande_bold-webfont.eot?#iefix') format('embedded-opentype'),
20
+ url('lucida_grande_bold-webfont.woff') format('woff'),
21
+ url('lucida_grande_bold-webfont.ttf') format('truetype'),
22
+ url('lucida_grande_bold-webfont.svg#LucidaGrandeBold') format('svg');
23
+ font-weight: bold;
24
+ font-style: normal;
25
+ } */
metadata ADDED
@@ -0,0 +1,92 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: dom_limpio
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - carloscabo
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2016-08-06 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.7'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.7'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '10.0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '10.0'
41
+ description: Our own CSS reset picking the best ideas from several sources (Normalize
42
+ 4, HTML4 Doctor...) and trying to add our own customizations (what we use as default
43
+ in most of the projects we start, specially mobile settings).
44
+ email:
45
+ - carloscabo@gmail.com
46
+ executables: []
47
+ extensions: []
48
+ extra_rdoc_files: []
49
+ files:
50
+ - ".gitignore"
51
+ - Gemfile
52
+ - LICENSE.txt
53
+ - README.md
54
+ - Rakefile
55
+ - dom-limpio-logo.png
56
+ - dom_limpio.gemspec
57
+ - index.html
58
+ - lib/dom_limpio.rb
59
+ - lib/dom_limpio/engine.rb
60
+ - lib/dom_limpio/version.rb
61
+ - src/css/dom-limpio.scss
62
+ - src/css/dom-limpio/_forms.scss
63
+ - src/css/dom-limpio/_layout.scss
64
+ - src/css/dom-limpio/_type.scss
65
+ - src/css/site-type/_sample.scss
66
+ - src/css/site-type/_variables.scss
67
+ - src/css/site-type/_weft.scss
68
+ homepage: https://github.com/carloscabo/dom-limpio
69
+ licenses:
70
+ - MIT
71
+ metadata: {}
72
+ post_install_message:
73
+ rdoc_options: []
74
+ require_paths:
75
+ - lib
76
+ required_ruby_version: !ruby/object:Gem::Requirement
77
+ requirements:
78
+ - - ">="
79
+ - !ruby/object:Gem::Version
80
+ version: '0'
81
+ required_rubygems_version: !ruby/object:Gem::Requirement
82
+ requirements:
83
+ - - ">="
84
+ - !ruby/object:Gem::Version
85
+ version: '0'
86
+ requirements: []
87
+ rubyforge_project:
88
+ rubygems_version: 2.5.1
89
+ signing_key:
90
+ specification_version: 4
91
+ summary: Custom layout / form / typography reset in SASS
92
+ test_files: []