I have a layout design clearly made for 1200px / 15 cols framework, but my client wants to use Bootstrap 4 with SASS only. Is it even possible to transform Bootstrap into 15 cols layout? I haven't seen such an example online. I'm not a huge fan of Bootstrap for small projects. It is a trend I honestly don't understand. Might be too heavy for a 5 pages website & projects are usually done according to the content, not according to some framework, Twitter-backed or not.
But, this is it.
If it would be possible to code a 15 cols layout, could you give me a hint on how to begin? And how long would it take to perform such an adaptation?
You can just recompile bootstrap 4 with the proper settings.
The documentation at: https://v4-alpha.getbootstrap.com/layout/grid/#customizing-the-grid should explain it, but since it is a temporary link I'll include it here.
First you should be able to build the SASS into CSS, but overall you just have to set the variable for how many columns before including the bootstrap file to be built, or modify the variable.scss file and change the value of $grid-columns value like so:
$grid-columns: 15;
That is the starting point, you may have to adjust other grid variables to control the total width and gutter between each column etc.
You just need to change the $grid-columns variable using SASS.
$grid-columns: 15;
You may also want to check out other variables like $grid-gutter-width to decrease the spacing between columns since you're using more columns.
Working Demo
Also see:
creating custom grid number for bootstrap - Bootstrap
Related
What is the correct way to handle this ? for example, in Tailwind you use w-3/5 and w-2/5 to set two divs with 60% and 40%.
In Vuetify i'm trying to accomplish this by making both divs fluid with a max-width of what I consider being the 60 and 40...
I know this probably is very bad, but I couldn't find another way to workaround this.
something like this
Try to create v-container (fluid if you prefer). Inside of container create v-row. Inside of v-row you can create v-col elements. Vuetify grid is quite similar to bootstrap grid. It has 12-columns grid. So you can't divide 12 to 5 but you can make something very similar :)
Following link would help you to get used to the grid:
https://vuetifyjs.com/en/components/grids/
I am using the following module extension in Joomla 3.0 to display articles: https://www.gavick.com/news-show-pro
The module displays articles in columns and slides to the next article on automation or with pagination buttons.
Problem: It always slides by the nr of columns.
Example: If you specify 4 columns and paginate it slides away those 4 columns to the next 4.
Is there an option which allows me to just slide one column away and display a new one at the end.
Apologies for the initial comment. Looked too quickly at the word "Pro".
This isn't a default feature with this module, however some core jquery hacks can be made to the module, although I'm not a fan of some sort of approach and would suggest using a different module. Below os a little something to get you started.
Firstly ensure you are using the jQuery engine rather than MooTools. To to this, in the Module setting, go to the External Files tab and set the Used Javascript Framework to jQuery.
Go to line 275 of the following the following file:
modules\mod_news_pro_gk5\interface\scripts\engine.jquery.js
where you will find this code:
jQuery($this.module.find('.nspArtScroll2')).animate({
'margin-left': (-1 * this.arts_current * this.arts_block_width) + "%"
}, $this.config['animation_speed']);
and replace it with the following:
var contentWidth = jQuery('.nspArt').width();
jQuery($this.module.find('.nspArtScroll2')).animate({
'margin-left': "-" + contentWidth + "px"
}, $this.config['animation_speed']);
You will now notice that the slide moves 1 article at a time, however the previous ones disappear. This is because of the active class. Only articles within the parent element with the class active are set to be visible. From here on, have a mess around with the CSS to set the visibility styling.
Hope this helps
Unfortunately this will not be added to the extension. Here is the belonging github issue:
https://github.com/GavickPro/News-Show-Pro-GK5/issues/214
I have to design a form for a wordpress plugin.
This plugin will be used on multiple websites. My doubt was how will I be able to make the
form design as generic as possible so that it will fit well and blend well with the wordpress theme's design. Since the form could be placed in the page, post or the widget area.
I also need to consider that most WordPress themes are now "responsive" to reflect the increasing viewing of websites on mobile devices.
I would like to know your opinion on this topic.
Thanks in Advance.
This is a actually a good question, but on the other hand it is a bit broad because you need to consider a lot of things , and as for now, the details supplied by you are very limited.
First , I will assume that the form will be on the front-side of the site .
In order to achieve best - compatibility , IMHO, you will need to :
1 - Simplify the HTML as possible, but at the same time..
2 - Use all the required standard elements ( and also HTML5 support )
3 - do not directly apply any CSS ( see below )
4 - Make sure it is responsive as for the DIV order
5 - Make an easy targeted unique class
6 - If you must specify width / height, make conditionals for widget...
In my experience, the more minimal the code is , the better it "adapts" itself to the theme.
The fact is , that most themes already do ( or should ) include styles for the most common form elements , such as button, input-fields etc. ( because of the comments form, and also well- it is required).
you can also pick up the sample data which has form elements and read also the theme testing process. so if you will stick to those classes and elements ( for example those of the comment form ) you will be fine in most cases . All this is under conditional - because you did not really specify what kind of form you need and how complicated it is .
as for point 3 :
There are several approaches .
make a number of well designed generic "form themes" that the user
can choose but one option to..
leave an empty css and a place to embed own css In settings.
Create a complete set of CSS IDs and classes, with applied rules from
a color picker for example
combination of all of the above
All of this answer can be summed to one word "flexibility" .
You need to think of letting the users the maximum flexibility possible , but at the same time supply them with the right TOOLS to achieve it.
I am stuck working on a gallery, which uses 3 columns and 1 row multiplied alot of times to show a simple and clear gallery.
The problem comes when after publishing, the max-length of articles cut the content, but I can't find the config where I can change it.
This is problem with your template style(or gallery plugin/module gallery style), you have to edit your css file.
Best way is to check gallery with Firebug (mozzila add-in), make necessary changes and then overwrite default style.
Be careful with your updates, that do not overwrite your style.
It was a problem with MySQL.
I just changed "Text" value for "LongText" (on MySQL), so that way I can use a large amount of characters on the same script.
I've searched for this question but I don't know if I've phrased it correctly.
I'm working on a Joomla website and on one of the pages I have three module positions
content-top-a
content-top-b
content-top-c
So essentially the page width is divided into thirds. But instead of having three modules on this page, I want one module to take up the first third of the page and another module beside it taking up the other two thirds of the page. But when I assign the first module to content-top-a and the other module to content-top-b it just sets both modules to the same width and divides the page 1/2 | 1/2 rather than 1/3 | 2/3
I'm fairly new to Joomla so I hope I got that question across alright.
Thanks in advance for any direction.
This will be a template edit. You will need to look at the css files for the template and add some php code to make it check if only 2 modules are published to only 2 module positions of the 3.
And if only 2, then have a class added to those 2 postions, with some styles on it like below:
<style>
.class1-position { width: 33%; }
.class2-positions { width: 67%; }
</style>
Or if you know the site width, then set that to px for the width of the modules and don't use percentage (%).
Here is some php code for checking if the modules are published
if(countModules('position-1')):
// Some code
endif;
But to fully answer your question I would have to see some code, there are so many variables that I don't know, with what type of template you are working with. But this will definitely get you headed in the right direction.