I am developing the RWD web app using twitter bootstrap, i want to do customize the bootstrap fro my needs, for that i downloaded the bootstrap source from getbootstrap.com .
I am planning to customize the bootstrap by keeping the bootstrap less files untouched and i want to create my own less files for customiztion as below
#import "../bootstrap/less/bootstrap.less";
#import "custom-variables.less";
#import "custom-other.less";
#import "../bootstrap/less/utilities.less";
But when i downloaded the bootstrap source, i am seeing so many folders along with the bootstrap LESS folder as below,
My question is: what are the files needed for me from bootstrap source folder to include in my web project.
Thanks in advance for any help.
The only file you need to import is bootstrap.less from less folder.
This file itself imports all the other .less files from that folder (besides theme.less, which is used for theming).
I'd suggest importing bootstrap.less and using theme.less to develop customized solutions.
Reading source of both files above may be beneficial to understanding what is "under the hood".
Remember that although you only import bootstrap.less, all the other files must be kept where they are, in order for bootstrap.less to be able to import them.
The files you need are in LESS folder. You can create a new file if you don't want to keep bootstrap same with layout.less . And can import that in master. After compilation your changes will be on top of it. You can use any compiler of your choice. e.g. Sublime Text plugin
You can also use just bootstrap.min.css and write your LESS code in a file a compile it to apply your custom changes(remember to import or include in your html file). This way you don't have to keep track of so many LESS file. As in any way your plans are not to change base bootstrap. So you can choose precompiled version and can always replace it when new updates come.
Related
Im trying to learn sass and JavaScript using VS Code. I created an app folder that holds my js folder which contains my script.js and scss folder that contains my _globals.scss. _header.scss, _variables.scss, and style.scss. I created a dist folder that contains my style.css and style.css.map. I have my html linked to my dist/style.css but I cannot get any of my pages to connect to my html page. I have the #import variables, globals, and header set in my style.scss page but the only styles I can add to my webpage is from the html document itself.
I’ve tried very little because I’m new to web development. Working from a MacBook, I downloaded homebrew, git, and a couple other apps I saw on YouTube. I tried changing my #imports to #use and adding them directly to the style.css but that did not help.
I was expecting by downloading any of those files would get my pages to communicate with each other.
Are you trying to import the .scss files on your styles.css? If so, this is not the right way to work with sass.
To be able to "transform" the .scss files into .css, you have to compile these files using the CLI (command-line/terminal).
This video shows how to do this procedure.
It the above is not the case, could you please send us screenshots of what you're trying to do, it will be really helpful to help you to fix this issue.
Create a new file in CSS(type),
then link that file using the <link> tag in your HTML page using the address of the newly created .css file.
I'm currently working on a large business website using Compass (the Bootstrap Fork). We are using many different scss files, all of them including base.scss, where our variables and mixins live. Now, we want to compile some optional css files from our scss files, that receive the variables from the base.scss files at compile time, but won't have the overhead of all the other rules defined in base included in the finished and compiled css file.
So basically, I'm looking for a way to reference the base file instead of including it. I just want $companyColor (etc...) to be replaced with the value of the corresponding variable in the base file.
Please note, that I cannot have those lose files #imported in my base file, because these files overwrite some of the base rules and are only loaded on certain pages of the website to provide an alternate theme.
Is this at all possible?
Thanks in advance!
Not sure I fully understood what you asked.
But if you want some variables from base.scss to be included in other scss files, you can split your base.scss in two files:
shared-vars.scss containing variables that will be included in
optional scss files
base.scss containg all other variables and mixins, and importing
shared-vars.scss
Now you can import base.scss in your main scss files and only import shared-vars.scss in your optional scss files
I have some problems with css auto complete on my html files.
My project is java project on spring/bootstrap. I have less file that is compiled to css later on. On my html files I don't have access to classes from less or bootstrap files. I have "webapp" folder configured correctly in project.
CSS files are in:
a) webapp\css\less\main.less
b) webapp\css\ (bootstrap, main.css main.min.css)
Is it possible to add css (class) completition to html files that are created in project?
It should do it out of the box for css: http://www.jetbrains.com/editors/html_css_editor.jsp?ide=idea
for LESS however you might need to use a plugin : https://plugins.jetbrains.com/plugin/7059?pr=idea
I know LESS works out of the box with WebStorm and PHPStorm, though
If it still doesn't work, you might need to set the right file extension or associate that file with a certain interpreter
I am trying to get Flatstrap working with Bootstrap 3 but i can't, the link they provide at the website http://flatstrap.org/ does not contain the flat.css and i cannot get it to work anyways. Can someone tell me how to put things together to get the desired flat design ?
You can find the files her :
Go to the download page of Flatstrap ( you have option to download for bootstrap 2 or 3).
After downloading the desired files, unzipe the downloaded folder you will find a dist folder contains a css folder, inside it you will find your files.
The Flatstrap files called ( bootstrap.css ) like the original bootstrap files, because they modify it from the beginning so just use them directly, there is no need for any other external sheet files.
hope this help you.
just download the bootstrap.css from their site, thats the flattened version.
So I renamed my flatstrap, and stuck it in the dist folder of normal bootstrap. And referenced that.
So I'm trying to set up an environment where I can generate a new project and minimize the customization/complexity involved in setting up that new project. I'm using Structurer Pro (from nettuts+) to build the fileset, and this is an awesome thing. I've got github for MAC set up, allowing me to grab the latest Foundation framework files and put them in to the current project.
Now, I'm trying to incorporate LESS into the process also. However, Foundation's css files aren't currently set up with LESS, which means I have 2 options...(1) take a current version and LESS-ize them, then use those customized files to create new projects. (2) don't use LESS...
The other problem I have is, there seem to be quite a few compilers for LESS (simpLESS, CodeKit, LESS, compass), but none of them combine css files! So if I set up 10 LESS files (e.g. IE.less, mobile.less, grid.less, typography.less etc), and have the variables in them, I really don't want 10 css files as the output. I really want 1 compiled css file as the output. I know I can do this manually, or even through Clean css or any of the 30 other sites out there...
But is there one 'thing' out there that will let me use the latest files to create a project framework, customize it by applying a color swatch set to a series of variables (LESS), then compile & combine the resulting CSS for actual implementation?
Foundation ended up moving to SCSS in version 3, so this became kind of a moot point...
Trying to answer some of your questions:
Rename Foundation's .css files to .less and put in your /less/ directory.
Any .css file is a valid .less file (not vice versa though)
You don't have to convert this CSS to LESS, do so only for things you're going to be modifying, and save some time ;)
In your master.less file import these files with #import 'foundation-file';
re: how to combine css/less files :)
Compile only the master.less and include it in your HTML
master.less is your assumed MAIN stylesheet which may actually contain only #import statements, for me it's easier to manage everything this way (and where the combination happens). it will compile to master.css which you then use.
I'm not sure what css foundation includes, if it's a reset.css or something similar I would just leave it and not less-ize it. You would have two css files: one reset.css and one styles.css (the latter of which would be compiled from less files).
You could then add your own setup including a style.less which #imports the various components, if you make this generic enough you can reuse it throughout various projects.
The lessc compiler does handle the #imports of various files and combines them into one file: I have styles.less which #imports base.less components.less etc. I just compile the styles.less to styles.css and it handles the rest:
lessc styles.less styles.css
See: https://gist.github.com/1480684