I am currently developing static websites with bootstrap. However, I would like to try create some non-static websites so the client can update simple texts by themselfs.
What kind of tool would you recommend me to do so with? I would still like to use bootstrap for structure and design.
Thanks in advance!
What you're talking about is using a CMS (Content Management System). There are a number of ways to approach using Bootstrap's framework with a CMS.
One simple CMS you could offer your clients would be CushyCMS: https://www.cushycms.com. CushyCMS allows you to specify editable regions within an HTML file and a client would only be able to edit those areas. This is great if you want to leave most of the website static, but allow them to change a few things in there.
If you wanted to use Wordpress, there is a Bootstrap 3 theme for Wordpress located here: http://johntransue.net/bootstrap-3-wordpress-theme/. Wordpress is a much more complicated CMS, but it has a lot of power and capability. If you take some time to master Wordpress, you can use this basic Bootstrap 3 theme plus Wordpress and develop dynamic sites using Bootstrap.
Related
I want to refine my wordpress theme development process which is:
To make a unique-creative design with Adobe XD or Figma.
To convert it to static HTML using VS Code with Bootstrap.
In wordpress, create custom post types with PODS.
To convert the static HTML in WP templates with Timber.
Based on my experience, this process is the best for me, but I want to integrate better my themes with WP-Blocks.
So, my question is: there are some clean starter-theme ready to use with blocks to use as the main theme and later extend it with a child theme with my custom theme?
I found https://wordpress.org/themes/cormorant/ that works very well with Bootstrap and it's an empty theme so didn't interfere with my design.
Here's the most popular Bootstrap theme with Gutenberg support, has very good child theme support. A solid agency has bought the repo and taken over, they recently added bootstrap 5 support. This should help your process:
https://github.com/understrap/understrap
I find it difficult with Gutenberg to use CSS framework, I don't see much benefits since blocks are already using flexbox and grid.
UPDATE: best answer exists here :), https://wptavern.com/ask-the-bartender-is-there-a-starter-for-building-block-themes
good day guys, i am new to web development, so apperntly, i got a work to design an ecommerce site for a client. the client wants something similar to www.gallerydept.com . But when i used inspect, i noticed the cdn is shopify's and not bootstrap and i'm only familiar with bootstrap.
how can i convert or intergrate bootstrap?
or what is the best suggestion or advice you can give me?
(please remember i'm new to web dev)
A suggestion would be - Don't use bootstrap within shopify.
Reason - Bootstrap has their own set of customizations and shopify's depends upon the theme you are using. Let's consider two scenarios:
For example, you want to create a modal popup and you directly use the bootstrap's library for the same. The look and feel will be different and then you would add your own CSS to override that - problematic thing.
Second scenario, you integrate bootstrap's cdn into shopify then all the other components styling will get affected like buttons, navbar, hrefs etc. So the flow is bootstrap's css overrided your shopify theme css and then you will override both in order to get back to the original - shortly it will become unmanageable.
But after all this I am not saying don't go ahead with this, what I have seen some people doing is utilizing only bootstrap's flexbox system to manage responsiveness in custom shopify pages (which is a good technique because bootstrap's flexbox system is pretty great). So basically what they do is take bootstrap's CSS file and remove all CSS tags not pertaining to the flexbox system and use that leftover CSS file.
And answering your doubt, what you should do now is - go with native HTML/CSS. You get stuck somewhere, SO that doubt/get the code by inspecting the website you have.
Shopify is using themes so you can start looking into tutorials on how to create themes for Shopify. Bootstrap is only controlling the look and feel of the website which is what you do. Shoppify will control the entire ecommerce functionality. So you can use Bootstrap inside the Shopify theme.
You need to be using LIQUID to code anything in Shopify and be sure not to use SCSS only CSS
I'm trying to teach myself more about web design and development by recreating my WordPress portfolio Site, and I eventually want to completely replace my site with this new one. I've done my research and taken a few classes on it, but I had a few general questions:
How would I make the blog section? Would I still want to use something like a WordPress database, or would I be creating all of that from scratch? Are there other tools you'd recommend?
What would you recommend for storing data for the portfolio grid? On my current website each entry is a post type, though that's through WordPress.
I've noticed a lot of WordPress themes have very similar functionality, and many of them use Bootstrap. Is there something the equivalent to a library that these themes use for things like landing pages, post grids, ect?
If you even just had a few links to throw at me to point me in the right direction, that'd be great. I've searched around, but haven't found too much.
EDIT: To clarify, I'm attempting to recreate my WordPress website in HTML using Bootstrap.
How would i make the blog section?
If you are using wordpress, well, you don't have to, wordpress have a Post section specified for blogs.
Would I still want to use something like a WordPress database, or would I be creating all of that from scratch?
Yes, if you are using wordpress, they have their own database, it's not suggested to modify it at all. But if you are not using wordpress, you have to design your database from scratch and either use a database system like MySQL or MSSQL etc.
What would you recommend for storing data for the portfolio grid? On my current website each entry is a post type, though that's through WordPress.
Again, if you are using wordpress, there's probably a plugin you can install to show your portfolio, the database table is automatically created when you install the plugin.
I've noticed a lot of WordPress themes have very similar functionality, and many of them use Bootstrap. Is there something the equivalent to a library that these themes use for things like landing pages, post grids, ect?
Well, Bootstrap is a popular frontend framework, that's why alot of sites use it. No there's no equivalent libarary these themes use, the equivalent libarary is Bootstrap, and then you customize your landing pages, post grids, etc with your own css/script.
If you even just had a few links to throw at me to point me in the right direction, that'd be great. I've searched around, but haven't found too much.
Look up different themes and templates here if you need it, there's wordpress specific themes too Themeforest
I have been creating websites in html and Wordpress for a while, but recently I was asked to look at a website that had been created very badly with a bootstrap based CMS, they were ripped off big time.
I understand that Bootstrap is basically a collection of styles etc but what I do not seem to be able to find is how to integrate a bootstrap template that I will purchase into a website with e-commerce functionality. The template has all the needed shop pages etc I just need to know how I go about making the online shop using the template.
Bootstrap is not a collection of styles -- its a templating system that modifies the layout of the web page content based on the users 'viewport'. in other words it changes the page design for smaller screens like mobile smart phones and tablets. its awesome for e-commerce especially considering the rising growth of sales over mobile,
but otherwise you don't make an online shop with a template, its kind of the other way around. so unless you really want to learn e-commerce programming, consider using a dedicated service like http://www.shopify.com If you want to integrate e-commerce with an existing website, http://www.foxycart.com is very good.
If you are moving it to a completely new setup and are comfortable using WordPress you could use that as a CMS and add e-commerce functionality using WooCommerce. It's trivial to add the plugin and configure it, and customising it is straightforward as it has a pretty good template hierarchy system that makes it easy to override using your own custom templates. It also uses a comprehensive set of filters and actions so custom functionality can be added in future if required.
In terms of adapting an existing theme (Bootstrap-based or otherwise) to work with WooCommerce it's just a case of creating additional templates if required and adding some additional CSS if need be. I'd recommend doing that using a child theme so that the parent theme can be updated in the future without overriding any of your customisations.
The advantage of this setup is that you're working on a platform you're comfortable with (WordPress) and there's a fair amount of support and articles available to help you along. The client would also benefit as it's a pretty popular solution, so they shouldn't have any trouble finding devs/or agencies to work on it in the future (just in case you aren't available).
One potential disadvantage is the WC can be a bit sluggish; I'd recommend not being cheap when it comes to your choice of hosts. I've used TSO before and would recommend them.
I'm trying to create a mobile version of my school website is there a simple way to do this? I'd rather not pay money to get some website to do it for me. can I load an external html template instead of just an external css file.
You can find many free and paid tools that help you create mobile sites. Have a look at this list. I am sure there are many more. If you don't want to pay a penny and you are planning to get some programming experience, you will need some knowledge on HTML5 and CSS.
If you plan for some big and fancy ideas, have a look at jQuery Mobile or Sencha Touch
Sure you can. However, this is no task that can be done automatically. You need to sit down and maybe create a new HTML and/or new CSS. But you can also just leave it as is, because you can view them on the most smartphones without any problems.
Are you using a Content Management System (CMS) such as Wordpress Joomla, or Drupal? If so, look for a responsive template created in the last year. Another option with some CMSs is a plugin/addon that renders a different template when detecting a mobile device.
If you aren't using a CMS it'll take more work, there are lots of responsive frameworks out there, the two big ones are Bootstrap and Zurb Foundation.