What are the best Services according to Reddit?

Not a bad choice depending on your type of implementation. You can opt to only import/include the CSS which you're using, rather than the whole package. https://getbootstrap.com/docs/5.0/customize/optimize/

Tailwind is so weird. Both the proponents and opponents argue from principles and purist ideologies like whether it's okay or not okay to move your styling into your html. But, that isn't why people use Tailwind.

People use Tailwind because there's TailwindCSS and also TailwindUI, and on the whole it's a gigantic body of work with consistent styling that allows a developer to build a really nice-looking application with very little effort.

Your alternatives these days are pretty much Bootstrap or one of a smattering of other poorly-supported smaller CSS libraries, and Bootstrap is many things but lightweight it ain't.

I'm enough of a purist that I refuse to build anything large with Tailwind, but man, I really really want to. It's so pretty.

Honestly, it seems to me like 1. you were expecting tailwind to be just like bootstrap. that is not the case and never will be. 2. the point of tailwind is to give you the freedom to style your own components with predefined values so your ui doesn't become a mess. 3. You're not used to components, if you're having to repeat yourself too many times. 4. https://tailwindcss.com/docs/pseudo-class-variants was literally the first result when I looked up hover. 5. Tailwind bundle size is much smaller than bootstrap's, even without PurgeCSS. 6. You're complaining abouy something that someone has done for free. If you're not satisfied, there's nothing stopping you from making a bootstrap version of jetstream (it might even exist already, knowing the laravel community).

I dont know, man, maybe you just don't like changes and learning new things... which is fine too, but you can't complain of people who do enjoy those when they bring improvements.

Pretty good job then! I would check out YouTube for some hands-on experience. But your best bet for a quick UI framework would be to use Bootstrap. You'll be able to throw together a professional looking website much more quickly. Their website also has a lot of reference material on how to use their widgets.

Love the website! Good luck in making improvements.

Yeah, this is not the sort of criticism that pushes anything forwards. Lazy, ad hominem, and largely invalidated by the basic mechanics of component composition/encapsulation, which is literally the use case tailwind css is designed for. An intelligent critique of tailwind css, or at least one that exhibits more than a surface level understanding of it, would be an interesting read; but that piece is a fart joke disguised as a serious tech argument.

Most likely CSS Grids.

http://materializecss.com/grid.html

EDIT: Above is the correct link. Link below references the css grid property, as opposed to the above which references what I was referring to.

https://css-tricks.com/snippets/css/complete-guide-grid/

Good article, even if you don't know any CSS. You can see from the pictures how you can easily drop things onto a page while keeping other content stable.

Edit: Looking at the site, it's not identical to grid layout but the idea is the same - preset containers that you put next to each other to fit the fixed page width of 970px.

Editedit: Actually it's all fixed width stuff, boo!

Check this out: https://www.canbike.org/CSSpixels/

But I dont care about resolution of specific device. Try to create a responsive layout for the whole range of resolutions. Set minimal and maximum width in css pixels that you want to support and make website look good and usable anywhere on that range. Today you can use flexbox and CSS grid to create great fluid layouts. But that does not mean media queries has no justification.

For common breakpoints, check out https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints, these are mobile first (due to min-width) but u can use max-width instead if u want. Also dont be scared to use custom media querie if u need it.

At my company I created something similiar using TypeScript and React. Before we used this http://foundation.zurb.com/emails/email-templates.html. The problem with zurb is, that the created html was super large, because it inlined css-classes inefficiently and the table-system created massive overhead. The Marketing-Team uses Visual Studio Code to create the Newsletter which is really similiar to writing pseudo-HTML. It works really well, they never had a problem yet, the static-typing seems to really help them. I build a simple frontend for it, that uses hot-reloading and iframes to make writing the newsletter really fast with a quick feedback loop. I plan to open source it, but not yet.

Can someone explain what this actually means on a practical level? What would change in Bootstrap that would make it "material design"? Would this basically be a Bootstrap theme to give it an appearance similar to Google UI elements?

I looked at http://materializecss.com/ and it seems to be very similar to Bootstrap with just a few extra details like buttons that have an animation when you press them. I also looked at http://www.google.com/design/spec/material-design, but that seems to be basically Google's style guidelines described in detail and also a description of a lot of the standard conventions of typical UI design. I'm not sure what part of this would be added to Bootstrap.

Pros

Can really cut down on time-to-ship. Not much more to say here. Load Bootstrap from a CDN or as static assets and start coding.
Thoroughly tested in a lot of different scenarios. No one likes thinking about IE ever.
Tons of built in features that are very useful in the real world. Form validation, modals, hamburger menus, etc.
Built-in responsiveness. Mobile friendly out of the box.

Cons

There is a performance cost as you are going to be loading a lot of unused CSS. Unless you go with a more bare-bones version. It's probably a minor issue for most folks but it is a consideration.
Often Bootstrap sites feel like Bootstrap sites. You start to recognize the design and functionality patterns pretty quickly all over the web.
From my own experience, it is way too easy to fall into the "we're out of time, just throw in Bootstrap and let's move on" mode.

TL;DR - Bootstrap is a wonderful tool for your toolbox. Don't overuse it. Definitely learn Flexbox, Grid, and other native CSS properties.

For what it's worth, Derivative Clicker was around before Swarmsim.

> Game often looks like Swarm Simulator

It'd be easy to read this as "everyone's copying Swarmsim", so I want to be clear: this isn't my work. Swarmsim uses Bootstrap with almost no customization. Bootstrap's a popular theme/layout used by many different websites, most of which aren't even related to incremental games, much less Swarmsim.

Just a heads up, it seems like you’re using string concatenation to create the bg and text color class names. This will trip up purgeCSS when building for production.

https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

It needs some work. It's a nice first attempt, but there are some more obvious problems that you need to work out.

Others have mentioned ways to fix your header list issue. They've also mentioned removing padding from the html and body elements so you don't have the white padding around your site.

But something I haven't seen mentioned is your transparent header. I think that's an unfortunate UI design; it looks OK when the header image is showing through, but not when it's covering text. Perhaps use Javascript to set opacity to full once you've scrolled past the header image, or animate the opacity away from full when you scroll all the way to the top. Either way, the transparent header with text behind it makes it hard to read.

You use a lot of border-style: dotted borders, but it's not a good look.

Your Contact page is also broken, the developers/email doesn't line up with the headers.

I recommend checking out a UI Framework like Bulma, Bootstrap, Semantic, Foundation, or any of the others. I'm not saying you should use these frameworks or toolkits, but you can take a look at the design elements they're using, then take inspiration from them.

For example, a lot of your dotted-line bordered divs are really "alerts". Check out how Bulma designs their notifications:

https://bulma.io/documentation/elements/notification/

Or bootstrap:

https://getbootstrap.com/docs/4.1/components/alerts/

I'm not trying to be rude but this is a pretty bad solution. It already looks bad because the height of the second picture is bigger than the first. What will happen with the 4th picture? Go above/below the second? Will it go down and leave an awkward empty spot in the middle of the 4th pictures? Your example can be fixed if every image is resized to a default size (I think whatsapp does it this way)

The current issue can easily be fixed with a image carousel/gallery when you send 2+ images but considering they still have you stuck with 8mb file share limit for servers unless you have 7+ boosts...I don't think sharing is a priority for them, unless is stickers and nfts

I'm confused. How is this different from mat-select that is included in the official google release of angular material?

Angular Material MatSelect

Here was mine from my wedding two months ago for those looking for other inspiration: http://christinaahn.com/wedding

Built with http://materializecss.com/ , best CSS framework I've ever worked with. Damn site built itself...

Side note, I'm a front end developer, but trained as a designer - so its design heavy and backend light.

Yeah, with Tailwind you'd typically extract reusable styles into components. From the docs:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Button </button>

<button class="btn btn-blue"> Button </button>

https://tailwindcss.com/components/

Have you tried something like bootstrap? If you follow the html from their docs it's really easy to piece together frontends, especially if you're more interested in the backend. Like the navbar component https://getbootstrap.com/docs/4.0/components/navbar/

If the creators of tailwindcss truly believed in this "utility first" approach, why would they make a paid product called tailwind-ui which is the antithesis of the fundamental idea of tailwind?

From tailwindcss.com/components:

> Unlike many other CSS frameworks, Tailwind doesn't include any component classes like form-input, btn, card, or navbar.

> Tailwind is a CSS framework for implementing custom designs, and even a component as simple as a button can look completely different from one site to another, so providing opinionated component styles that you'd end up wanting to override anyways would only make the development experience more frustrating.

> Instead, you're encouraged to work utility-first and extract your own components when you start to notice common patterns in your UI.

And then later from tailwindui.com:

> Beautiful UI components, crafted by the creators of Tailwind CSS.

... which costs $249? Am I the only one to notice a discrepancy here?

Good stuff for a first website.

Some feedback regarding the design: I personally don't like the font, but regardless of taste, the font-sizes could use some improvement. The footer should have a smaller font-size than the rest of the main content and the main content could use a bit more line-height. The pdf links font-sizes could also be the same as the main content (and a nicer shade of blue).

Fonts resources: https://www.google.com/fonts Colour resource: http://materializecss.com/color.html

On the homepage the 3 blocks at the bottom lengths go from small to big. I would suggest putting the largest one in the middle to balance out the layout.

Code wise I personally suggest avoiding #id selectors in CSS as they increase the CSS specificity unnecessarily (use .classes isntead). I also don't see a reason to split up the CSS in different files per page considering the pages have very little CSS.

The 3 images on the homepage use javascript to replace the img onmouseover. This means that the first time the user hovers of the img, theres a delay before its shown. To get around this use the css :hover state to show the other image. Something like div { background-image:url('hoverimage') } div:hover img {display: none} - this way your first image is still in the HTML. Also add 'alt' attributes to your images for SEO and accessibility reasons.

I also noticed a <p align="center">, which I'm pretty sure is a deprecated attribute. You should avoid any styling specific attributes in your HTML alltogether, and use CSS instead: p {text-align: center} There is also a border=0 attribute on your images (use CSS instead) and a name attribute - this should be an ID (if it's used by JS) or a class if it's used by CSS

I'm sure I could come up with more but I don't want to overwhelm you. It's a good job for a first site!

In case you haven't seen it, Bootstrap has a migration guide on their site https://getbootstrap.com/docs/4.0/migration/. Does not explicitly mention jQuery or Popper versioning though.

It might take some effort since your site is already built, but I highly recommend Bootstrap. Bootstrap's grid system makes designing for web and mobile at the same time so much easier.

Its cool but I dont like the fact that they replaced the utility classes ml-x & mr-x with ms-x & me-x

p.s.Really like floating labels

I've used element-ui in a couple of projects and I like it a lot.

You can save bandwidth by importing just the needed elements, it has nice docs and changing the theme is almost easy :)

Literally an entire section on using tailwind for responsive design. It's basically THE best feature tailwind has

https://tailwindcss.com/docs/responsive-design

You're not putting CSS in your HTML. These are classes. They're not just CSS properties; they're abstractions of concepts. Going through some of the more complex utility classes they're actually doing a lot of convenient things. They're not even close to being inline styles and I don't know why people keep saying this. Knowing how an element will look simply by scanning these classes without having to look for the CSS style file or the style tag is hugely convenient

The official tailwind docs also have instructions for doing this with Vite. Pretty much identical apart from the first command https://tailwindcss.com/docs/guides/vue-3-vite

AngularJS is overkill for this kind of application, Materialize should be enough for the front-end and why not some Ajax with jQuery if you want to make it look more like an app.

This is without looking at actual code and just making an educated guess.

Media queries to target certain styles as different resolutions, this let's you hide, re-position or completely restyle elements for different devices. To get the Navbar to change they will have used a navbar collapse https://getbootstrap.com/components/#navbar

Never mind the negativity, also the quality might not be perfect with all the content but it's better than nothing. I like it.

I don't know what stack the site is build on, but it might help to use a css framework to sort out the awkward layout (look at bootstrap or I prefer to use skeleton http://www.getskeleton.com/ uses grids and is responsive.

Smaller than 960: Smaller than the standard base grid

Tablet Portrait: Between 768px and 959px

All Mobile Sizes: Less than 767px

Just Mobile Landscape: Between 480px and 767px

Just Mobile Portrait: Less than 479px

http://www.getskeleton.com/

I personally use the css @apply option to avoid this kind of repetition. So you can do something like this:

In your CSS:

.something { @apply relative z-10 col-start-1 [many more] sm:bg-none; }

Here is more info about this process. https://tailwindcss.com/docs/extracting-components

Check their Extracting Components section.

They encourage you to make components from utility classes and that's probably the best way to use the utility patterns.

Man, those templates look like shit! Loads of errors from Angular, busted UI elements, scroll bar overflow bumping on side menu flyout... hope they get that cleaned up soon.

Definitely looking forward to what they come up with though, the web framework is nice.

ms = margin start me = margin end

This is because it uses flex, so you can have either rows or columns and use ms and me. ml and mr are not accurate if you use columns.

"RTL Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., start and end in lieu of left and right." https://getbootstrap.com/docs/5.0/migration/

I really like this! Super clean and I love the animations and detail that went into it. I second the routing comment that u/sjaigeo mentioned. React Router is a super popular routing solution for React, and it definitely will pay dividends to know how it works.

Another piece of advice I might give is to explore more state management solutions in React, because there are indeed many. Having a top level state object where you pass down props to your components is completely valid, and will definitely work for a smaller application, such as this. However, as the application expands, you might find that you run into an issue with prop drilling (passing down props through multiple levels of components). I'd try a few different state management solutions and see which one you like most. Definitely try using React's own Context API with useReducer and useState hooks to start. Once you feel comfortable with that, you can check out other solutions like Redux (not as dead as people might have you believe), MobX, or Recoil.

Also, Material UI is an absolute bear of a component library to work with. It's trying to do everything at once. If you're looking for a component library, I'd recommend something like reach UI (reach.tech), which is something a bit less heavy that you can customize yourself. Alternatively, you can play around with a more CSS oriented solution like Tailwind CSS (https://tailwindcss.com/), which is getting a lot of buzz right now.

Great job though! Always great to see mobile devs coming over to our neck of the woods to try out some web dev work.

Tailwindcss is a utility-first css framework. Component based approaches tend to produce Uis that all look very similar (e.g. your typical bootstrap site). Utility-first approach gives a lot more power to designers. Their website does a good job explaining the advantages of this approach.

https://tailwindcss.com/

Susy is an interesting grid system. Instead of using classes you define your own and use their robust mixins.

Foundation is a popular alternative to Bootstrap. I believe it is modular and you can include just the grid system without the whole framework.

Although Blazor has a component style, and many vendors provide out of the box components, you still need to understand how web layouts work with html. One example that's a very common framework for layouts is Bootstrap. https://getbootstrap.com/docs/5.1/examples/

At our company we use Blazor Server with Telerik controls, which in turn use Bootstrap underneath.

I'm using Angular Material as an example since their docs are better than the React Material library but you'd use an existing UI framework like this that has already solved accessibility and the myriad of UX issues you'll encounter designing a navigation menu from scratch: https://material.angular.io/components/menu/examples

You're not forced to download anything. For example, if you are using material autocomplete you can defualt the options to null, or empty. then as the user types a certain amount of characters, hit your API to get a list of suitible matches from your backend.

https://material.angular.io/components/autocomplete/overview

You can also bind to the observable directly using the async decorator. There are also the ng-pending class to show a spinner or message if needed.

Hope this helps.

It looks like you installed the old dependency angular2-material.

This package was used early in the pre-release development cycle of Angular Material v2, but has no longer been used since September of 2016. Development of Angular Material now occurs under scoped npm package @angular/material. Visit https://material.angular.io for the latest information and instructions for using Angular Material or check out the latest source code from https://github.com/angular/material2.

You need @angular/material

I created a theme based on Skeleton (http://www.getskeleton.com) that has a lot of my favorite functions ready and primed to go. It's SUPER bare bones so I can make it look however I want. I set that up as a parent theme, then create a child theme for the client to use.

really it's a little too bare bones for me. If I want something really bare, I will go to initalizr and get the HTML5 boilerplate; it also offers a version of BP with Boostrap that I use.

Another good lightweight framework is Skeleton: http://www.getskeleton.com/

check out the skeleton boilerplate, it's a good tool to just throw into your site.

You just have to call out to the CSS, for instance have: <div class="one-third column"> and then skeleton will tell it to go from a one third column into a full width column when the site is shrunk. (look at the grid a little bit down the page and re-size your browser to see what I mean)

It can get as complex as you want it to be, for instance, I have it so the search bar changes to specific widths depending on the size of the screen, and then once it gets to the mobile view, I tell it to hide the search bar at the top, and unhide one that it styled differently and in a different spot.

It's done with CSS3 @media queries. I did a little blog post on it that you can check out if you're curious: Why Responsive Design is Important

It is compiled through postCSS (it is a plugin to postCSS) and what is not used is stripped out on production so any styles not used will be removed, and it should be done this way as tailwind is HUGE.

https://tailwindcss.com/docs/using-with-preprocessors

I never used tailwind until a recent personal project, I am in love with it. It has become very natural to me.

In a world of components tailwind makes the most sense to me simply needing to add classes inside of my components and anything over three(I believe this is what is recommended) a @apply is used as shown above.

It is also highly customizable through the config file

For more on the Refactoring UI topic itself, I'd recommend the book — it delves deeper into many of the tidbits that the author went through in his videos.

For practical examples, I'd suggest to peruse the Tailwind CSS (and its productized version, Tailwind UI) site, since the author co-created this product and poured a lot of the UI design knowledge into it. There are also plenty of sites like Screenlane that collects UI designs in the wild across different industries and platforms; once you get past a certain point, it's more about putting the knowledge into use to develop your skills.

Everything else, I think you will likely get more diverse responses from /r/UI_Design than this subreddit.

If you want something truly custom you'll have to roll your own. Perhaps merely creating your own components with something such as tailwind.css can help you with this.

Similarly, there's nothing stopping you from using something like Vuetify and changing how it looks yourself. For example even just changing the base font will immediately change the material look.

Tailwind is very much in the same vein as these CSS frameworks. The biggest differences are:

Tailwind was designed from the ground up to be highly customizable. Unlike other frameworks where your locked into the utilities they provide, Tailwind has a ton of customization options allowing you to tailor the framework specifically for your project.
Tailwind takes a pragmatic approach to class naming. We've prioritized understandable and descriptive classes over having really short classes, or even names that align perfectly with their respective CSS properties.
Tailwind is component friendly. We sit somewhere between BEM and going full-on utility classes. Where it makes sense we encourage creating components, and have even created tooling to make this easy to do.
Finally, we've given our documentation as much care and attention as the framework itself. We believe that having beautiful, easy to understand, easy to navigate documentation will make developer's lives better as they work with our project.

They are incredible. I am using Vuetify right now and am making a ton of progress with my project in little time.

Keep in mind that a Vue component library is not just for saving you from writing a bunch of HTML. They also contain plenty of logic to make working with certain components easier.

Vue.js has various component libraries. My favorite is Vuetify, a complete Material design framework... the components takes some time to master, especially for someone who is not familiar with material design, but the official documentation is very helpful, with lots of practical examples for each component type. And they can be easily customized by playing the built-in attributes and classes, or adding custom CSS. The default look is Google's Material design, but you can style it, just like with normal HTML + CSS.

They're just showing an example without thinking in terms of their "mobile first" mantra. (BTW, I'm a big fan of Foundation)

The ".col-sm-12 or small-12" are referred to as break points. If you don't care how your site looks on large screens, then you can design your entire site using small grid break points. However, your site will most likely be used on large screens as well, so you should probably have a layout for them also.

If all you cared about was mobile devices, your html would look like this;

<div class="row"> <div class="small-12 columns">Headline</div> <div class="small-12 columns">picture</div> </div> <div class="row"> <div class="small-12 columns">words</div> <div class="small-12 columns">another picture</div> </div>

And your content would be layed out like this.

small-12
headline
picture
words
another picture

Which is fine, if all you care about is mobile users. However, if you want your content to look good on large screens, you would want your html to look like this;

<div class="row"> <div class="small-12 large-6 columns">Headline</div> <div class="small-12 large-6 columns">picture</div> </div> <div class="row"> <div class="small-12 large-6 columns">words</div> <div class="small-12 large-6 columns">another picture</div> </div>

Now your content would look like this on large screens;

large-6	columns
headline	picture
words	another picture

And would do a better job of filling out the space for large devices.

If you expand and collapse this page, you will see the grid in action, foundation.zurb.com/

I hope that makes sense.

edit: spelling and trying to get the table layout to work

Honestly, I prefer Foundation by Zurb. This could be because I mostly build applications that need to feel like a web app; this could be because I'm a dev, not a great designer; YMMV. I should also note that I haven't used/looked at Bootstrap since v1 or 2, when Foundation was released. At the time, bootstrap just wasn't that solid.

I hear it's great these days. Using a framework for production is something I definitely recommend - you're more than welcome to build your own, but why reinvent the wheel at this stage in the game?

You might find Zurb's interchange javascript library interesting for what you are trying to accomplish. Done client side instead of server side, but it solves the problem you are looking at http://foundation.zurb.com/docs/components/interchange.html

Design your site with Bootstrap then replace the CSS with Geo for Bootstrap to add your 90s flare to it.

For hosting your website Netlify is one of the easiest. Literally drag and drop your folder of files into it and it automatically uploads and deploys it for you for free.

To add your custom domain to it you will want to follow their instructions to change your name servers at GoDaddy for your domain/URL.

My recommendation as someone that has been doing this for 8 years, is pay someone. Potentially yes you could create something that works... but it won't work well on all platforms in all scenarios.

As for things that will help you get something built until the above can be achieved, start with the following :

Hey man! I used bootstrap to help me with this:
Look at the source of this example page, the third example (Responsive left-aligned hero with image): https://getbootstrap.com/docs/5.0/examples/heroes/
Specifically this line:
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
flex-lg-row (you probably want it without the reverse) is the class that switches to flex row, once the screensize goes to ‘lg’ or lower. See https://getbootstrap.com/docs/5.0/layout/grid/ for more info.

The mat-form-field component now supports 4 different appearance variants which can be set via the appearance input (legacy, standard, fill and outline). Here is a link to the page where you can find more info about it.

being able to use @apply for my small components is one of the main reasons i love react + tailwind lmao

just say you didnt give tailwind a chance, which is fine - https://tailwindcss.com/docs/extracting-components

Damn, 15 years, and you still haven't learned how to Google or even peruse official documentation? (e.g., customizing colors)

Crazy how nature do dat

Haha this is weird, i was looking for this yesterday. You can use the tailwindcss plugin: typography.

npm install the plugin, then add it to your tailwind.config.js

plugins: [require('@tailwindcss/typography')],

and in your wrapper component now you can use the prose class to get styles from the markup

className="rose lg:prose-xl"

https://tailwindcss.com/docs/plugins#typography

So what you can do besides writing a bunch of additional CSS to make your site look pretty is taking advantage of a front end framework like Bootstrap or Foundation. They both provide you CSS/JS to make your website look fancy.

You can take a look and pick the one that looks more attractive. Both provide many examples and templates to get started. If you don't like either, you can look up more front end frameworks. Don't stress on deciding, just pick one and roll with it, you can customize most components to your liking with a little more CSS. I do believe Bootstrap is the most popular one, but I could be wrong.

Yes, people write a lot of HTML/JS/CSS. You can use something like Bootstrap and Foundation to make it easier, but you still need to write the frontend yourself.

Unforunately you're very much in the wrong subreddit!

"Foundation by Zurb

...is an advanced responsive front-end framework worth taking a look at."

http://foundation.zurb.com/

It's possibly as far from what you're looking for as possible :)

You might find something useful here: https://www.reddit.com/r/MakeupAddiction/comments/333xed/a_master_list_of_the_makeup_related_subreddits/

I am surprised that they released it without any 5 to 6 version migration guide.

Pages with v5 stopped working:

Quite a disappointment....

You are starting over. The tools you mentioned are part of a contemporary javascript & node js workflow. This is as sophisticated as any PHP will get.

I use Foundation. It's way easier than the options you listed and does a lot:

http://foundation.zurb.com/docs/

You can even use Composer to install it:

"require": { "components/foundation": "5.5.*" "config": { "component-dir": "public/components", "component-baseurl": "/components" }

Easy to get up and running, Sass/Less compilers can be integrated into your workflow later.

Good luck.

I'd be interested in seeing a line item comparison with the other two large frameworks out there: Twitter Bootstrap and Foundation.

Also does anyone know how well these frameworks play with HAML, Sass (or Less), etc.?

The flex part of bootstrap docs is usually what I load up in order to remind myself of flex properties even when not using bootstrap.

Its got really clear visuals for space around, space between etc

https://getbootstrap.com/docs/4.3/utilities/flex/

You need to think about this a little differently. One better way to look at this is 2 columns, one left and one right. The one on the right then needs to be itself divided into a row that wraps two full width columns.

This should get you started. You may need to adjust the column widths and use Bootstrap's row justification classes to get it exactly right for your use case.

It's hard to definitively say, but if you want to just use the grid there is a distribution that is grid + utilities only and is 29kb minified.

https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

You can also use the SASS source to pick and choose parts of Bootstrap to use. If you want to spin something up quick and the grid helps you do so, there's no shame in using it.

This is pretty simple to make yourself, but to get the gist of it, just take a look @Bootstrap docs.

They show a neat example of 'vertical pills' which is pretty much exactly what you're looking for, of course if you want it exactly like your example, you'll have to change the height of the pills accordingly. Hope this helps a little.

https://getbootstrap.com/docs/4.1/components/navs/#vertical

I highly recommend looking at Bootstrap for responsive css. It's available on several CDNs, which means if the client has visited another site that uses the same cdn+version, they don't have to download it again.

dont worry, I always have this problem, I don't know the correct name to look it up lol

here are some examples (the third one)
and with bootstrap

I've used both Twitter Bootstrap because I enjoy working with .less more than plain old CSS and Skeleton before but I still find that it takes me longer to build and test a responsive design than a normal one.

Of course I can just say to the client 'it will take longer' but I was wondering if anyone had any interesting or clever ways of accurately pricing this type of work.

For example. How do you deal with nested navigation? How much longer (from your experience) does this add onto a job? That type of thing.

You may want to check out Skeleton. It's an HTML5/CSS framework that is responsive to mobile users. (Basically, it uses @media requests to test for screen size and then adjusts the display according to screen size.) I used it for a personal site recently, and I fell in love with how responsive it is!

In fairness, the Tailwind methodology is to write components and use tw classes within those components directly.

Writing your own classes and applying tw classes is an escape hatch.

Utility-first approach described here

It doesn’t have to be ugly. You can create pretty, descriptive classes, and then do this in your CSS:

.beautiful-name { @apply text-white bg-black rounded-lg shadow-md hover:bg-blue-700; }

https://tailwindcss.com/docs/extracting-components

You can use the @apply directive in your CSS file to get Tailwind to output standard CSS. Something like

.element { @apply w-32 h-32 rounded-full; }

... outputs to...

.element { width: 8rem; height: 8rem; border-radius: 9999px; }

Not sure if this would fit your requirements but it's useful as a midpoint between not Tailwind/using conventional CSS styles and a HTML file littered with TailwindCSS class selectors.

If the code isn't necessarily for use in the project that you'll have to compile it in, you might just scaffold a Tailwind-only project with Webpack (for example) and paste tailwind classes into a CSS file and then copy the output in the resulting CSS file.

@apply is explained in the docs here: https://tailwindcss.com/docs/extracting-components#extracting-component-classes-with-apply

What does your css file look like. Tailwind doesn't purge non-tailwind styles by default unless you've put them into a purgeable layer, so I'm wondering how you've added the styles.

I also see you're using `whitelist`, which is not the most up-to-date for PurgeCSS or for Tailwind. Are you using Tailwind v2? If so, you'll be using PurgeCSS 3, and so should be using `safelist`. See: https://tailwindcss.com/docs/upgrading-to-v2#update-purge-options-to-match-purge-css-3-0

Flex / Grid is part of CSS and isn't going anywhere, learn it.

The trend for many at this point is to not use frameworks like bootstrap for production sites but many still do and will carry on doing so as it works.

There are plenty of "utility" frameworks that can add value to a build like https://tailwindcss.com/ if you prefer that method.

For me at this point a decent css normalisation base like reset.css with SASS i haven't used a framework for some time.

For those interested, a lot of this is very accessible in Steve and Adam’s tailwind css framework. Highly recommend checking it out! If you want to see it in practice, check out Adam’s YouTube channel (Adam Wathan).

Tachyons, it has the best concept of modularity & today TailWindCSS caught my attention.

I use Tachyons but that makes me not write any CSS & bloats my HTML a lot bcz of too many classnames & kinda makes me lose my cool. Bootstrap when I started as beginners only know that bcz of its popularity. Then Foundation but it was hard & I struggled there a lot.

I think if u want ur site to be different then u need to write a lot custom CSS. Also it makes u understand CSS. Trust me, CSS is the most difficult language to master even though it takes u only a day to learn. This is just my opinion. Throw any framework at me & I will be proficient with it in 6 months, but been doing CSS since 3 years & still suck at it. So my advice write as much as CSS without framework bcz u will learn a lot & can then build ur own Framework.

The Vuetify docs are generally quite good. https://vuetifyjs.com/en/components/avatars

In general though you will need to know some Vue basics. Mostly props, v-model and slots to get the most of Vuetify. If you don't know those concepts first I'd head over to the official Vue docs and make sure you understand the basics of Vue before trying Vuetify.

Ah! HTML Emails? Sadly that's my speciality at my current job - use Foundation, read the docs, and it will save you DAYS. I've collected a load of little tips over time I can also post if you're interested?

jemath says they use Bootstrap, and Bootstrap's grid uses floats. http://getbootstrap.com/css/

Foundation's grid uses floats, too - http://foundation.zurb.com/sites/docs/grid.html though they have a flex grid, too.

Use a CSS/JS library made for specifically for responsive or mobile first design as it can be a pain to do it from scratch. Two that comes to mind off the bat are Foundation and Bootstrap.

Well, I'm not exactly sure what I'm saying :). Given a bit more thought I think the updated party stances page would be a good start if the headers were decreased. Maybe put the party icon on the left side under the subject heading (Environment, O&G) with a the first point from the parties platform on the subject with a read-more link that expands it? Just throwing out ideas in response to your question.

I just took a peak at the source code. Have you heard of http://getbootstrap.com/ or http://foundation.zurb.com/? They are UI frameworks that contain a bunch of CSS and JS that are ideally suited to building a web page like this. They are also responsive so working on different screen sizes works well too. Using tables for non-table data isn't that popular anymore :).

I would say it depends on your goal.

1) Do you want to learn how to build (code) responsive web sites or 2) Do you want to leverage what you know about responsive design and not worry about coding as much?

If you want to learn the intricacies (fight through cross browser issues, deep dive into obscure ways to solve those issues, etc) and have the time, you should continue working on your own framework.

If your goal is to know enough code to produce responsive web sites quickly and in order to make money (and to be efficient) you should definitely use a framework.

You can even use as much or as little of the framework as you need. (Maybe you just want the responsive grid, for example, and want your own unique style). The only reason you'd code your own grid is to learn it.

BTW, you should checkout Zurb Foundation. It's an alternative to Bootstrap and I find it's very enjoyable to work in. (I have nothing against Bootstrap, but it's just my preference).

If you're looking for a framework, http://foundation.zurb.com/ has a good model that I found easy to use. Some of it is kinda wonky, it uses the column style layout, but it's all really responsive and even comes with some built in js buttons and what have you.

I don't know exactly what you're looking for, but if you're looking for responsive frameworks, that fits your needs I believe!

im actually working on this now, but if youre good with data and backend id love some help. im writing c# scripts to interface with the show rundowns site, using name recognition to get guest lists and topics that you can filter and sort using SQL.

The main reason i made this was to learn web development so if we do that i want to have it all custom code, not drop ins.

I was thinking about letting users add tags using chips (whassat?) http://materializecss.com/chips.html

Also what type of engineer are you? I can send you an invite to our slack room and we can chat there if you wanna help out. Thx budday

I find myself using http://materializecss.com/ quite often. It's similar to Material-ui, obviously. I personally didn't know about Material-ui until I read your post, but it seems quite good. I'd say it's a thing of preference.

Check out Materialize CSS. That and Twitter Bootstrap. Like someone else said; it might teach you to be lazy. It might also give you a lot of unnecessary complexity. However, it makes creating a professional looking website fast. If your doing small to medium projects, they might be exactly what your looking for.

Bonus: I'm unemployed right now, and I see a lot of jobs looking for people with Twitter Bootstrap experience

Edit: I wanted to add; if your design-retarded like myself, these frameworks really help

its ok, kind of dark and creepy, it does not have this pop, like wow that looks cool, I want to hire this guy.

start over and make a new one

here is a nice example I like personally

https://online-resume-6f0b5.firebaseapp.com/

Keep this is mind, has to look good on desktop and mobile device.

you could use say Flexbox and demonstrate your skills

http://bulma.io

I don't know, there is just so much you could had done.

No. You can use things like CSS Media Queries and just specify that if the screen size is smaller or you are using a specific device, some elements should be displayed a bit differently.

If you are using Bootstrap, you can look up specific classes for creating mobile layouts - e.g. col-md-3 and col-sm-3 (https://getbootstrap.com/docs/4.5/examples/grid/#containers) are working differently on different screens. Bootstrap has already been created with mobile in mind.

I would recommend checking out : https://getbootstrap.com/docs/4.0/utilities/flex/

In your case, provided the outer div is a col, the code most probably would be like :

<div class="col-md-12 d-flex justify-content-center">Your boxes inside</div>

Most websites I build only have a small message at the top/bottom of the screen with a link to the cookie policy. They look similar to Bootstrap alerts. An example can also be found in the European Commission handbook (bottom of the page). Much less invasive than a full screen takeover popup.

> This page uses bootstrap 4 default with no additions whatsoever

It's broken on Bootstrap's demo page as well. I'm not sure why you're using a modal component (or any popup at all) for this content.

The 'card-deck' class in bootstrap 4 will likely give you what you\re looking for.

https://getbootstrap.com/docs/4.0/components/card/#card-decks

If you open inspect the active pill in Bootstraps docs with your browser's DeveloperTools, you'll see that .nav-pills .nav-link.active has the blue background-color property applied to it.

You can change it by adding your own .nav-pills .nav-link.active styles in your own CSS file (make sure your custom CSS file loads after the default Bootstrap styles) with a different background-color.

If you're compiling directly from Bootstraps Sass, there should be some kind of "active color" variable (or something like that. not sure exactly what the variable is called)

The "proper" way to do it would be to import it with Sass and change variables, only include components you need and use the mixins/functions to generate your own versions of components.

https://getbootstrap.com/docs/4.0/getting-started/theming/

> when I looked at it on my iPhone it was only taking up 3/4 of the screen and not working as intended.

I'm betting you haven't got the correct meta tag set for pixel ratios (i.e. mobile devices typically have a higher pixel densities) :

https://developers.google.com/web/fundamentals/design-and-ui/responsive/

> Bootstrap is looking to realign everything in columns based on if you're mobile, tablet or desktop... and that's not what I want.

Only partially true. Yes it does use columns / a grid, however you get to determine how many of those columns your content takes up (almost like a way of declaring width).

The default grid has 12 columns, therefore if you specify a class of col-12 (assuming you're using latest bootstrap v4 in beta) then when implemented correctly it should take up the entire width.

https://getbootstrap.com/docs/4.0/layout/grid/

> I want everything to look the same no matter what the width of the device is, I want to keep that "640px width" look, stretched out on small devices but have black bars or background or something on larger devices.

Lol you realize this will look ridiculous and potentially be unusable especially at larger resolutions (1440p / 4K)?

Mimicking a mobile app is fine at smaller resolutions but you need to figure out how to expand this on larger screens, such is the nature on responsive design.

> Bootstrap? Something else? Go hardcore and make all the styles myself? I need a direction.

Doesn't matter where you go, bootstrap, foundation, bulma, skeleton, etc most front-end frameworks will use a grid system to address sizing and layout.

What are Reddit's favorite CSS Framework Apps?

Bootstrap

Tailwind CSS

Foundation

Angular Material

Materialize

Vuetify

Skeleton

Bulma

Element UI

Spectre.css

MUI

Gridlex

Top Reddit reviews mentioning CSS Framework Apps: