I'm starting with CakePHP 3 and I see new CSS and responsive design support; I've searched info about styles utilization because I want to put custom backgrounds depending device width (using min-width of mq-small, mq-medium, mq-large, mq-xlarge, mq-xxlarge. from cake css) but I didn't found info.
There is documentation about this? Is a plug-in or is a css only for responsive columns?. This code can be seen in css "base.css" from cakephp 3 (I'm using 3.0.2)
Thank you
CakePHP 3 uses the Zurb Foundation front-end framework. Which means that the classes you want to use will be listed in their documentation.
For responsive design you will want to look into the grid.
Good luck!
Related
I have been using Twitter Boostrap for my web apps. Recently, I have started liking Google's Material Design. Is there any way I can replace all the Bootstrap's Look and Feel by Material Design's? I don't wanna change the applied classes to HTML elements.
You can't move instantly from Bootstrap to Material.io without changing 1 by 1 code/syntax on bootstrap. So change it while studying everything you learned on material.io and dont be lazy.
What is a difference between Bootstrap and CSS? I read the questions in stackoverflow saying that if you want responsive website and also, you are a newbie in Styling use bootstrap! ? Is Bootstrap something for beginners?
Bootstrap is essentially a front-end Framework that makes designing webpages and the general development easier. Bootstrap uses CSS, however it's different to writing your own CSS as it's all pre done so you just add a class to a HTML element and then it will use that CSS. So for example adding the class "img-responsive" to will use the pre made img-responsive class which is in the external Bootstrap CSS file.
Bootstrap is great because it allows you to easily create a responsive, cross browser compatible website really easily. For example making the site responsive without Bootstrap would require you using Media Queries etc, whereas with Bootstrap you can just give your divs class names to make it responsive.
Essentially Bootstrap uses CSS. But it's different to writing your own CSS as it's all pre made for you and you just need to import the external CSS file made by the people at Bootstrap, and you just need to know which classes to use etc.
Bootstrap is a "framework", that is: a pre-built set of files. Included in these files is CSS. Bootstrap uses, among other things, extensive CSS classes to style websites.
You can use Bootstrap without understanding CSS but if you are a beginner you should really learn HTML & CSS first.
W3Schools is a great resource to start learning about HTML & CSS
Bootstrap is a free and open-source front-end framework (library) for designing websites and web applications.
Other answers are good. In addition, some more key details:
Bootstrap 4 released in 2018, is a major rewrite from Bootstrap 3
Bootstrap 4 does not work with older browsers (IE8, IE9), some have concerns over this, if you have same concerns then learn the older Bootstrap 3
At a quick glance, Bootstrap 4 looks to have steep learning curve compared to CSS3. Needed a grid for a small project, for simplicity & for learning CSS3 fundamentals (as other answer pointed), chose CSS3 over bootstrap. (CSS3 Grid, looks simple to code, examples: link1, link2, link3, link4, link5. Detailed description is here)
On additional note
if you are using React.js
then you could use material ui, see below links:
https://material-ui.com/getting-started/installation/
https://material-ui.com/components/buttons/
I'm using bootstrap libraries for making responsive web application
For some requirement i'm using media query for all the screen size as mentioned in below link
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I've a doubt
whether its a right way to develop ?
Do i need to learn and use bootstrap more ,if yes how
No this is not the right way. You need to learn about bootstrap fully. Its full for responsive designs. Its very easy to learn. Just refer this website
I need to add responsive design features to my web application using Twitter Bootstrap. I just want the responsive behavior, I'm not interested in the typography, components or any other stuff included in Bootstrap.
I got a customized Bootstrap version just selecting the grid system. However, when I add the generated CSS to my application, all my styles are messed up (header, links and others). Why is that happening? How can I get a Bootstrap CSS with just the grid system? I would like to avoid a manual modification of the Bootstrap files.
Go to http://getbootstrap.com/customize/ and toggle just what you want from the BS3 framework and then click "Compile and Download" and you'll get the CSS and JS that you chose.
Open up the CSS and remove all but the grid. They include some normalize stuff too. And you'll need to adjust all the styles on your site to box-sizing: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Checkout zirafa/bootstrap-grid-only. It contains only the bootstrap grid and responsive utilities that you need (no reset or anything), and simplifies the complexity of working directly with the LESS files.
Just choose Grid system and "responsive utilities"
it gives you this: http://jsfiddle.net/7LVzs/
Made a Grunt build with the Bootstrap 3.3.5 grid only:
https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid
~10KB minimized.
If you need some other parts from Bootstrap just include them in /src/less/bootstrap.less.
I would suggest using MDO's http://getpreboot.com/ instead. As of v2, preboot back ports the LESS mixins/variables used to create the Bootstrap 3.0 Grid System and is much more light weight than using the CSS generator. In fact, if you only include preboot.less there is NO overhead because the entire file is made up of mixins/variables and therefore are only used in pre-compilation and not the final output.
It looks like you can download just the grid now on Bootstrap 4s new download features.
It's been a while since this question was asked, but maybe now you can forego Bootstrap altogether and use CSS Grid! (it's simpler, neater, more flexible and faster). See this cool article: Stop using Bootstrap — create a practical CSS Grid template for your component based UI
In Bootstrap 4, there are already separated files in their GitHub. You can find them here
https://github.com/twbs/bootstrap/tree/main/dist/css
The card design approach utilized by Google Plus or Facebook is great. How can I do so using twitter bootstrap 2.3 (can't use 3) where I do not want my card size and content to stay sane for a responsive design? I mean, I want the re-sizing to of a card based on the screen size and the content on it stay acceptable. Sorry for the fuzzy question. I am not sure how to be best ask what I have in my head.
Any website you may that that has card ui desing and using bootstrap?
Is there any framework that help with Card UI for desktop web application in general?
Found this the other week and it's exactly what you want:
Bootplus - Sleek, intuitive, and powerful Google styled front-end framework for faster and easier web development (Based on bootstrap)
The particular section you want is under Plus.
So just take the styles you need and you're good to go.
In my case I didn't want a fully fledged framework as I tend to like more the componental way of adding features, since modern web times...
Bootcards does just Cards in three flavors (Android, iOS, Desktop).
http://bootcards.org/index.html
A great addition to Bootstrap and supports bower which was just perfect as a simple command and a couple of lines got me set up.
This has the obvious advantage of decoupling framework core from fancy cards.
Moreover its style is not shouting Google Plus all over like bootplus, which is great to give it a genuine touch.
Just another option ;) hope it helps someone