I've kind of comparing Bourbon Neat and Semantic-UI - if I don't really have access to the html code it is simple in Neat to apply grid classes to existing HTML code/elements and set up the overall layout/structure of a page with content and sidebar - how would I do that using Semantic UI.
Related
I have a marketing tool (Pardot) that I'm using to build forms. It creates its own markup which makes it impossible for me to apply bootstrap classes to form element, although I can create them for surrounding containers (spans/divs).
Is there a way to quickly "alias" default Boostrap classes without writing a ton of duplicate CSS for the 50 or so different form-related classes?
I've already put in some CSS, just duplicating the Boostrap CSS, but that's labor intensive and obviously won't work for Bootstrap's JavaScripts.
I work at a big company and at this company we put everything into 1 massive css file. I've noticed that this master CSS file has grown 5000 lines in the past 6 months. In this case, is it better to use several bootstrap classes (max. 10) or continue to add custom classes even though bootstrap is available?
This is an example of something created with only bootstrap:
<div class="col-auto d-flex align-items-center text-center pl-3 pr-1 text-secondary">
Being a Frontend developer working on a big product with a big team and have same scenarios as you have i.e one massive CSS file and twitter bootstrap and still under development.
Based on these I am sharing the way how I managed instead of explaining the concept of Object Oriented CSS (OOCSS), Scalable and Modular Architecture for CSS(SMACSS), Don't Repeat Yourself CSS (DRY CSS).
Let’s take a look what should be there in custom css file.
A) Major layout rules are for the major components of a site like the header, footer, sidebar, or main- content.
B) Minor layout components are considered as modules and typically live inside the major layout components. A content box inside a sidebar is an example.
Eg. gray-box,light-box,white-box,bg-widget,icon-widget,tabset etc.
Now for theming of a website you would only need these two things Major layout and Minor layout but if you don’t require to follow this structure or need changes not integral part of this structure go for twitter bootstrap classes.
This approach is pretty simple and reusable for Backend team as they just copy and paste the markup.
I am using Primefaces 5.0.I want to use or bootstrap css to Primefaces custom components like List, table, selectOneListbox.
I am to apply css to normal component like button, link etc.
It's possible, but due to reason that a internal structure of Primefaces's components are different from a plain HTML components with which Bootstrap supposed to work you will need to make hard job to accomplish that. You will need to debug every Primefaces component to see its internal structure and change Bootstrap's css file that it will correspond to internal classes of Primefaces's component.
Actually you have three alternatives (maybe more):
Like BalusC mentioned, Primefaces has its own implementation of Bootstrap theme: you can see it here: http://www.primefaces.org/themes IMHO, best option
Use Bootfaces JSF library: http://www.bootsfaces.net/ Pay attention that it's pretty new library and possible buggy. There isn't big community support like for Primefaces library.
Make you own Composite (or Custom) Components with desired structure and styling.
I have asked myself (not tested) if it is possible to integrate both bootstrap and materializecss into the same project
Since both frameworks are for the same purpose and probably overlapping in some class definitions etc. is it still possible to combine both frameworks in order to expand my styling options?
Materialize is not based on Bootstrap nor just a "visual layer", using both frameworks may lead to a lots of incompatibilities or at least overlap a lot as most of their functionalities are redundant (grids, menus, icons, etc).
I personally use this project Bootstrap material design which is a theme for Bootstrap and works very well.
If you don't need/want Bootstrap you can also use Material Design Lite that has been recently released by Google. It is a light CSS framework based on Material Design guidelines. Light in comparison to Angular Material or Polymer also using Material Design guidelines but part of or requiring other javascript frameworks (i.e. Angular).
I added Materialize to my bootstrap website and it worked fine, like JC Borlagdan said though there is some overlapping. I just use a website inspector and (usually right click > inspect element) then just turn off the bootstrap or materialize property to see which one I like more and remove the styling from the one I don't like. Just make sure you get the non minified versions of materialize and bootstrap.
It is possible, I already tested both framework in a single web form, though some properties of the controls overlapped, especially to the <div> tag that calls the container class for the tag.
For the grid, it actually follows still the bootsrap, for some reason, (that I don't know). Because I tried rearranging the order of <script> tags, still bootsrap grid still the one used by the webpage/webform.
you need to set the order of CSS files like
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>
Now you can override bootstrap css classes or ids, and can make your own CSS styles.
You could remove the GRID from materialize.css and just compile a custom bootstrap package with BT GRID and without the buttons, labels etc.
Don't use any BT jQuery Plugin, then compile and load bootstrap.min.css first in your template and then the modded materialize.css and materilize.min.js.
You can also integrate just buttons, cards or colors by picking them out of materialize.css and insert in your template.css / style.css to overwrite
bootstrap styles or to add alternative css classes to your GRID.
I'm not sure that's possible. Material Design is something new from Google, and includes responsive as part of it, while the Bootstrap library is from Twitter and seems to be mostly responsive-oriented.
Check out this conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
I suspect that they are not going to be integrated with each other, and will conflict badly, but maybe someone else has more information.
I have seen 'headways' which is a wordpress framework use this technique to easily create css layout based on 960gs. Is there any such software/tool for generating normal css layout?
http://www.pagecolumn.com/
http://developer.yahoo.com/yui/grids/builder/
http://csscreator.com/version2/pagelayout.php
http://www.cssportal.com/layout-generator/
http://grids.heroku.com/
http://www.gridsystemgenerator.com/
and there are many grid systems to choose from (many are respnsive) 960, 1140, blueprint, gold en grid, bootstrap, etc. etc. etc
Yes did one, for generating normal css and html layout using DnD:
HTML CSS layout generator online
Same for generating pure css and html menus:
HTML CSS menu generator online