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
Related
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 may have a very stupid question for some of you, but I am a beginner, and need a little help from some of you who have experience in this area.
For example, I work freelance or have my own business where I do web design with HTML, CSS and JS.
Now I feel very comfortable writing my code with the FLEXBOXGrid system instead of maybe Bootstrap4 or something like that.
does it matter, if I use the Flexboxgrid system or bootstrap or maybe raw Html,css without frameworks?
Is it perhaps better paid to do it with Bootstrap than with Flexboxgrid?
Thanks !
FlexboxGrid http://flexboxgrid.com/ is just a grid. If you need make things like modals, tooltips, etc. use Bootstrap. Bootstrap offers the grid and other components.
That said, do what you feel comfortable with. But a few caveats:
1) When using a framework, it's good to know the underlying technology and how it works, because you can debug your code faster and make optimizations easier.
2) You also don't need to know the underlying technology all that well to use a framework. That's why the framework was invented. It was made to speed up the entire dev process. So by all means, use Bootstrap if you need a suite of components, use FlexboxGrid if you just need a grid. You can also make a custom build of Bootstrap. A quick Google only turned up a custom build of Bootstrap 3 https://getbootstrap.com/docs/3.4/customize/ But if you're using npm to get your libraries you can probably import only the parts of the framework you need.
3) If you're looking to just get the job done for the front-end try approaching it like this:
- What does the client need (modals, grids, static content, etc?)
- If client needs more than static content and a grid, use Bootstrap
- Checkout bootstraps Docs, also checkout other forms of bootstrap. There's two that I love: https://github.com/thednp/bootstrap.native
and https://reactstrap.github.io/
If you're not looking to add more overhead, go with Bootstrap Native.
You're going to get paid based on the agreed upon price. But if you make a fantastic looking site quickly, you may get more. Remember that when using Bootstrap, you can customize the CSS to essentially add your own theme. There are also plenty of free themes out there.
Best of luck
I have a website written in HTML5 and CSS3 and I want to use this site in WordPress. I tried to upload it like template, but it didn't work. How can I solve this issue?
Sirko pointed you in the right direction. WordPress relies on PHP processing and MySQL database so you cannot simply upload it to the theme folder and activate. The HTML and CSS theme will need to be modified to incorporate the core WordPress theme development, at least. It isn't that difficult if you understand how WordPress works.
If you simply want to start with converting the theme to WordPress to support pages and menus alone, it isn't so complicated. If you are very new to this, it might be a stumbling block. You really should learn the core components to making a WP theme. Good luck!
Elegant themes walkthrough - HTML converted to WordPress
Your question is far too general to answer without you narrowing the scope; start with https://codex.wordpress.org/Main_Page to find out how to install and run WordPress, read https://codex.wordpress.org/Theme_Development if you want to adapt your current design to a WordPress theme. And you will need to import content, either by the database or manual entry with the WordPress editor. Read up and then come back to SO with more specific questions.
There is a reason why people sell themes either with HTML5 and Wordpress, though seperate in nature but structural in bound.
It is a long process but simple if you have knowledge of websites:
https://www.elegantthemes.com/blog/tips-tricks/converting-html-sites-to-wordpress-sites
Same as Markatledge said previously, by following the link above it can help you.
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.
I am pretty bad with CSS and HTML5 designing/templates. So, I google around and found two frameworks to start with nice looking layouts, necessary js and html5 support. But I don't know which on to use.
I would appreciate your answers on
What is the main different between two except google analytics ?
Which one is more rails friendly ?
Which one fits best to e-commerce sites, i.e. create rich content, integrate with user management frameworks etc?
Combine them and use them both - http://www.initializr.com/
The HTML5 Boilerplate (H5BP) is a starting project template that is designed to be adapted to your needs. Bootstrap is a specialized, modular, HTML/CSS/JS toolkit.
boilerplate provides you with a best practice HTML5 document, some reset CSS and a lot of javascript goodness like modernizer.js; this Twitter toolkit provides you with stylesheets that define a lot more than just a reset.
The Twitter toolkit is better compared to CSS frameworks like blueprintcss and 960 grid system and positions itself somewhere in between those two. Twitter bootstrap comes with its own fixed look and feel so you can concentrate on your content and logic.
checkout this Quora Thread
Based on your question, I gather you misunderstand what these two projects are. "Google analytics" is not the difference.
Expanding on what #thomas has already stated, Boilerplate contains starter HTML templates with best practices built-in and Bootstrap is a library of CSS and JS UI elements. They are not mutually exclusive.
You may want to look at initializer as #Zlatan has already recommended, or Kickstrap, which is an extension framework for Twitter Bootstrap.