Pure CSS3 Notepaper with Bootstrap
Description
Pure CSS Notepaper is a simple technique to present quotes or small written text on your website (or app).
In our case, I used Bootstrap, my lovely front-end framework and suitable css rules to give the effect of notepaper. More specifically, regarding Bootstrap framework, Collapse JS has been used to handle toggle behaviour, compatible with custom jquery script. Enjoy it!
It works perfectly in Webkit, Opera, Firefox and almost perfectly in IE (paper rulers are not presented).
Download
Source files on github or download the zip.
Simple Example
Note #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nunc quis est aliquam tristique. Nam nec lorem metus. Quisque in justo vitae risus blandit molestie sed non nibh. Sed eget nibh felis. Etiam ultricies ligula ut diam rutrum ut faucibus diam vestibulum. Curabitur vel tellus at lectus malesuada gravida at nec enim. Nulla commodo ultrices lectus, non dictum neque euismod non.
Sed nunc enim, malesuada non aliquam eu, blandit non justo. Maecenas est quam, semper eu ornare sed, vulputate a ipsum. In hac habitasse platea dictumst. Phasellus elementum risus sit amet lorem ullamcorper vel venenatis tellus bibendum. Sed non turpis nisl. Nulla in nunc diam. Sed sagittis pharetra libero nec sodales. Aliquam dapibus erat id ipsum consectetur sed auctor lectus gravida. Aliquam rutrum euismod ipsum, ac interdum sapien euismod ac. Ut euismod enim id diam dictum posuere. Fusce iaculis nulla sit amet dolor aliquet molestie. Nunc porta sodales libero, vel viverra justo vestibulum in. Aliquam eget magna elit, in vestibulum dolor. Proin porttitor accumsan pellentesque.
Ut dolor tellus, mattis nec mattis eget, ultrices vel lectus. Suspendisse nec odio mattis mi fermentum consequat. Sed nibh est, fringilla vel vulputate at, cursus sit amet diam. Suspendisse potenti. Nam pharetra dignissim orci, eget feugiat quam scelerisque vitae. Duis aliquam vestibulum eros, quis tincidunt lectus elementum in. Pellentesque a arcu lacus, nec tincidunt nisi. Duis leo dolor, feugiat eu condimentum et, ultrices quis magna. Sed massa lorem, luctus et blandit eu, commodo ut ligula. In placerat, nulla posuere eleifend tempus, tellus lectus aliquam tortor, lobortis convallis magna velit eget nunc. Vestibulum posuere dignissim libero sit amet luctus. Vestibulum vitae eleifend dui.
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
Note #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nunc quis est aliquam tristique. Nam nec lorem metus. Quisque in justo vitae risus blandit molestie sed non nibh. Sed eget nibh felis. Etiam ultricies ligula ut diam rutrum ut faucibus diam vestibulum. Curabitur vel tellus at lectus malesuada gravida at nec enim. Nulla commodo ultrices lectus, non dictum neque euismod non.
Sed nunc enim, malesuada non aliquam eu, blandit non justo. Maecenas est quam, semper eu ornare sed, vulputate a ipsum. In hac habitasse platea dictumst. Phasellus elementum risus sit amet lorem ullamcorper vel venenatis tellus bibendum. Sed non turpis nisl. Nulla in nunc diam. Sed sagittis pharetra libero nec sodales. Aliquam dapibus erat id ipsum consectetur sed auctor lectus gravida. Aliquam rutrum euismod ipsum, ac interdum sapien euismod ac. Ut euismod enim id diam dictum posuere. Fusce iaculis nulla sit amet dolor aliquet molestie. Nunc porta sodales libero, vel viverra justo vestibulum in. Aliquam eget magna elit, in vestibulum dolor. Proin porttitor accumsan pellentesque.
Ut dolor tellus, mattis nec mattis eget, ultrices vel lectus. Suspendisse nec odio mattis mi fermentum consequat. Sed nibh est, fringilla vel vulputate at, cursus sit amet diam. Suspendisse potenti. Nam pharetra dignissim orci, eget feugiat quam scelerisque vitae. Duis aliquam vestibulum eros, quis tincidunt lectus elementum in. Pellentesque a arcu lacus, nec tincidunt nisi. Duis leo dolor, feugiat eu condimentum et, ultrices quis magna. Sed massa lorem, luctus et blandit eu, commodo ut ligula. In placerat, nulla posuere eleifend tempus, tellus lectus aliquam tortor, lobortis convallis magna velit eget nunc. Vestibulum posuere dignissim libero sit amet luctus. Vestibulum vitae eleifend dui.
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1
- Item 1