Well, I am developing my own Content Management System using ASP.NET MVC and for a page builder I've decided to use GrapeJS. Now, since this is new to me, I can't seem to find a way to save the pages I would have assembled using GrapeJS. I have used the gjs-preset-webpage GrapeJS plugin and the only JavaScript for the assembling area I have is as shown below:
<script type="text/javascript">
var editor = grapesjs.init({
height: '100%',
showOffsets: 1,
noticeOnUnload: 0,
storageManager: { autoload: 0 },
container: '#gjs',
fromElement: true,
plugins: ['gjs-preset-webpage'],
pluginsOpts: {
'gjs-preset-webpage': {}
}
});
</script>
The HTML I've used is as follows as well:
<div id="gjs" style="height:0px; overflow:hidden">
<div class="panel">
<h1 class="welcome">Welcome to</h1>
<div class="big-title">
<svg class="logo" viewBox="0 0 100 100">
<path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" />
</svg>
<span>GrapesJS</span>
</div>
<div class="description">
This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
</div>
</div>
<style>
.panel {
width: 90%;
max-width: 700px;
border-radius: 3px;
padding: 30px 20px;
margin: 150px auto 0px;
background-color: #d983a6;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
color: rgba(255,255,255,0.75);
font: caption;
font-weight: 100;
}
.welcome {
text-align: center;
font-weight: 100;
margin: 0px;
}
.logo {
width: 70px;
height: 70px;
vertical-align: middle;
}
.logo path {
pointer-events: none;
fill: none;
stroke-linecap: round;
stroke-width: 7;
stroke: #fff
}
.big-title {
text-align: center;
font-size: 3.5rem;
margin: 15px 0;
}
.description {
text-align: justify;
font-size: 1rem;
line-height: 1.5rem;
}
</style>
</div>
Now that I have embedded it into my project and can assembled pages using it, I can't seem to find how to save or where would the assembled page be to be saved. Can anyone help me?
You need a endpoint to allow grapes' storage manager to send your site current status information. I save the json and html just in case, but I think json is enough. Well then you setup your storage manager.
const editor = grapesjs.init({
storageManager:{
type: 'remote',
autosave: true, // Store data automatically
urlStore: 'YOUR_ENDPOINT_URL',
}
});
You will get a call to your endpoint every time something changes with the following parameterts:
gjs-assets: Assets array
gjs-components: Object with markup definition of your site
gjs-styles: Object with styles definition
gjs-html: your site HTML
gjs-css: your CSS
Just be sure to inject this definitions when initialising grapes as well:
const editor = grapesjs.init({
components: "YOUR_STORED_COMPONENTS_HERE",
style: "YOUR_STORED_CSS_HERE",
storageManager:{
type: 'remote',
autosave: true, // Store data automatically
urlStore: 'YOUR_ENDPOINT_URL',
}
});
For further information: Docs
I've copied the raw text files from the book for the tutorial that I'm working on, and the css is not being applied and I can't figure out why. The HTML content displays correctly though. Perhaps you will need more information from me that I'm unaware of at the moment, but I'm glad to bring it to the table if need be.
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<!-- START_HIGHLIGHT -->
<body class='<%= controller.controller_name %>'>
<!-- END_HIGHLIGHT -->
<%= yield %>
</body>
</html>
products.css.scss
// Place all the styles related to the Products controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
/* START_HIGHLIGHT */
.products {
table {
border-collapse: collapse;
}
table tr td {
padding: 5px;
vertical-align: top;
}
.list_image {
width: 60px;
height: 70px;
}
.list_description {
width: 60%;
dl {
margin: 0;
}
dt {
color: #244;
font-weight: bold;
font-size: larger;
}
dd {
margin: 0;
}
}
.list_actions {
font-size: x-small;
text-align: right;
padding-left: 1em;
}
.list_line_even {
background: #e0f8f8;
}
.list_line_odd {
background: #f8b0f8;
}
}
/* END_HIGHLIGHT */
Error
You fixed it - congrats!!
Something you may wish to consider is using SASS instead of SCSS. You only need to change the extension of your file to .css.sass - allowing you to get rid of a lot of superfluous brackets in SCSS:
#app/assets/stylesheets/application.css.sass
.products
table
border:
collapse: collapse
& tr td
padding: 5px
vertical:
align: top
--
Stylesheets
Instead of inline-styling your body tag, why not create applicable stylesheets for each controller, and styling the body from these?
Like this:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", controller_name, media: "all","data-turbolinks-track" => true %>
This will allow you to keep default styling in your application.css.scss, and use things like a background image in your various [controller].css.scss files:
app
| - assets
| - stylesheets
- application.css.scss
- controller1.css.scss
- controller2.css.scss
You'll then need to remember to add these assets to your pre-compilation procedure:
Rails.application.config.assets.precompile += ['controller1.css', 'controller2.css']
This will make your styling a LOT DRYer & more versatile
I've been looking through a lot of answers here on stackoverflow that semi-cover what I'm wondering about, but haven't found anything that worked for me.
I understand that the printing page is about 550 px for A4 and therefor bootstrap will use the styles and layout usually used for mobile devices.
When I use Ctrl+P for my web page, the printable page looks just like the mobile version of my page. But how do I make it look like the desktop version? (media > 1024 px) Is there a way to do this?
I know I can change the css specifically for print. But how to solve this thing with the bootstrap 3 grid system? The width on my divs gets based on what I have added for col-xs, but I want print to use the layout (width) for col-md
Edit: After I have been struggeling with this for some more hours I realize that it might be more complex than I first expected. Just changing the width doesn't solve it for me. Many of my divs has the syntax of
<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>
or
<div class="col-md-4 col-sm-6 col-xs-12"></div>
The page looks good in XS for small devices, but printing in XS makes many elements look gigantic. So the question remains. Is there a way to make the printing page look the same as the layout for medium or large devices? Or do I have to make the printing css without using bootstrap grid system and add static widths in pt for all elements to accomplish this?
Thanks in advance
It would be helpful to provide a JSBin. Anyway, since I had this layout in JSBin with col-sm-(asterisk), you can just change all the -sm- to -xs- in between the print media query. All percentages are the same at every breakpoint, so changing sm to xs will print that and ignore the other col-(asterisk) classes. Ahh, I read the post now, you'll need to change all the col-sm to col-md in this and then use !important, that should do it. The xs col are outside media queries, so that's why this is happening.
http://jsbin.com/AzICaQes/5
#media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666666666666%;
}
.col-sm-10 {
width: 83.33333333333334%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666666666666%;
}
.col-sm-7 {
width: 58.333333333333336%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.666666666666664%;
}
.col-sm-1 {
width: 8.333333333333332%;
}
}
Actually, all you need to add (to user.css) is this:
#media print {
#page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
}
}
While you're at it, consider using all these settings for bootstrap 3
#media print {
#page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
line-height: 1em;
word-spacing:1px;
letter-spacing:0.2px;
font: 14px "Times New Roman", Times, serif;
background:white;
color:black;
width: 100%;
float: none;
}
/* avoid page-breaks inside a listingContainer*/
.listingContainer{
page-break-inside: avoid;
}
h1 {
font: 28px "Times New Roman", Times, serif;
}
h2 {
font: 24px "Times New Roman", Times, serif;
}
h3 {
font: 20px "Times New Roman", Times, serif;
}
/* Improve colour contrast of links */
a:link, a:visited {
color: #781351
}
/* URL */
a:link, a:visited {
background: transparent;
color:#333;
text-decoration:none;
}
a[href]:after {
content: "" !important;
}
a[href^="http://"] {
color:#000;
}
#header {
height:75px;
font-size: 24pt;
color:black
}
}
I ended up solving the problem using an own print.css file without all the responsive bootstrap stuff included. Only included some of the necessary bootstrap things with show and hide.
For those who use bootstrap mixins to create columns like this (sass version):
#include make-sm-column(3, 0);
it won't be enough to overwrite the styles for columns classes like Christina suggests. The only simple solution I've found was to change $screen-sm in _variables.scss to 595px and recompile bootstrap.css
So, find this code in _variables.scss:
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
and change it to this:
// decrease min-width to fix print layout issue
$screen-sm: 595px !default;
$screen-sm-min: $screen-sm !default;
then in your _print.scss
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 768px;
}
body {
margin: 0 auto;
}
// .. your custom styles for print layout
}
Add This css style in your print.css file
#page {
size: A4;
margin: 40px;
}
#media print {
html,
body {
width: 210mm;
height: 297mm;
}
#-moz-document url-prefix() {}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-smdm-12 {
float: left;
}
.col-sm-12,
.col-md-12 {
width: 100%;
}
.col-sm-11,
.col-md-11 {
width: 91.66666667%;
}
.col-sm-10,
.col-md-10 {
width: 83.33333333%;
}
.col-sm-9,
.col-md-9 {
width: 75%;
}
.col-sm-8,
.col-md-8 {
width: 66.66666667%;
}
.col-sm-7,
.col-md-7 {
width: 58.33333333%;
}
.col-sm-6,
.col-md-6 {
width: 50%;
}
.col-sm-5,
.col-md-5 {
width: 41.66666667%;
}
.col-sm-4,
.col-md-4 {
width: 33.33333333%;
}
.col-sm-3,
.col-md-3 {
width: 25%;
}
.col-sm-2,
.col-md-2 {
width: 16.66666667%;
}
.col-sm-1,
.col-md-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
.visible-xs {
display: none !important;
}
.hidden-xs {
display: block !important;
}
table.hidden-xs {
display: table;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
.hidden-xs.hidden-print {
display: none !important;
}
.hidden-sm {
display: none !important;
}
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
I had the similar problem. I ended up replacing all col-md-* with col-xs-* and it worked like a charm. Here is the exmaple code
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-md-9 text-center main-title col-md-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>
converted to
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-xs-9 text-center main-title col-xs-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>
I am currently learning ruby on rails through "Agile Web Development With Rails," and I have run into an error I cannot fix. So far, I have only done some basic operations. I created a scaffold with a command similar to this:
rails generate scaffold Product title:string description:text image_url:string price:decimal
I then raked that:
rake db:migrate
Once that was run, I went into the db/seeds.db file and filled this newly created table with this data:
Product.delete_all
Product.create(:title => 'Web Design for Developers',
:description =>
%{<p>
<em>Web Design for Developers</em> will show you how to make your
web-based application look professionally designed. We'll help you
learn how to pick the right colors and fonts, avoid costly interface
and accessibility mistakes -- your application will really come alive.
We'll also walk you through some common Photoshop and CSS techniques
and work through a web site redesign, taking a new design from concept
all the way to implementation.
</p>},
:image_url => '/images/rails.png',
:price => 42.95)
# . . .
Product.create(:title => 'Programming Ruby 1.9',
:description =>
%{<p>
Ruby is the fastest growing and most exciting dynamic language
out there. If you need to get working programs delivered fast,
you should add Ruby to your toolbox.
</p>},
:image_url => '/images/rails.png',
:price => 49.50)
# . . .
Product.create(:title => 'Rails Test Prescriptions',
:description =>
%{<p>
<em>Rails Test Prescriptions</em> is a comprehensive guide to testing
Rails applications, covering Test-Driven Development from both a
theoretical perspective (why to test) and from a practical perspective
(how to test effectively). It covers the core Rails testing tools and
procedures for Rails 2 and Rails 3, and introduces popular add-ons,
including Cucumber, Shoulda, Machinist, Mocha, and Rcov.
</p>},
:image_url => '/images/rails.png',
:price => 43.75)
Once again, I raked this data:
rake db:seed
After this was all complete, I loaded up localhost:3000/products and everything was working fine. However, the book wanted to add some css code to make things look a bit better. Once I added the CSS (exactly as the book had it), I got an error when I loaded localhost:3000/products (error: http://postimage.org/image/3qfpta4w7/). I assume my error has something to do with my css, but I do not know what to do. Here is my css:
.products {
table {
border-collapse: collapse;
}
table tr td {
padding: 5px;
vertical-align: top;
}
.list_image {
width: 60px;
height: 70px;
}
.list_description {
width: 60%;
dl {
margin: 0;
}
dt {
color: #244;
font-weight: bold;
font-size: larger;
}
dd {
margin: 0;
}
}
.list_actions {
font-size: x-small;
text-align: right;
padding-left: 1em;
}
.list_line_even {
background: #e0f8f8;
}
.list_line_odd {
background: #f8b0f8;
}
}
I have tried changing several things, but now success has followed. Any and all input on this would be appreciated. (P.S. bonus points for naming your favorite rails book to learn from).
Check following
.products {
table {
border-collapse: collapse;
}
table tr td {
padding: 5px;
vertical-align: top;
}
.list_image {
width: 60px;
height: 70px;
}
.list_description {
width: 60%;
dl {
margin: 0;
}
dt {
color: #244;
font-weight: bold;
font-size: larger;
}
dd {
margin: 0;
}
}
.list_actions {
font-size: x-small;
text-align: right;
padding-left: 1em;
}
.list_line_even {
background: #e0f8f8;
}
.list_line_odd {
background: #f8b0f8;
}
}
I'm having trouble getting my CSS sprite effect to work in my rails app, not sure why because I don't totally understand the concept.
Heres my submit button code:
<%= f.submit '', :class => 'submitpost'%>
and the CSS behind it:
.submitpost {
border: none;
height: 40px;
width: 145px;
background: url('sharebutton_up.jpg') 0 0;
}
.submitpost:hover {
cursor:pointer;
height: 40px;
width: 145px;
background: url('sharebutton_down.jpg') 0 -40px;
}
Thanks in advance!
background: url('sharebutton_down.jpg') 0 -40px;
I think you should remove -40px since you have changed the images from sharebutton_up to sharebutton_down already