├── .DS_Store
├── Demo-Scribble.png
├── Demo-Scribble1.png
├── LICENSE
├── README.md
├── floaty.css
├── font
    └── Scribble.ttf
├── icon.png
├── index.html
├── scribble-webfont.woff
├── scribble-webfont.woff2
└── stylesheet.css


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/Scribble-Font/c1ba47085db701e368201ea889ef53b58a78a5d4/.DS_Store


--------------------------------------------------------------------------------
/Demo-Scribble.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/Scribble-Font/c1ba47085db701e368201ea889ef53b58a78a5d4/Demo-Scribble.png


--------------------------------------------------------------------------------
/Demo-Scribble1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/Scribble-Font/c1ba47085db701e368201ea889ef53b58a78a5d4/Demo-Scribble1.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Vladimir Carrer
 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.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center"> Scribble Font for Prototyping & Wireframing  </h1>
 2 | 
 3 | <p align="center"> Make Wireframes Great Again </p>
 4 | 
 5 | Demo1:
 6 | 
 7 | <p align="center"><img src="Demo-Scribble.png" /></p>
 8 | 
 9 | Demo2: 
10 | <p align="center"><img src="Demo-Scribble1.png" /></p>
11 | 
12 | <hr/>
13 | 
14 | <p> Scribble is replacment for Lorem Ipsum Text and works great with low fidelity wireframes. </p>
15 | 
16 | <p> The font Scribble.ttf can be found in the font folder.</p>
17 | 
18 | You can test the demo here: https://vladocar.github.io/Scribble-Font/
19 | 
20 | <p>CDN:</p>
21 | 
22 | https://unpkg.com/scribble-font@1.0.0/scribble-webfont.woff
23 | 
24 | https://unpkg.com/scribble-font@1.0.0/scribble-webfont.woff2
25 | 
26 | https://unpkg.com/scribble-font@1.0.0/font/Scribble.ttf
27 | 
28 | Find more similar fonts here: https://www.designinspiration.info/free-fonts-for-lo-fi-wireframing/
29 | 
30 | <h3>License</h3>
31 | 
32 | This project is licensed under the MIT License
33 | 


--------------------------------------------------------------------------------
/floaty.css:
--------------------------------------------------------------------------------
 1 | 
 2 | *{ box-sizing: border-box}
 3 | 
 4 | .p10,.p12,.p17,.p20,.p25,.p33,.p40,.p50,.p60,.p67,.p75,.p80,.p83,.p100{box-sizing: border-box;
 5 |   margin:0 0 0 15px; float:left;
 6 |  }
 7 | 
 8 | .p10{width:calc(10% - 15px)}
 9 | .p12{width:calc(12.5% - 15px)}
10 | .p17{width:calc(16.6667% - 15px)}
11 | .p20{width:calc(20% - 15px)}
12 | .p25{width:calc(25% - 15px)}
13 | .p33{width:calc(33.3334% - 15px)}
14 | .p40{width:calc(40% - 15px)}
15 | .p50{width:calc(50% - 15px)}
16 | .p60{width:calc(60% - 15px)}
17 | .p67{width:calc(66.6667% - 15px)}
18 | .p75{width:calc(75% - 15px)}
19 | .p80{width:calc(80% - 15px)}
20 | .p83{width:calc(83.3334% - 15px)}
21 | .p100{width:calc(100% - 15px)}
22 | 
23 | 
24 | .clear{width: 100%; clear: both;}
25 | .nomargin{padding:0 !important;margin:0 !important}
26 | 
27 | @media all and (max-width: 480px) {
28 |   .main{width:98% !important; margin: 0 auto}
29 |   .p10,.p12,.p17,.p20,.p25,.p33,.p40,.p50,.p60,.p67,.p75,.p80,.p83,.p100 {width:100%}
30 | }
31 | 


--------------------------------------------------------------------------------
/font/Scribble.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/Scribble-Font/c1ba47085db701e368201ea889ef53b58a78a5d4/font/Scribble.ttf


--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/Scribble-Font/c1ba47085db701e368201ea889ef53b58a78a5d4/icon.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6 | 
 7 |     <link rel="stylesheet" href="floaty.css">
 8 | 
 9 |     <title>Scribble Font</title>
10 |     <style>
11 |     @font-face {
12 |         font-family: 'scribbleregular';
13 |         src: url('scribble-webfont.woff2') format('woff2'),
14 |              url('scribble-webfont.woff') format('woff');
15 |         font-weight: normal;
16 |         font-style: normal;
17 | 
18 |     }
19 | 
20 |         body {
21 |             margin: 0;
22 |             font-family: Helvetica, Arial sans-serif;
23 | 
24 |         }
25 |           h1{font-size:40px; margin-bottom: 0}
26 |         .scribble{
27 |           font: 21px/1.6 'scribbleregular';
28 |         }
29 |         textarea{width: 100%; height: 750px; padding: 10px}
30 | 
31 |         .main {
32 |             margin: 0 auto;
33 |             width: 980px;
34 |         }
35 | 
36 |         .p10,
37 |         .p12,
38 |         .p17,
39 |         .p20,
40 |         .p25,
41 |         .p33,
42 |         .p40,
43 |         .p50,
44 |         .p60,
45 |         .p67,
46 |         .p75,
47 |         .p80,
48 |         .p83,
49 |         .p100,
50 |         .fluid {
51 |             background-color: #F8ECC2;
52 |             border:1px solid #F5A361;
53 |             color: #222;
54 |             padding: 10px;
55 |             margin: 10px 0 10px 15px;
56 | 
57 |         }
58 | 
59 |         .noborder{border: 0; background-color:#fff}
60 |         .center{text-align: center;}
61 |     </style>
62 | </head>
63 | 
64 | <body>
65 |     <div class="main">
66 | 
67 |         <div class="p100 noborder center"><h1>Scribble Font</h1></div>
68 |         <div class="p100 center">Make Wireframes Great Again</div>
69 |         <div class="p100">Scribble is great for Prototyping & Wireframing so you can focus on the form of the text and not the text meaning. Also it looks cool :) </div>
70 | 
71 |         <div class="p50"><p>This is Lorem ipsum with the Scribble Font:</p><p class="scribble">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec vulputate lorem. In eu tortor nec metus consectetur porta in ut urna. Nam ac diam orci. Phasellus eget sapien elementum, auctor turpis in, pellentesque massa. Sed dignissim, neque eget faucibus finibus, ligula urna posuere felis, eu consequat odio tortor at diam. Aenean pulvinar rutrum orci et imperdiet. Sed quis interdum risus, scelerisque placerat velit. Phasellus aliquet pulvinar eros, in pharetra mauris gravida ac. Phasellus nisi lorem, vulputate eget semper sed, molestie in lacus. Maecenas vehicula felis pulvinar condimentum venenatis. Nullam id tincidunt nulla. Morbi ut arcu convallis, consectetur dolor ac, facilisis dui. Phasellus magna augue, malesuada lobortis leo in, vulputate cursus nisl. Sed eget egestas urna, id placerat nulla.</p></div>
72 |         <div class="p50"><p>Test Area: </p><textarea class="scribble"></textarea></div>
73 | 
74 |         <div class="p100 center"><a href="https://github.com/vladocar/Scribble-Font">Download on Github</a></div>
75 |         <div class="p100 center"> Made with ♥ by <a href="https://github.com/vladocar/">@vladocar</a>. Licensed under the MIT License.</div>
76 | 
77 |     </div>
78 | </body>
79 | 
80 | </html>
81 | 


--------------------------------------------------------------------------------
/scribble-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/Scribble-Font/c1ba47085db701e368201ea889ef53b58a78a5d4/scribble-webfont.woff


--------------------------------------------------------------------------------
/scribble-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/Scribble-Font/c1ba47085db701e368201ea889ef53b58a78a5d4/scribble-webfont.woff2


--------------------------------------------------------------------------------
/stylesheet.css:
--------------------------------------------------------------------------------
 1 | /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 28, 2018 */
 2 | 
 3 | 
 4 | 
 5 | @font-face {
 6 |     font-family: 'scribbleregular';
 7 |     src: url('scribble-webfont.woff2') format('woff2'),
 8 |          url('scribble-webfont.woff') format('woff');
 9 |     font-weight: normal;
10 |     font-style: normal;
11 | 
12 | }


--------------------------------------------------------------------------------