Does anyone know what to do next after you compile and get config.json in Bootstrap?
Any idea how to use it to update my current bootstrap.css?? or how to generate a css from it?? This is making me crazy, no enough documentation in Bootstrap about this..
I found this link: Twitter Bootstraps config.json - what does it do?
But the answer in there doesn't answer my questions. I'd really prefer more detailed answer. Thanks..^^
config.json stores the Customizer settings you used for your custom Bootstrap build.
You can reload those settings into the Customizer using the file upload at the top of the page.
You can also alternatively extract the LESS variable values from the JSON and compile Bootstrap manually using those values, if you have a LESS compiler installed locally.
Related
I'm trying to figure out whether it would pay off to use Bootstrap on my existing Wordpress site and while researching it, I came up with the idea that the template I'm using might actually already be using Bootstrap.
I can't see any signs of Bootstrap in my functions.php file or through the FTP, but the template is using classes like these: ".col-md-4", ".col-sm-4". Is that because it was created with Bootstrap or is it just a convention?
Sorry if this is complete nonsense.
That's a classic bootstrap class.
You shouldn't check the PHP files but the css ones or javascript.
It may be a sign.
You can check more bootstrap classes Like container, row, and ...
And for being sure you can check asset files like CSS and JS files, if you found bootstrap css and js files you may be sure of using bootstrap in your template.
You can open asset files it may wrote the bootstrap version in it even.
I am following this link:
Docs
Specifically:
Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable’s value and recompile with the included Gruntfile as needed.
I have never used Gruntfile before. Can I use other tools to compile scss into css? Also, what the outcome of such compilation is going to be? A _custom.css that must be placed in the same folder where original bootstrap.css is?
Thanks for help.
While there is not an "official" Bootstrap 4 customizer like there was in 3.x, there are several tools that can do this. These all convert from SASS to CSS, and some provide a UI if you're not familiar with SASS.
Themestr.app Customizer
Bootply Customizer
Also see this answer for details on how to customize with CSS overrides or SASS.
You actually do not need to know too much about Grunt. Bootstrap 4 provides doc on how to setup build tools which can be found at,
https://v4-alpha.getbootstrap.com/getting-started/build-tools/#tooling-setup
Run grunt (or a specific set of Grunt tasks) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
My suggestion is to clone the Bootstrap Beta 4 from Github change the variable and rebuild using the reconfigure gruntfile.
https://github.com/twbs/bootstrap#running-documentation-locally
I'm trying to make a theme for Liferay 6.2 and I have some misunderstandings.
I create new project, choose theme, then click next and choose velocity and _styled responsively. But I want to get a standart theme which I can deploy and nothing change in comparison with default theme. I thought I got the point and after that I should copy overriden .css files in _diffs folder. But I don't achieve that. I attached screenshot with my result and I can't understand why I don't have default theme instead. Also I understand that it may be very dumb question but I hope someone would explain it briefly to me. Thanks in advance.
You should use the classic theme as base.
Something like:
property name="theme.parent" value="classic"
in your build.xml will build your project with the theme that comes with LR by default (the classic one).
Victor already gave the correct answer. If you're interested in the background: _styled is a theme that basically provides the basics for your own theme but doesn't make any assumption on its appearance. If you really want to build your own theme, this is the preferred one to start from. If you only want to tweak a few things from the classic theme, start with classic (as Victor says).
Note that classic is not meant to be extended (though it works) - contrary to the documentation, the css/custom.css file in classic theme is not empty for this reason. This means that you'll need to adopt the instructions for creating a theme and start with classic's own custom.css file.
This maybe a naive question - but I am stuck.
I have created a simple (my first) bootply project.
One can access it here: http://www.bootply.com/sRefcMualY
I wish to "style" this bootstrap project using the free theme "Slate", available here:
http://bootswatch.com/slate/
I have had no success in "applying" the theme to my project! Copying the css into the css window works in design mode, but is rejected if I try and save it.
It must be something silly and easy - but I am stumped!
Thanks in advance.
You would download the Slate bootstrap.min.css, and use it replace the bootstrap.min.css in your project. For Bootply, it would be a matter of pointing to the Slate CSS. One way is to use CSS import:
http://www.bootply.com/nGTdpeesE2
How do I use Wordpress together with Twitter Bootstrap? I know how to set up a Wordpress page and I've already worked with Bootstrap, but now I want to use these two together for the first time.
For my Wordpress projects I normally just installed Wordpress and started from scratch with creating a new theme. For my Bootstrap projects I always used Initializr to build a template.
Now using Google I found various "Bootstrap themes" and plugins , do I need one of those? I want to customize the bootstrap look with my own colors etc. using LESS, that's why I am asking. I am just having trouble to understand how these two will work together and I haven't found any good resource for it.
There will be a few ways to tackle this, but here's what I've been doing...
Take a copy of your favorite starting point theme
Download the full bootstrap repo (less and everything) and pop it into your theme folder.
Create a folder called 'css' inside the bootstrap folder and set this as your location to output your compiled 'bootstrap.css' file.
Then up in the theme root, open 'styles.css', change the theme name etc as you would if you were creating a new theme, delete all the styles and add just one line of code #import url("bootstrap/css/bootstrap.css");
You should now be able to select this new theme from your 'appearances' menu in 'wp-admin'.
It'll obviously look horrific, but once you add a few of your theme classes/IDs into 'layout.less'. Then run through 'variables.less' to add you base theme you'll be getting somewhere.
Other than that you'll have to go through each template file and consider all the classes/IDs, sometimes edit the theme to make better use of existing bootstrap classes, but other times you'll need to add you're own custom classes to bootstrap.
It's quite time consuming, but once its done it can obviously be re-used to speed up future projects.
Incidentally, I've also been building a theme using this same principle but based on http://stuffandnonsense.co.uk/projects/320andup/ both great projects. I'd recommend seeing which best suits you.
You could always us the Twitter Bootstrap WordPress plugin. It's completely free on WordPress.org here: http://wordpress.org/extend/plugins/wordpress-bootstrap-css/
There's also lots of shortcodes included so you can include Bootstrap elements within your pages and post - there's a demo page of it all here: http://worpit.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-shortcodes-demo/
Hope that helps you get started!
I answered the same question before here at stackoverflow. I feel like it's kind of late sharing but for those who are looking for such tutorial just click the hyperlinked title given: Using Twitter Bootstrap in Wordpress.
There is a quick way to do it, using composer in your theme:
composer.json
{
"config": {
"component-dir": "lib/composer",
"vendor-dir": "lib/composer",
"bin-dir" : "bin/composer",
"cache-dir" : "var/cache/composer"
},
"require": {
"twitter/bootstrap": "3"
}
}
Note: I removed the other composer's section and requirements and phing integration to reduce complexity.
Execute
composer install
And then in your theme, add /lib/composer/twitter/bootstrap/dist/css/bootstrap.css with this sentences
$bootUri = get_template_directory_uri() . '/lib/composer/twitter/bootstrap/dist/css/bootstrap.css';
wp_enqueue_style('sindy_bootstrap', $bootsUri);
et voilà! :)