-1

I'm starting a new angular project and it has been decided not to use a framework like bootstrap/bulma/materialize/... but write our own sassy component library.

I have done some research but to be honnest I don't realy know where to start (besides a css reset). I'm still a junior, have already worked on some features in a previous existing project. Now I have to start of the front end for new project and would like to build everything as structured and reusable as possible but I'm a little lost where to start.

What's your plan of action when you start writing your? How do you structure your angular components library? Have you ever seen a good tutorial about this that I should definitely check out as well?

Improve this question

2 Answers 2

Reset to default
2

From my point of view, it is not a simple task. But you can start from using SCSS which will give you a wide access to term reusability. And also you may need to work on flexbox/grid-layout (Not the case if you need to support old browsers like IE 11 and below) to implement a handful of styled components. By the combination of scss and 'flexbox`, I think most of the components can be created simply and reused in the way you want it to be.

I strongly recommend avoiding the usage of libraries and write our own code instead. Because the power we will have at the time is infinite. You will be amazed to have it.

But at the same time, if the project is a long-running project and your requirements are on the way, then I would suggest you to rethink about eliminating libraries like 'bootstrap, materialize. Otherwise, if the requirements change in time and you may need to use a number of libraries to achieve the functionalities you may need. (Experience is the best teacher)

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

A quick note on this: Internet Explorer 11 supports flexbox but does not support grid layout. This does not answer the question. You are suggesting which css compiler to use, and encourage the user to write his own css, but not anything about how to structure the css itself.
2

On most of my projects to date I have not used a framework and written my own CSS library and would recommended it. I don't have any experience with Angular, only React. All I can share with you is my current setup.

I use gulp to compile SASS files into a main.css file and BEM methodology (You could also look at SMACSS). Each 'block' (defined by BEM) has a separate file in either Layout or Modules.

I separate my SASS files into the following folder:

  1. Base - Used for - resets /Grids / helpers/ typography/ base (general base styles eg wrap)
  2. Layout - Used for containers - header/footer/sidebar ect
  3. Lib - used for mixins
  4. Modules - used for components - form / button / alert / icon / accordion ect
  5. Settings - color / font / responsive - used to set sass varibles to be used in all other files.

I hope that helps.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.