Re: CakePHP and Twitter Bootstrap

I was in a similar situation. I opted to leave the CakePHP code mostly alone and instead recompile Bootstrap with some customization, basically adapting the bootstrap CSS to the output for CakePHP. Probably the most I needed were for form validation error and for pagination, so for example for form validation errors I defined:

// Error styles for forms elements (validation)

.error {

.formFieldState(@errorText, @errorText, @errorBackground);

}

// Error styles for form messages (validation)

.error-message {

padding: 1px 3px 2px;

font-size: @baseFontSize * .75;

font-weight: bold;

color: #b94a48;

text-transform: uppercase;

white-space: nowrap;

}

and recompile Bootstrap.

On Friday, January 18, 2013 4:51:23 AM UTC-6, Anis Ghabri wrote:

Good. But to me I'm creating a CMS so I'm trying to keep the markup as much compatible as possible with CakePHP's markup. to make sure that CakePHP templates will be used as it is with my CMS. Anyway I'm still new to cakephp and I'm trying to find my way.

Thanks guys for great ideas and suggestions.

Le vendredi 18 janvier 2013 11:41:31 UTC+1, Jeremy Burns a écrit :

Make an element: /View/Elements/flash/error.ctp

<div class="alert alert-error">

<a class="close" data-dismiss="alert" href="#">&times;</a>

<?php if (isset($heading)) { ?>

<h4 class="alert-heading"><?php echo $heading; ?></h4>

<?php }

echo '<i class="icon-thumbs-down"></i> ' . $message; ?>

</div>

From the controller:

$this->Session->setFlash(

'Error message goes here',

'flash/error',

array('heading' => 'Heading goes here.')

);

Jeremy Burns

Class Outfit

http://www.classoutfit.com

On 18 Jan 2013, at 10:36:50, Anis Ghabri <ghabr...@gmail.com> wrote:

Well, TWB is a css based framework. Till now no problem faced. maybe I don't it works well for me just I have to figure out how cake php make html thing for example flashmessage looks like this ##<div id="flashMessage" class="message">Added</div>##

so I need to make it styles with TWB alert like this

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

$("div.message").addClass("alert alert-success");//Success

$('div.alert').append('<button type="button" class="close" data-dismiss="alert">&times;</button>');//For the close button

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

Anyway if there is a simpler method to do this please tell

Le vendredi 18 janvier 2013 11:27:22 UTC+1, AD7six a écrit :

which obviously leads to the equivalent of http://www.bluerobot.com/web/css/fouc.asp/

Especially if you put it in a document ready handler. You can do that - it's just not the best idea; and won't help if the markup is not the same structure that bootstrap expects.

AD

On Friday, 18 January 2013 10:49:20 UTC+1, Anis Ghabri wrote:

This is why I said :"One good Idea create a js script that adds the necessary twitter bootstrap classes the view control like tables flash messages and so on." 

run_at_page_load.js

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

$(document).ready(function($){

$("table").addClass("table table-striped table-bordered");// For The tables. it will take the TWB style

...

});

-------------------------------------------------------
Le vendredi 18 janvier 2013 10:11:32 UTC+1, AD7six a écrit :

On Friday, 18 January 2013 09:19:12 UTC+1, Anis Ghabri wrote:

Hi,

I'm also new to cakephp

It's easy to make twitter bootstrap work for you there's no need for plugin just add the css, img and js files to your webroot.

Except if you do that,  various helpers (of most relevance html, form, paginator) generate output that will not have correct styles.

AD

--
Like Us on FaceBook https://www.facebook.com/CakePHP
Find us on Twitter http://twitter.com/CakePHP
 
---
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To post to this group, send email to cake...@googlegroups.com.
To unsubscribe from this group, send email to cake-php+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/cake-php?hl=en.
 
 

--
Like Us on FaceBook https://www.facebook.com/CakePHP
Find us on Twitter http://twitter.com/CakePHP
 
---
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To post to this group, send email to cake-php@googlegroups.com.
To unsubscribe from this group, send email to cake-php+unsubscribe@googlegroups.com.
Visit this group at http://groups.google.com/group/cake-php?hl=en.