Alternatives to Bootstrap logo

Alternatives to Bootstrap

Semantic UI, jQuery, Material, React, and Foundation are the most popular alternatives and competitors to Bootstrap.
55.5K
13.1K
+ 1
7.7K

What is Bootstrap and what are its top alternatives?

Bootstrap is a popular front-end framework that allows developers to create responsive websites and web applications with ease. Its key features include a grid system for layout, pre-designed components and styles, support for responsive design, and extensive documentation. However, Bootstrap has limitations such as a large file size, limited customization options, and a tendency for websites to look generic if not customized properly.

  1. Tailwind CSS: Tailwind CSS is a utility-first CSS framework that offers a low-level utility classes for building custom designs. Key features include a customizable design system, rapid development workflow, and scalable architecture. Pros include flexibility and customization options, cons include a steeper learning curve compared to Bootstrap.
  2. Foundation: Foundation is a responsive front-end framework that provides a flexible grid system, pre-designed components, and Sass support. Key features include mobile-friendly design, rapid prototyping, and advanced customization options. Pros include a lighter file size compared to Bootstrap, cons include a smaller community and fewer plugins.
  3. Semantic UI: Semantic UI is a user-friendly CSS framework that offers a wide range of pre-designed components and themes. Key features include responsive design, intuitive syntax, and modularity. Pros include a modern design aesthetic, cons include less documentation compared to Bootstrap.
  4. Bulma: Bulma is a modern CSS framework based on Flexbox that offers a clean and minimalist design. Key features include a modular and lightweight architecture, customizable components, and responsive layout. Pros include a modern design aesthetic, cons include limited browser support compared to Bootstrap.
  5. Materialize: Materialize is a responsive front-end framework based on Google's Material Design guidelines. Key features include pre-designed components and animations, a responsive grid system, and Sass support. Pros include a modern design aesthetic, cons include limited customization options compared to Bootstrap.
  6. UIKit: UIKit is a lightweight and modular front-end framework that offers a range of components and widgets for building responsive websites. Key features include a flexible grid system, customizable components, and CSS animations. Pros include a modular architecture, cons include less plugins and templates compared to Bootstrap.
  7. Pure CSS: Pure CSS is a set of small and responsive CSS modules that can be used to create simple and minimalistic designs. Key features include a lightweight file size, responsive grid system, and customizable components. Pros include simplicity and performance, cons include limited pre-designed components compared to Bootstrap.
  8. Skeleton: Skeleton is a minimal CSS framework that provides a responsive grid system and basic styling for typography and forms. Key features include a lightweight file size, easy customization, and mobile-first design approach. Pros include simplicity and performance, cons include limited pre-designed components compared to Bootstrap.
  9. Milligram: Milligram is a minimalist CSS framework that offers a small file size and basic styling for typography and forms. Key features include a lightweight architecture, responsive grid system, and customizable components. Pros include simplicity and performance, cons include limited pre-designed components compared to Bootstrap.
  10. Vuetify: Vuetify is a Vue.js framework that implements Google's Material Design guidelines for building responsive web applications. Key features include pre-designed components, themes, and a customizable grid system. Pros include seamless integration with Vue.js, cons include a heavier file size compared to pure CSS frameworks like Bootstrap.

Top Alternatives to Bootstrap

  • Semantic UI
    Semantic UI

    Semantic empowers designers and developers by creating a shared vocabulary for UI. ...

  • jQuery
    jQuery

    jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. ...

  • Material
    Material

    Express your creativity with Material, an animation and graphics framework for Google's Material Design and Apple's Flat UI in Swift. ...

  • React
    React

    Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project. ...

  • Foundation
    Foundation

    Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices. ...

  • Material Design
    Material Design

    Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences. ...

  • WordPress
    WordPress

    The core software is built by hundreds of community volunteers, and when you’re ready for more there are thousands of plugins and themes available to transform your site into almost anything you can imagine. Over 60 million people have chosen WordPress to power the place on the web they call “home” — we’d love you to join the family. ...

  • Bulma
    Bulma

    Bulma is a CSS framework based on Flexbox and built with Sass

Bootstrap alternatives & related posts

Semantic UI logo

Semantic UI

956
1.5K
673
A UI Component library implemented using a set of specifications designed around natural language
956
1.5K
+ 1
673
PROS OF SEMANTIC UI
  • 157
    Easy to use and looks elegant
  • 92
    Variety of components
  • 64
    Themes
  • 61
    Has out-of-the-box widgets i would actually use
  • 57
    Semantic, duh
  • 44
    Its the future
  • 42
    Open source
  • 37
    Very active development
  • 31
    Far less complicated structure
  • 28
    Gulp
  • 9
    Already has more features than bootstrap
  • 8
    Just compare it to Bootstrap and you'll be hooked
  • 7
    Clean and consistent markup model
  • 7
    UI components
  • 6
    Responsiveness
  • 4
    Because it is semantic :-D
  • 4
    Elegant. clean. readable. maintainable
  • 4
    Good-Looking
  • 2
    Is big and look really great, nothing like this
  • 2
    Consistent
  • 2
    Great docs
  • 2
    Modular and scalable
  • 1
    Easy to use
  • 1
    Blends with reactjs
  • 1
    Jquery
CONS OF SEMANTIC UI
  • 5
    Outdated build tool (gulp 3))
  • 3
    Poor accessibility support
  • 3
    HTML is not semantic (see list component)
  • 2
    Javascript is tied to jquery

related Semantic UI posts

ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

See more
Hassan Mugabo
Software Developer at Codeparl Digital Services · | 3 upvotes · 74K views

Hi, I'm using Tailwind CSS for my project but I found Bootstrap and Semantic UI offering pre-built components like Model, Sidebars, and so forth. Is it possible to use Semantic UI or Bootstrap under Tailwind CSS?

See more
jQuery logo

jQuery

191.4K
67.9K
6.6K
The Write Less, Do More, JavaScript Library.
191.4K
67.9K
+ 1
6.6K
PROS OF JQUERY
  • 1.3K
    Cross-browser
  • 957
    Dom manipulation
  • 809
    Power
  • 660
    Open source
  • 610
    Plugins
  • 459
    Easy
  • 395
    Popular
  • 350
    Feature-rich
  • 281
    Html5
  • 227
    Light weight
  • 93
    Simple
  • 84
    Great community
  • 79
    CSS3 Compliant
  • 69
    Mobile friendly
  • 67
    Fast
  • 43
    Intuitive
  • 42
    Swiss Army knife for webdev
  • 35
    Huge Community
  • 11
    Easy to learn
  • 4
    Clean code
  • 3
    Because of Ajax request :)
  • 2
    Powerful
  • 2
    Nice
  • 2
    Just awesome
  • 2
    Used everywhere
  • 1
    Improves productivity
  • 1
    Javascript
  • 1
    Easy Setup
  • 1
    Open Source, Simple, Easy Setup
  • 1
    It Just Works
  • 1
    Industry acceptance
  • 1
    Allows great manipulation of HTML and CSS
  • 1
    Widely Used
  • 1
    I love jQuery
CONS OF JQUERY
  • 6
    Large size
  • 5
    Sometimes inconsistent API
  • 5
    Encourages DOM as primary data source
  • 2
    Live events is overly complex feature

related jQuery posts

Kir Shatrov
Engineering Lead at Shopify · | 22 upvotes · 2.4M views

The client-side stack of Shopify Admin has been a long journey. It started with HTML templates, jQuery and Prototype. We moved to Batman.js, our in-house Single-Page-Application framework (SPA), in 2013. Then, we re-evaluated our approach and moved back to statically rendered HTML and vanilla JavaScript. As the front-end ecosystem matured, we felt that it was time to rethink our approach again. Last year, we started working on moving Shopify Admin to React and TypeScript.

Many things have changed since the days of jQuery and Batman. JavaScript execution is much faster. We can easily render our apps on the server to do less work on the client, and the resources and tooling for developers are substantially better with React than we ever had with Batman.

#FrameworksFullStack #Languages

See more
Ganesa Vijayakumar
Full Stack Coder | Technical Architect · | 19 upvotes · 5.3M views

I'm planning to create a web application and also a mobile application to provide a very good shopping experience to the end customers. Shortly, my application will be aggregate the product details from difference sources and giving a clear picture to the user that when and where to buy that product with best in Quality and cost.

I have planned to develop this in many milestones for adding N number of features and I have picked my first part to complete the core part (aggregate the product details from different sources).

As per my work experience and knowledge, I have chosen the followings stacks to this mission.

UI: I would like to develop this application using React, React Router and React Native since I'm a little bit familiar on this and also most importantly these will help on developing both web and mobile apps. In addition, I'm gonna use the stacks JavaScript, jQuery, jQuery UI, jQuery Mobile, Bootstrap wherever required.

Service: I have planned to use Java as the main business layer language as I have 7+ years of experience on this I believe I can do better work using Java than other languages. In addition, I'm thinking to use the stacks Node.js.

Database and ORM: I'm gonna pick MySQL as DB and Hibernate as ORM since I have a piece of good knowledge and also work experience on this combination.

Search Engine: I need to deal with a large amount of product data and it's in-detailed info to provide enough details to end user at the same time I need to focus on the performance area too. so I have decided to use Solr as a search engine for product search and suggestions. In addition, I'm thinking to replace Solr by Elasticsearch once explored/reviewed enough about Elasticsearch.

Host: As of now, my plan to complete the application with decent features first and deploy it in a free hosting environment like Docker and Heroku and then once it is stable then I have planned to use the AWS products Amazon S3, EC2, Amazon RDS and Amazon Route 53. I'm not sure about Microsoft Azure that what is the specialty in it than Heroku and Amazon EC2 Container Service. Anyhow, I will do explore these once again and pick the best suite one for my requirement once I reached this level.

Build and Repositories: I have decided to choose Apache Maven and Git as these are my favorites and also so popular on respectively build and repositories.

Additional Utilities :) - I would like to choose Codacy for code review as their Startup plan will be very helpful to this application. I'm already experienced with Google CheckStyle and SonarQube even I'm looking something on Codacy.

Happy Coding! Suggestions are welcome! :)

Thanks, Ganesa

See more
Material logo

Material

93
87
3
A Graphics Framework for Material Design in Swift
93
87
+ 1
3
PROS OF MATERIAL
  • 1
    Good Documentation
  • 1
    Samples included
  • 1
    IOS benefits
CONS OF MATERIAL
    Be the first to leave a con

    related Material posts

    React logo

    React

    172.1K
    142.1K
    4.1K
    A JavaScript library for building user interfaces
    172.1K
    142.1K
    + 1
    4.1K
    PROS OF REACT
    • 831
      Components
    • 672
      Virtual dom
    • 578
      Performance
    • 508
      Simplicity
    • 442
      Composable
    • 186
      Data flow
    • 166
      Declarative
    • 128
      Isn't an mvc framework
    • 120
      Reactive updates
    • 115
      Explicit app state
    • 50
      JSX
    • 29
      Learn once, write everywhere
    • 22
      Easy to Use
    • 21
      Uni-directional data flow
    • 17
      Works great with Flux Architecture
    • 11
      Great perfomance
    • 10
      Javascript
    • 9
      Built by Facebook
    • 8
      TypeScript support
    • 6
      Server Side Rendering
    • 6
      Speed
    • 5
      Feels like the 90s
    • 5
      Excellent Documentation
    • 5
      Props
    • 5
      Functional
    • 5
      Easy as Lego
    • 5
      Closer to standard JavaScript and HTML than others
    • 5
      Cross-platform
    • 5
      Easy to start
    • 5
      Hooks
    • 5
      Awesome
    • 5
      Scalable
    • 4
      Super easy
    • 4
      Allows creating single page applications
    • 4
      Server side views
    • 4
      Sdfsdfsdf
    • 4
      Start simple
    • 4
      Strong Community
    • 4
      Fancy third party tools
    • 4
      Scales super well
    • 3
      Has arrow functions
    • 3
      Beautiful and Neat Component Management
    • 3
      Just the View of MVC
    • 3
      Simple, easy to reason about and makes you productive
    • 3
      Fast evolving
    • 3
      SSR
    • 3
      Great migration pathway for older systems
    • 3
      Rich ecosystem
    • 3
      Simple
    • 3
      Has functional components
    • 3
      Every decision architecture wise makes sense
    • 3
      Very gentle learning curve
    • 2
      Split your UI into components with one true state
    • 2
      Image upload
    • 2
      Permissively-licensed
    • 2
      Fragments
    • 2
      Sharable
    • 2
      Recharts
    • 2
      HTML-like
    • 1
      React hooks
    • 1
      Datatables
    CONS OF REACT
    • 41
      Requires discipline to keep architecture organized
    • 30
      No predefined way to structure your app
    • 29
      Need to be familiar with lots of third party packages
    • 13
      JSX
    • 10
      Not enterprise friendly
    • 6
      One-way binding only
    • 3
      State consistency with backend neglected
    • 3
      Bad Documentation
    • 2
      Error boundary is needed
    • 2
      Paradigms change too fast

    related React posts

    Johnny Bell

    I was building a personal project that I needed to store items in a real time database. I am more comfortable with my Frontend skills than my backend so I didn't want to spend time building out anything in Ruby or Go.

    I stumbled on Firebase by #Google, and it was really all I needed. It had realtime data, an area for storing file uploads and best of all for the amount of data I needed it was free!

    I built out my application using tools I was familiar with, React for the framework, Redux.js to manage my state across components, and styled-components for the styling.

    Now as this was a project I was just working on in my free time for fun I didn't really want to pay for hosting. I did some research and I found Netlify. I had actually seen them at #ReactRally the year before and deployed a Gatsby site to Netlify already.

    Netlify was very easy to setup and link to my GitHub account you select a repo and pretty much with very little configuration you have a live site that will deploy every time you push to master.

    With the selection of these tools I was able to build out my application, connect it to a realtime database, and deploy to a live environment all with $0 spent.

    If you're looking to build out a small app I suggest giving these tools a go as you can get your idea out into the real world for absolutely no cost.

    See more
    Zach Holman

    Oof. I have truly hated JavaScript for a long time. Like, for over twenty years now. Like, since the Clinton administration. It's always been a nightmare to deal with all of the aspects of that silly language.

    But wowza, things have changed. Tooling is just way, way better. I'm primarily web-oriented, and using React and Apollo together the past few years really opened my eyes to building rich apps. And I deeply apologize for using the phrase rich apps; I don't think I've ever said such Enterprisey words before.

    But yeah, things are different now. I still love Rails, and still use it for a lot of apps I build. But it's that silly rich apps phrase that's the problem. Users have way more comprehensive expectations than they did even five years ago, and the JS community does a good job at building tools and tech that tackle the problems of making heavy, complicated UI and frontend work.

    Obviously there's a lot of things happening here, so just saying "JavaScript isn't terrible" might encompass a huge amount of libraries and frameworks. But if you're like me, yeah, give things another shot- I'm somehow not hating on JavaScript anymore and... gulp... I kinda love it.

    See more
    Foundation logo

    Foundation

    1.2K
    1.2K
    740
    The most advanced responsive front-end framework in the world
    1.2K
    1.2K
    + 1
    740
    PROS OF FOUNDATION
    • 160
      Responsive grid
    • 93
      Mobile first
    • 80
      Open source
    • 75
      Semantic
    • 72
      Customizable
    • 52
      Quick to prototype
    • 50
      Simple ui
    • 45
      Fast
    • 44
      Best practices
    • 39
      Easy setup
    • 6
      Neutral style
    • 6
      HTML, SCSS and JS
    • 5
      Accessibility support
    • 5
      Professional
    • 3
      Xy grid
    • 2
      Sass
    • 2
      Every new version is smaller, smarter & more efficient
    • 1
      Robust
    CONS OF FOUNDATION
    • 5
      Requires jQuery
    • 4
      Awful site

    related Foundation posts

    ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

    ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

    React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

    styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

    React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

    Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

    See more
    Shared insights
    on
    BootstrapBootstrapFoundationFoundation

    Should I go with Foundation CSS instead of Bootstrap? Or, if any other popular responsive frameworks are out there, please suggest them to me. My site mainly targets mobile or tablet

    See more
    Material Design logo

    Material Design

    597
    887
    14
    Google's Material Design
    597
    887
    + 1
    14
    PROS OF MATERIAL DESIGN
    • 5
      They really set a new bar in design
    • 4
      An intuitive design
    • 3
      Simply, And Beautiful
    • 2
      Many great libraries
    • 0
      Composants
    CONS OF MATERIAL DESIGN
    • 2
      Sometimes, it can hang the browser

    related Material Design posts

    Giordanna De Gregoriis
    Jr Fullstack Developer at Stefanini Inspiring · | 8 upvotes · 480K views

    TL;DR: Shall I keep developing with Nuxt.js 2 and wait for a migration guide to Nuxt 3? Or start developing with Vue.js 3 using Vite, and then migrate to Nuxt 3 when it comes out?

    Long version: We have an old web application running on AngularJS and Bootstrap for frontend. It is mostly a user interface to easily read and post data to our engine.

    We want to redo this web application. Started from scratch using the newest version of Angular 2+ and Material Design for frontend. We haven't even finished rewriting half of the application and it is becoming dreadful to work on.

    • The cold start takes too much time
    • Every little change reload the whole page. Seconds to minutes of development lost looking at a loading blank page just changing css
    • Code maintainability is getting worse... again... as the application grows, since we must create everytime 5 files for a new page (html, component.ts, module.ts, scss, routing.ts)

    I'm currently trying to code a Proof of Concept using Nuxt.js and Tailwind CSS. But the thing is, Vue.js 3 is out and has interesting features such as the composition API, teleport and fragments. Also we wish to use the Vite frontend tooling, to improve our time developing regardless of our application size. It feels like a better alternative to Webpack, which is what Nuxt 2 uses.

    I'm already trying Nuxt.js with the nuxt-vite experimental module, but many nuxt modules are still incompatible from the time I'm posting this. It is also becoming cumbersome not being able to use teleport or fragments, but that can be circumvented with good components.

    What I'm asking is, what should be the wisest decision: keep developing with Nuxt 2 and wait for a migration guide to Nuxt 3? Or start developing with Vue.js 3 using Vite, and then migrate to Nuxt 3 when it comes out?

    See more
    Ashish Sharma
    Sr. UI Associate at Daffodil Software · | 5 upvotes · 716.9K views

    I am a bit confused when to choose Bootstrap vs Material Design or Tailwind CSS, and why? I mean, in which kind of projects we can work with bootstrap/Material/Tailwind CSS? If the design is made up on the grid, we prefer bootstrap, and if flat design, then material design. Similarly, when do we choose tailwind CSS?

    Any suggestion would be appreciated?

    See more
    WordPress logo

    WordPress

    97.1K
    39.4K
    2.1K
    A semantic personal publishing platform with a focus on aesthetics, web standards, and usability.
    97.1K
    39.4K
    + 1
    2.1K
    PROS OF WORDPRESS
    • 415
      Customizable
    • 366
      Easy to manage
    • 354
      Plugins & themes
    • 258
      Non-tech colleagues can update website content
    • 247
      Really powerful
    • 145
      Rapid website development
    • 78
      Best documentation
    • 51
      Codex
    • 44
      Product feature set
    • 35
      Custom/internal social network
    • 18
      Open source
    • 8
      Great for all types of websites
    • 7
      Huge install and user base
    • 5
      Perfect example of user collaboration
    • 5
      Open Source Community
    • 5
      Most websites make use of it
    • 5
      It's simple and easy to use by any novice
    • 5
      Best
    • 5
      I like it like I like a kick in the groin
    • 4
      Community
    • 4
      API-based CMS
    • 3
      Easy To use
    • 2
      <a href="https://secure.wphackedhel">Easy Beginner</a>
    CONS OF WORDPRESS
    • 13
      Hard to keep up-to-date if you customize things
    • 13
      Plugins are of mixed quality
    • 10
      Not best backend UI
    • 2
      Complex Organization
    • 1
      Do not cover all the basics in the core
    • 1
      Great Security

    related WordPress posts

    Dale Ross
    Independent Contractor at Self Employed · | 22 upvotes · 1.6M views

    I've heard that I have the ability to write well, at times. When it flows, it flows. I decided to start blogging in 2013 on Blogger. I started a company and joined BizPark with the Microsoft Azure allotment. I created a WordPress blog and did a migration at some point. A lot happened in the time after that migration but I stopped coding and changed cities during tumultuous times that taught me many lessons concerning mental health and productivity. I eventually graduated from BizSpark and outgrew the credit allotment. That killed the WordPress blog.

    I blogged about writing again on the existing Blogger blog but it didn't feel right. I looked at a few options where I wouldn't have to worry about hosting cost indefinitely and Jekyll stood out with GitHub Pages. The Importer was fairly straightforward for the existing blog posts.

    Todo * Set up redirects for all posts on blogger. The URI format is different so a complete redirect wouldn't work. Although, there may be something in Jekyll that could manage the redirects. I did notice the old URLs were stored in the front matter. I'm working on a command-line Ruby gem for the current plan. * I did find some of the lost WordPress posts on archive.org that I downloaded with the waybackmachinedownloader. I think I might write an importer for that. * I still have a few Disqus comment threads to map

    See more
    A White
    Front End Web Dev at Burnt Design · | 21 upvotes · 91.1K views

    Below is my own professional history to give some context to my current skill set. I have been a front-end dev for 18 years. My tools of choice are:

    • HTML5
    • CSS 3
    • JavaScript
    • WordPress
    • PHP (but not my strongest skill as I don't write it too often)

    I first of all would like to become a better and more 'full stack' developer, and I have a business idea that will hopefully allow me to move in this direction. The queries I have will result in which approach I take here. One of the most important aspects to me is the system being 'future proof'. If successful I know I will eventually bring additional developers on board, and they will likely be better developers than me! I want to avoid them having to rebuild the system and would like it to be something that they can just expand and improve on.

    The business which I'd like to create is the following (in a nutshell), I have ideas for many more features, but this is how I'd like to begin:

    Web-based system for gym management & marketing. Specifically a class-based gym

    1. One-stop shop for a class-based gym owner
    2. Sell memberships
    3. Manage class bookings
    4. Reporting
    5. Automatically generated website
    6. Choose a pre-designed template and amend the content through their dashboard
    7. Marketing
    8. Easily send a newsletter to members
    9. Book a free trial form on the website linked directly to the booking system

    Important requirements

    1. One system, one dashboard. I would like the gym owner to have one place to control everything. Members, marketing, and website amendments.
    2. Future proof. These features are the bare minimum and I'd like to keep expanding on the features as time goes on. Things like uploading programming for members, messaging between members and admin, and selling merchandise via the website.
    3. Fast to load & secure. I live in the WordPress world right now, which isn't the fastest or most secure environment. I appreciate there are better ways to develop a system like this, but I'm a little clueless about where to start.
    4. Mobile. The data created should easily communicate with a mobile app that customers will download to manage their memberships and class bookings.

    TIA to anybody that can provide some guidance on where to start here.

    See more
    Bulma logo

    Bulma

    755
    854
    38
    Free, open source, & modern CSS framework based on Flexbox
    755
    854
    + 1
    38
    PROS OF BULMA
    • 12
      Easy setup
    • 6
      Easy-to-customize the sass build
    • 6
      Community-created themes
    • 5
      Responsive
    • 5
      Great docs
    • 4
      Easy to learn and use
    CONS OF BULMA
    • 2
      Not yet supporting Vue 3

    related Bulma posts

    CDG

    I use Laravel because it's the most advances PHP framework out there, easy to maintain, easy to upgrade and most of all : easy to get a handle on, and to follow every new technology ! PhpStorm is our main software to code, as of simplicity and full range of tools for a modern application.

    Google Analytics Analytics of course for a tailored analytics, Bulma as an innovative CSS framework, coupled with our Sass (Scss) pre-processor.

    As of more basic stuff, we use HTML5, JavaScript (but with Vue.js too) and Webpack to handle the generation of all this.

    To deploy, we set up Buddy to easily send the updates on our nginx / Ubuntu server, where it will connect to our GitHub Git private repository, pull and do all the operations needed with Deployer .

    CloudFlare ensure the rapidity of distribution of our content, and Let's Encrypt the https certificate that is more than necessary when we'll want to sell some products with our Stripe api calls.

    Asana is here to let us list all the functionalities, possibilities and ideas we want to implement.

    See more
    Daniel Hernández Alcojor
    Frontend Developer at atSistemas · | 8 upvotes · 1M views

    I'm building, from scratch, a webapp. It's going to be a dashboard to check on our apps in New Relic and update the Apdex from the webapp. I have just chosen Next.js as our framework because we use React already, and after going through the tutorial, I just loved the latest changes they have implemented.

    But we have to decide on a CSS framework for the UI. I'm partial to Bulma because I love that it's all about CSS (and you can use SCSS from the start), that it's rather lightweight and that it doesn't come with JavaScript clutter. One of the things I hate about Bootstrap is that you depend on jQuery to use the JavaScript part. My boss loves UIkIt, but when I've used it in the past, I didn't like it.

    What do you think we should use? Maybe you have another suggestion?

    See more